/* premium.css —— 3D 视觉层 + 营销落地页组件（2026-10-25）
 *
 * 分工：style.css 管「功能版面」（列表、卡片页、后台风格），
 *       本文件只管「卖相」：3D 深度、光、动效、广告位、转化组件。
 * 原则：
 *   ① 只用 transform/opacity 做动效，不触发布局回流；
 *   ② 全部动效在 prefers-reduced-motion: reduce 下关闭；
 *   ③ 3D 需要 preserve-3d，父层一律显式 perspective，避免子层各自为政；
 *   ④ 移动端优先：小屏减少浮层数量，防止层叠遮挡点击。
 */

/* ================= 设计令牌（在 style.css 的宣纸色上叠一层深度） ================= */
:root{
  --lp-ink-deep:#14181E;
  --lp-paper-2:#F5F0E4;
  --lp-red-deep:#8E2B24;
  --lp-gold-light:#E4C078;
  --lp-glass:rgba(255,255,255,.72);
  --lp-shadow-1:0 1px 2px rgba(20,24,30,.06), 0 8px 22px rgba(20,24,30,.06);
  --lp-shadow-2:0 2px 6px rgba(20,24,30,.08), 0 18px 44px rgba(20,24,30,.10);
  --lp-shadow-3:0 30px 70px -20px rgba(20,24,30,.35);
  --lp-persp:1100px;
}

/* 纸纹 + 光晕：整站背景（只加在落地页，避免影响卡片页性能） */
.lp-paper{
  position:relative;
  background:
    radial-gradient(1100px 560px at 80% -10%, rgba(178,58,50,.10), transparent 62%),
    radial-gradient(760px 460px at 0% 16%, rgba(168,122,36,.09), transparent 62%),
    radial-gradient(680px 400px at 55% 104%, rgba(46,107,92,.05), transparent 66%),
    linear-gradient(180deg,#FCF9F2,#F8F3E8 46%,#FAF6EC);
}
.lp-paper::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
/* 只给正文层抬 z-index。曾经写的是 .lp-paper > *，结果把 topbar 的 sticky 和
   tabbar 的 fixed 一起改成了 relative —— 顶栏不再吸顶、底栏跟着滚走。
   布局闸（layout-test）就是靠这条报出来的。 */
.lp-paper > .wrap{position:relative;z-index:1}
.lp-paper > .lp-promo{position:relative;z-index:3}

/* ================= 顶部促销广告条（跑马灯） ================= */
.lp-promo{
  background:linear-gradient(90deg,var(--lp-red-deep),var(--red) 45%,#A6422F 72%,var(--lp-red-deep));
  color:#FFF6EC;font-size:12.5px;letter-spacing:.02em;
  overflow:hidden;position:relative;
}
.lp-promo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.22),transparent 12%,transparent 88%,rgba(0,0,0,.22));
}
.lp-promo-track{
  display:flex;gap:0;white-space:nowrap;width:max-content;
  animation:lp-marquee 26s linear infinite;
  padding:7px 0;
}
.lp-promo:hover .lp-promo-track{animation-play-state:paused}
.lp-promo-item{display:inline-flex;align-items:center;gap:8px;padding:0 22px}
.lp-promo-item b{font-family:"Songti SC",serif;color:#FFE3B8;font-weight:600}
.lp-promo-item i{width:4px;height:4px;border-radius:50%;background:rgba(255,246,236,.55);display:inline-block}
@keyframes lp-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ================= HERO：3D 舞台 ================= */
.lp-hero{position:relative;padding:40px 0 18px;overflow:hidden}
.lp-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:20px;align-items:center}
.lp-kicker{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;letter-spacing:.12em;color:var(--lp-red-deep);
  border:1px solid rgba(178,58,50,.28);background:rgba(252,241,239,.85);
  padding:5px 11px;border-radius:999px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.lp-kicker .dotpulse{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(178,58,50,.5);animation:lp-pulse 2.4s infinite}
@keyframes lp-pulse{0%{box-shadow:0 0 0 0 rgba(178,58,50,.45)}70%{box-shadow:0 0 0 9px rgba(178,58,50,0)}100%{box-shadow:0 0 0 0 rgba(178,58,50,0)}}

.lp-hero h1{
  font-family:"Songti SC","Noto Serif SC",serif;font-weight:600;
  font-size:clamp(32px,7.6vw,50px);line-height:1.18;letter-spacing:.01em;
  margin:16px 0 12px;color:var(--lp-ink-deep);
  text-shadow:0 1px 0 #fff, 0 2px 0 rgba(255,255,255,.6), 0 12px 30px rgba(20,24,30,.10);
}
.lp-hero h1 em{
  font-style:normal;position:relative;color:var(--red);
  text-shadow:0 1px 0 #F6D9D2, 0 3px 0 rgba(142,43,36,.18), 0 10px 24px rgba(178,58,50,.24);
}
.lp-hero h1 em::after{
  content:"";position:absolute;left:-2%;right:-2%;bottom:.08em;height:.28em;z-index:-1;
  background:linear-gradient(90deg,rgba(228,192,120,.55),rgba(228,192,120,.15));
  border-radius:3px;transform:skewX(-8deg);
}
.lp-hero-sub{color:#4A5260;font-size:15.5px;line-height:1.75;max-width:30em;margin:0}
.lp-hero-sub b{color:var(--lp-ink-deep);font-weight:600}

.lp-cta-row{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 12px}
.lp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:13px;padding:13px 20px;font-size:15px;font-weight:600;
  border:1px solid transparent;cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s, background .16s;
  transform:translateZ(0);
}
.lp-btn-main{
  color:#FFF8EF;
  background:linear-gradient(160deg,#C0433A,#9E2F27 62%,#832019);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 10px 22px -8px rgba(142,43,36,.62), 0 2px 0 #6E1A14;
}
.lp-btn-main:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 16px 30px -10px rgba(142,43,36,.7),0 3px 0 #6E1A14}
.lp-btn-main:active{transform:translateY(1px);box-shadow:0 6px 14px -8px rgba(142,43,36,.6),0 1px 0 #6E1A14}
.lp-btn-ghost{
  color:var(--lp-ink-deep);background:rgba(255,255,255,.86);
  border-color:rgba(20,24,30,.12);box-shadow:var(--lp-shadow-1);
}
.lp-btn-ghost:hover{transform:translateY(-2px);box-shadow:var(--lp-shadow-2)}
.lp-btn small{font-weight:400;opacity:.8;font-size:12px}

.lp-trust{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:#79818E;margin-top:4px}
.lp-trust span{display:inline-flex;align-items:center;gap:5px}
.lp-trust span::before{content:"✓";color:var(--jade);font-weight:700}

/* ---- 3D 浮空卡片舞台 ---- */
.lp-stage{
  position:relative;height:330px;perspective:var(--lp-persp);
  perspective-origin:50% 45%;
}
.lp-deck{
  position:absolute;inset:0;transform-style:preserve-3d;
  transform:rotateX(10deg) rotateY(-17deg);
  transition:transform .5s ease-out;
}
.lp-tile{
  position:absolute;width:112px;height:140px;border-radius:18px;
  background:linear-gradient(155deg,#FFFDF8,#F3EADA 72%,#EADFC8);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(168,122,36,.12) inset,
    0 10px 16px -10px rgba(20,24,30,.30),
    0 30px 48px -22px rgba(20,24,30,.45);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:10px 8px 16px;                 /* 底部留白：给「厚度」那一层让位，拼音才不被压 */
  transform-style:preserve-3d;
  animation:lp-float 7s ease-in-out infinite;
}
.lp-tile::before{   /* 卡片厚度：底部一层暗边，视觉上是一叠纸 */
  content:"";position:absolute;left:7px;right:7px;bottom:-6px;height:12px;border-radius:0 0 16px 16px;
  background:linear-gradient(180deg,#E0D3B8,#C6B596);
  transform:translateZ(-3px);z-index:-1;filter:blur(.3px);opacity:.9;
}
.lp-tile::after{    /* 卡面高光扫过 */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.35) 100%);
  opacity:.75;
}
.lp-tile .t-ch{
  font-family:"Songti SC",serif;font-size:44px;line-height:1;color:var(--lp-ink-deep);
  text-shadow:0 1px 0 #fff, 0 10px 18px rgba(20,24,30,.16);
}
.lp-tile .t-lb{font-size:11px;letter-spacing:.16em;color:#8B7B5E}
.lp-tile .t-py{font-size:10.5px;color:#A79878;letter-spacing:.04em}

/* 四张卡在 3D 空间里的位置（translateZ 造前后层次） */
/* 四张卡摆成 2×2，靠 rotateZ 和 translateZ 造前后层次。
   以前是「随手撒开」，实测在大屏上会互相压住字和标签 —— 宁可规整，也不要糊。 */
.lp-tile.a{left:0;top:9%;transform:translateZ(46px) rotateZ(-4deg);animation-delay:0s}
.lp-tile.b{left:52%;top:3%;transform:translateZ(92px) rotateZ(3deg);animation-delay:.9s}
.lp-tile.c{left:5%;top:55%;transform:translateZ(24px) rotateZ(4deg);animation-delay:1.8s}
.lp-tile.d{left:55%;top:50%;transform:translateZ(118px) rotateZ(-2deg);animation-delay:2.6s}
.lp-tile.c .t-ch{color:var(--lp-red-deep)}
.lp-tile.b .t-ch{color:var(--jade)}
.lp-tile.d .t-ch{color:var(--blue)}
@keyframes lp-float{
  0%,100%{translate:0 0}
  50%{translate:0 -11px}
}
/* 舞台底部的光斑与轨道 */
.lp-stage::before{
  content:"";position:absolute;left:12%;right:6%;bottom:6%;height:56px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(20,24,30,.16),transparent 70%);
  filter:blur(9px);transform:rotateX(72deg);
}
.lp-orbit{
  position:absolute;left:50%;top:50%;width:250px;height:250px;margin:-125px 0 0 -125px;
  border:1px dashed rgba(168,122,36,.28);border-radius:50%;
  transform:rotateX(72deg) rotateZ(0deg);animation:lp-orbit-spin 26s linear infinite;
  transform-style:preserve-3d;
}
.lp-orbit i{
  position:absolute;width:7px;height:7px;border-radius:50%;background:var(--gold);
  top:-3px;left:50%;box-shadow:0 0 10px rgba(168,122,36,.7);
}
@keyframes lp-orbit-spin{to{transform:rotateX(72deg) rotateZ(360deg)}}

/* ================= 痛点区 ================= */
.lp-sec{margin-top:52px}
.lp-sec-head{margin-bottom:20px}
.lp-eyebrow{
  font-size:11.5px;letter-spacing:.2em;color:var(--gold);font-weight:600;margin-bottom:8px;
  display:flex;align-items:center;gap:8px;
}
.lp-eyebrow::before{content:"";width:18px;height:1px;background:var(--gold);opacity:.6}
.lp-h2{
  font-family:"Songti SC",serif;font-size:clamp(23px,5.4vw,31px);font-weight:600;line-height:1.35;
  margin:0 0 8px;color:var(--lp-ink-deep);letter-spacing:.01em;
}
.lp-h2 em{font-style:normal;color:var(--red);border-bottom:2px solid rgba(178,58,50,.28);padding-bottom:1px}
.lp-lead{margin:0;color:#5C6472;font-size:14.5px;line-height:1.8;max-width:36em}

.lp-pains{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}
.lp-pain{
  position:relative;padding:18px 16px 16px;border-radius:16px;
  background:linear-gradient(170deg,rgba(255,255,255,.94),rgba(252,248,240,.9));
  border:1px solid rgba(20,24,30,.07);box-shadow:var(--lp-shadow-1);
  transform-style:preserve-3d;transition:transform .3s cubic-bezier(.2,.8,.3,1),box-shadow .3s;
}
.lp-pain:hover{box-shadow:var(--lp-shadow-2)}
.lp-pain .p-ic{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  font-family:"Songti SC",serif;font-size:16px;margin-bottom:10px;
  background:linear-gradient(160deg,#FBEDE9,#F5DFD8);color:var(--lp-red-deep);
  box-shadow:0 1px 0 #fff inset,0 4px 10px -4px rgba(178,58,50,.4);
}
.lp-pain h3{margin:0 0 6px;font-size:15.5px;font-family:"Songti SC",serif;font-weight:600;color:var(--lp-ink-deep)}
.lp-pain .p-quote{margin:0 0 9px;font-size:13.5px;color:#6B7280;line-height:1.7;font-style:italic}
.lp-pain .p-fix{font-size:13px;color:#2E6B5C;line-height:1.7;padding-top:9px;border-top:1px dashed rgba(46,107,92,.22)}
.lp-pain .p-fix b{color:#20564A}

/* ================= 数据墙 ================= */
.lp-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2px;margin-top:22px;
  border-radius:18px;overflow:hidden;background:rgba(20,24,30,.06);
  box-shadow:var(--lp-shadow-2);
}
.lp-stat{
  background:linear-gradient(180deg,#FFFDF8,#F7F1E5);padding:18px 10px;text-align:center;
  position:relative;
}
.lp-stat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.8),transparent 40%);pointer-events:none}
.lp-stat b{
  display:block;transition:transform .5s cubic-bezier(.2,.8,.3,1),opacity .5s;font-family:"Songti SC",serif;font-size:clamp(22px,4.6vw,30px);line-height:1.1;
  color:var(--lp-ink-deep);font-weight:600;letter-spacing:-.01em;
}
.lp-stat span{display:block;font-size:11.5px;color:#8A8172;margin-top:5px;letter-spacing:.02em}
.lp-stat:nth-child(1) b{color:var(--red)}
.lp-stat:nth-child(2) b{color:var(--lp-red-deep)}
.lp-stat:nth-child(3) b{color:var(--jade)}
.lp-stat:nth-child(4) b{color:var(--blue)}

/* ================= 3D 翻转内容卡 ================= */
.lp-flips{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px;perspective:var(--lp-persp)}
.lp-flip{height:186px;position:relative;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.3,.9,.3,1);cursor:pointer}
.lp-flip:hover,.lp-flip.on{transform:rotateY(180deg)}
.lp-face{
  position:absolute;inset:0;border-radius:16px;padding:16px;backface-visibility:hidden;
  -webkit-backface-visibility:hidden;display:flex;flex-direction:column;
  border:1px solid rgba(20,24,30,.07);box-shadow:var(--lp-shadow-1);overflow:hidden;
}
.lp-face.front{background:linear-gradient(165deg,#FFFFFF,#FAF5EA);justify-content:center}
.lp-face.front .fl-glyph{margin-bottom:2px}
.lp-face.front .fl-note{margin-top:12px}
.lp-face.back{
  transform:rotateY(180deg);
  background:linear-gradient(165deg,#FFFDF6,#F6EAD4 78%,#F0E1C4);
  border-color:rgba(168,122,36,.2);
}
.lp-face .fl-glyph{
  font-family:"Songti SC",serif;font-size:38px;line-height:1;color:var(--lp-ink-deep);
  text-shadow:0 1px 0 #fff,0 8px 16px rgba(20,24,30,.12);
}
.lp-face .fl-name{margin-top:8px;font-size:15px;font-family:"Songti SC",serif;font-weight:600}
.lp-face .fl-prev{margin-top:10px;font-size:12px;line-height:1.7;color:#6F7683}
.lp-face .fl-note{margin-top:auto;font-size:11.5px;color:#A39A88;padding-top:10px;border-top:1px dashed rgba(20,24,30,.08)}
.lp-face .fl-tag{
  position:absolute;top:12px;right:12px;font-size:10.5px;letter-spacing:.1em;
  color:var(--gold);border:1px solid rgba(168,122,36,.3);background:rgba(248,239,220,.8);
  padding:2px 7px;border-radius:999px;
}
.lp-face.back .fl-h{font-size:13px;font-weight:600;color:#7A5418;margin-bottom:7px;letter-spacing:.04em}
.lp-face.back ul{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.lp-face.back li{font-size:12.5px;color:#5A4B31;line-height:1.6;padding-left:13px;position:relative}
.lp-face.back li::before{content:"·";position:absolute;left:2px;top:-1px;color:var(--gold);font-weight:700}
.lp-flip-hint{margin-top:10px;font-size:11.5px;color:#98A0AC;text-align:center}

/* ================= 对比表 ================= */
.lp-cmp{margin-top:22px;border-radius:18px;overflow:hidden;box-shadow:var(--lp-shadow-2);background:#fff;border:1px solid rgba(20,24,30,.07)}
.lp-cmp table{width:100%;border-collapse:collapse;font-size:13px}
.lp-cmp th,.lp-cmp td{padding:12px 10px;text-align:center;border-bottom:1px solid rgba(20,24,30,.06)}
.lp-cmp thead th{background:linear-gradient(180deg,#FBF7EE,#F4EDDF);font-family:"Songti SC",serif;font-weight:600;font-size:13px;color:#5A5142}
.lp-cmp thead th.us{background:linear-gradient(180deg,#B23A32,#96291F);color:#FFF3E6;position:relative}
.lp-cmp td:first-child{text-align:left;color:#4A5260;font-size:12.5px;line-height:1.6}
.lp-cmp tbody tr:nth-child(even) td{background:#FCFAF5}
.lp-cmp td.us{background:#FDF4F1!important;color:var(--lp-red-deep);font-weight:600}
.lp-cmp tbody tr:last-child td{border-bottom:0}
.lp-cmp .no{color:#9AA1AC}
.lp-cmp .yes{color:#2E6B5C;font-weight:600}

/* ================= 大幅广告位 ================= */
.lp-ad{
  position:relative;margin-top:44px;border-radius:22px;overflow:hidden;
  padding:30px 24px;color:#FFF6EA;text-align:center;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,214,150,.22), transparent 45%),
    radial-gradient(circle at 84% 78%, rgba(178,58,50,.5), transparent 52%),
    linear-gradient(150deg,#2A1A16,#43201A 42%,#6E241C 78%,#33130F);
  box-shadow:0 30px 60px -28px rgba(42,26,22,.75), 0 1px 0 rgba(255,255,255,.12) inset;
  transform-style:preserve-3d;
}
.lp-ad::before{  /* 金色描边 */
  content:"";position:absolute;inset:8px;border:1px solid rgba(228,192,120,.32);border-radius:16px;pointer-events:none;
}
.lp-ad::after{   /* 斜向光带 */
  content:"";position:absolute;top:-40%;left:-30%;width:60%;height:180%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  transform:rotate(18deg);animation:lp-shine 6.5s ease-in-out infinite;pointer-events:none;
}
@keyframes lp-shine{0%,55%{left:-40%}100%{left:110%}}
.lp-ad .ad-kicker{font-size:11.5px;letter-spacing:.24em;color:var(--lp-gold-light);margin-bottom:12px}
.lp-ad h2{
  font-family:"Songti SC",serif;font-size:clamp(24px,5.8vw,34px);line-height:1.32;margin:0 0 10px;
  font-weight:600;text-shadow:0 2px 0 rgba(0,0,0,.25),0 16px 34px rgba(0,0,0,.4);
}
.lp-ad h2 u{text-decoration:none;color:#FFD79A;border-bottom:2px solid rgba(255,215,154,.4)}
.lp-ad p{margin:0 auto;max-width:27em;font-size:13.5px;color:rgba(255,246,234,.82);line-height:1.8}
.lp-ad .ad-price{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:18px 0 6px}
.lp-ad .ad-price b{font-family:"Songti SC",serif;font-size:44px;line-height:1;color:#FFE9C4;text-shadow:0 6px 18px rgba(0,0,0,.4)}
.lp-ad .ad-price s{color:rgba(255,246,234,.5);font-size:16px}
.lp-ad .ad-price small{font-size:13px;color:rgba(255,246,234,.7)}
.lp-ad .ad-note{font-size:11.5px;color:rgba(255,246,234,.6);margin-top:10px}
.lp-ad .lp-btn-main{margin-top:16px;background:linear-gradient(160deg,#F3D49B,#D9AE63 60%,#BE8F45);color:#3B2410;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 26px -10px rgba(0,0,0,.6),0 2px 0 #8B6526}
.lp-ad .lp-btn-main:hover{transform:translateY(-2px) scale(1.01)}

/* ================= 价格卡（3D 悬浮） ================= */
.lp-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px;perspective:900px}
.lp-plan{
  position:relative;border-radius:18px;padding:20px 14px 18px;text-align:center;
  background:linear-gradient(175deg,#FFFFFF,#FBF6EC);
  border:1px solid rgba(20,24,30,.08);box-shadow:var(--lp-shadow-1);
  transform-style:preserve-3d;transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s;
}
.lp-plan:hover{transform:translateY(-6px) rotateX(4deg);box-shadow:var(--lp-shadow-3)}
.lp-plan.best{
  background:linear-gradient(175deg,#FFFCF4,#F8EED8);
  border-color:rgba(168,122,36,.32);
  box-shadow:0 2px 0 rgba(168,122,36,.18),0 22px 40px -18px rgba(168,122,36,.5);
  transform:translateY(-4px) scale(1.02);
}
.lp-plan.best::before{
  content:"";position:absolute;inset:-1px;border-radius:19px;pointer-events:none;
  background:linear-gradient(150deg,rgba(228,192,120,.9),rgba(228,192,120,0) 40%,rgba(178,58,50,.35));
  -webkit-mask:linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;
}
.lp-plan .pl-name{font-family:"Songti SC",serif;font-size:14px;color:#6B6152;letter-spacing:.06em}
.lp-plan .pl-price{font-family:"Songti SC",serif;font-size:34px;line-height:1.1;margin:8px 0 2px;color:var(--lp-ink-deep)}
.lp-plan .pl-price small{font-size:13px;color:#8A8172;font-weight:400}
.lp-plan .pl-eq{font-size:11.5px;color:#A87A24;min-height:2.6em;line-height:1.5;margin-top:6px}
.lp-plan .pl-badge{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  font-size:10.5px;padding:3px 9px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(180deg,#C0433A,#96291F);color:#FFF3E6;
  box-shadow:0 6px 14px -6px rgba(142,43,36,.7);
}
.lp-plan .pl-cta{margin-top:12px;width:100%;font-size:13px;padding:10px}

/* ================= FAQ ================= */
.lp-faq{margin-top:20px;display:flex;flex-direction:column;gap:8px}
.lp-faq details{
  border-radius:13px;background:rgba(255,255,255,.86);border:1px solid rgba(20,24,30,.07);
  box-shadow:var(--lp-shadow-1);overflow:hidden;
}
.lp-faq summary{
  cursor:pointer;padding:14px 16px;font-size:14px;font-weight:600;color:var(--lp-ink-deep);
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{
  content:"＋";font-weight:400;color:var(--red);transition:transform .2s;font-size:15px;
}
.lp-faq details[open] summary::after{transform:rotate(45deg)}
.lp-faq .fa-body{padding:0 16px 15px;font-size:13.5px;color:#5C6472;line-height:1.85}
.lp-faq .fa-body b{color:#2E6B5C}

/* ================= 吸底转化条 ================= */
.lp-sticky{
  position:fixed;left:0;right:0;z-index:60;
  bottom:calc(58px + env(safe-area-inset-bottom));   /* 让开固定底栏，不盖住导航 */
  transform:translateY(140%);opacity:0;visibility:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.3,1),opacity .3s,visibility .3s;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(20,24,30,.0),rgba(20,24,30,.08) 30%,rgba(20,24,30,.16));
  pointer-events:none;
}
.lp-sticky.on{transform:translateY(0);opacity:1;visibility:visible}
.lp-sticky-in{
  pointer-events:auto;max-width:732px;margin:0 auto;display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:16px;
  background:rgba(28,22,20,.92);backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(228,192,120,.28);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.6);
  color:#FFF3E4;
}
.lp-sticky-txt{flex:1;min-width:0}
.lp-sticky-txt b{display:block;font-family:"Songti SC",serif;font-size:14.5px;color:#FFE6BE;letter-spacing:.02em}
.lp-sticky-txt span{font-size:11.5px;color:rgba(255,243,228,.66);display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-sticky-txt .n{display:inline;font-size:inherit;color:#FFE6BE;font-weight:600;margin:0}
.lp-sticky .lp-btn-main{padding:10px 16px;font-size:13.5px;flex:0 0 auto}
.lp-sticky-x{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  color:rgba(255,243,228,.5);font-size:14px;cursor:pointer;background:transparent;border:0;
}
.lp-sticky-x:hover{color:#fff}

/* ================= 滚动进场（与 decor.js 的 .reveal 共存，用独立类名） ================= */
/* 默认可见：只有 JS 确认能做动画时，才给 <html> 加 .lp-anim 把它们藏起来。
   宁可没有动效，也不能让卖点因为脚本没跑而整段消失。 */
.lp-rv{opacity:1}
html.lp-anim .lp-rv{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.8,.3,1),transform .6s cubic-bezier(.2,.8,.3,1)}
html.lp-anim .lp-rv.in{opacity:1;transform:none}
.lp-rv.d1{transition-delay:.06s}
.lp-rv.d2{transition-delay:.12s}
.lp-rv.d3{transition-delay:.18s}

/* 标题两侧的印章式装饰 */
.lp-seal{
  display:inline-grid;place-items:center;width:30px;height:30px;border-radius:7px;
  background:linear-gradient(160deg,#C0433A,#8E2B24);color:#FFEFE2;
  font-family:"Songti SC",serif;font-size:15px;line-height:1;
  box-shadow:0 4px 10px -4px rgba(142,43,36,.6),0 1px 0 rgba(255,255,255,.3) inset;
  transform:rotate(-4deg);
}

/* ================= 响应式 ================= */
@media (max-width:720px){
  .lp-hero-grid{grid-template-columns:1fr;gap:6px}
  .lp-stage{height:250px;margin-top:38px}
  .lp-tile{width:96px;height:124px}
  .lp-tile .t-ch{font-size:36px}
  .lp-tile.a{left:0;top:8%}
  .lp-tile.b{left:52%;top:2%}
  .lp-tile.c{left:5%;top:54%}
  .lp-tile.d{left:55%;top:49%}
  .lp-orbit{width:200px;height:200px;margin:-100px 0 0 -100px}
  .lp-pains{grid-template-columns:1fr}
  .lp-stats{grid-template-columns:repeat(2,1fr)}
  /* 翻转卡手机上仍然两列：单列会让「四张卡」占掉 740px，
     而这两列本来就是它设计出来的样子（同一行两张，高度 186px 够放三行字）。
     代价是把内边距和字号收一点，保证 170px 里不溢出。 */
  .lp-flips{grid-template-columns:repeat(2,1fr);gap:9px}
  .lp-flip{height:170px}
  .lp-face{padding:12px;border-radius:14px}
  .lp-face .fl-glyph{font-size:32px}
  .lp-face .fl-name{font-size:14px;margin-top:5px}
  .lp-face .fl-prev{font-size:11.5px;line-height:1.6;margin-top:8px}
  .lp-face .fl-note{font-size:11px;margin-top:9px;padding-top:8px}
  .lp-face .fl-tag{top:9px;right:9px;font-size:10px;padding:2px 6px}
  .lp-face.back .fl-h{font-size:12.5px;margin-bottom:6px}
  .lp-face.back li{font-size:11.5px;line-height:1.55}
  .lp-plans{grid-template-columns:1fr}
  /* 价格卡手机上三张竖着排，原来 777px。压掉无效留白（每张卡上下各 20px 内边距
     + 2.6em 的等宽占位），三张能省 100px 左右，读起来也更连贯。 */
  .lp-plan{padding:14px 14px 13px}
  .lp-plan .pl-price{font-size:30px;margin:5px 0 0}
  .lp-plan .pl-eq{min-height:0;margin-top:3px}
  .lp-plan .pl-cta{margin-top:9px;padding:9px}
  .lp-sec{margin-top:44px}
  .lp-plan.best{transform:none}
  .lp-plan.best:hover{transform:translateY(-4px)}
  .lp-cmp{overflow:visible}
  .lp-cmp table{min-width:0;font-size:11.5px}
  .lp-cmp th,.lp-cmp td{padding:9px 6px;line-height:1.5}
  .lp-cmp td:first-child{font-size:11.5px;width:23%}
  .lp-cmp thead th{font-size:11.5px}
}
@media (min-width:900px){
  .lp-sticky{bottom:0}        /* 大屏 tabbar 已隐藏，吸底条贴底 */
}

@media (prefers-reduced-motion:reduce){
  .lp-promo-track,.lp-tile,.lp-orbit,.lp-ad::after,.lp-kicker .dotpulse{animation:none!important}
  .lp-rv{opacity:1;transform:none;transition:none}
  .lp-flip{transition:none}
  .lp-sticky{transition:none}
}

/* ============================================================
   内页 3D 层（年级页 / 知识卡 / 闯关页）
   原则：只在指针设备上加浮起与按压，触屏只保留「按下去有反馈」，
        避免手机上每滑一下就触发重绘。
   ============================================================ */

/* 年级卡：像一块可以按下去的立体牌 */
.gcard{
  box-shadow:0 1px 0 #fff inset, 0 1px 2px rgba(20,24,30,.04), 0 4px 0 -2px rgba(20,24,30,.05);
  will-change:transform;
}
.gcard:active{transform:translateY(1px) scale(.992)}
.gcard.live{
  box-shadow:0 1px 0 #fff inset, 0 1px 2px rgba(20,24,30,.05), 0 6px 0 -3px rgba(178,58,50,.14), 0 12px 24px -14px rgba(20,24,30,.25);
}
.gcard .num{
  text-shadow:0 1px 0 #fff, 0 4px 10px rgba(20,24,30,.10);
}
.gcard.live .num{text-shadow:0 1px 0 #fff, 0 6px 14px rgba(178,58,50,.18)}

/* 知识块：一叠纸浮起来的层次 */
@media (hover:hover){
  .kblock{transition:transform .28s cubic-bezier(.2,.8,.3,1),box-shadow .28s;transform-style:preserve-3d}
  .kblock:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(20,24,30,.04),0 16px 32px -18px rgba(20,24,30,.22)}
}

/* 选项：按下去有厚度，答对时轻微弹一下 —— 手感比动画重要 */
.opt{
  box-shadow:0 1px 0 #fff inset, 0 2px 0 -1px rgba(20,24,30,.07);
  transition:transform .12s ease, box-shadow .12s ease, border-color .14s, background .14s;
}
.opt:active{transform:translateY(1px);box-shadow:0 1px 0 #fff inset}
.opt.correct{box-shadow:0 1px 0 #fff inset,0 2px 0 -1px rgba(46,107,92,.3);animation:yw-pop .32s cubic-bezier(.2,1.4,.4,1)}
.opt.wrong{box-shadow:0 2px 0 -1px rgba(178,58,50,.28)}
@keyframes yw-pop{0%{transform:scale(1)}45%{transform:scale(1.015)}100%{transform:scale(1)}}

/* 卡片页的生字块：字浮在格子上方 */
.item-glyph{
  box-shadow:0 1px 0 #fff inset, 0 2px 6px -2px rgba(20,24,30,.12);
}
.item:hover .item-glyph{
  transform:translateY(-1px);
  box-shadow:0 1px 0 #fff inset, 0 8px 16px -8px rgba(20,24,30,.28);
}
.item-glyph{transition:transform .22s cubic-bezier(.2,.8,.3,1),box-shadow .22s}

/* 手风琴打开时抬一层，视觉上「拿起来看」 */
.acc.open{box-shadow:0 2px 0 -1px rgba(20,24,30,.06), 0 18px 34px -22px rgba(20,24,30,.3)}

/* 闯关成绩：数字做金属立体感 */
.score-hero .big,.score-hero .num{
  text-shadow:0 1px 0 #fff, 0 3px 0 rgba(178,58,50,.12), 0 14px 26px rgba(20,24,30,.16);
}

@media (prefers-reduced-motion:reduce){
  .gcard,.kblock,.item-glyph,.opt{transition:none!important;animation:none!important}
  .opt.correct{animation:none}
}

/* ============================================================
   会员页（收钱的那一页）：把价格卡做出「摸得到」的厚度
   沿用 style.css 的 .plans/.plan 结构，只加层次，不改布局
   ============================================================ */
body[data-page="member"] .plan{
  transform-style:preserve-3d;
  transition:transform .26s cubic-bezier(.2,.8,.3,1),box-shadow .26s,border-color .18s;
  box-shadow:0 1px 0 #fff inset, 0 2px 0 -1px rgba(20,24,30,.06), 0 10px 22px -16px rgba(20,24,30,.3);
  cursor:pointer;
}
body[data-page="member"] .plan.best{
  box-shadow:0 1px 0 #fff inset, 0 2px 0 -1px rgba(168,122,36,.24), 0 16px 30px -18px rgba(168,122,36,.55);
}
@media (hover:hover){
  body[data-page="member"] .plan:hover{transform:translateY(-4px) rotateX(4deg)}
}
body[data-page="member"] .plan:active{transform:translateY(0) scale(.994)}
body[data-page="member"] .plan .per-day{
  font-size:10.5px;color:var(--gold);margin-top:3px;letter-spacing:.02em;
}

/* 收款区：像一张收据，垫在一层纸上 */
body[data-page="member"] .qr-box{
  box-shadow:0 1px 0 #fff inset, 0 2px 6px -2px rgba(20,24,30,.10), 0 18px 34px -24px rgba(20,24,30,.35);
  position:relative;
}
body[data-page="member"] .qr-box::before{
  content:"";position:absolute;inset:7px;border-radius:12px;border:1px solid rgba(216,199,166,.55);pointer-events:none;
}

/* 「值不值」三行对比：免费 / 会员 的区别一眼看清 */
.lp-vs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 4px}
.lp-vs-col{border-radius:14px;padding:14px 12px;border:1px solid rgba(20,24,30,.07);background:#fff;box-shadow:var(--lp-shadow-1)}
.lp-vs-col.paid{background:linear-gradient(170deg,#FFFCF3,#F8EEDA);border-color:rgba(168,122,36,.28)}
.lp-vs-col h4{margin:0 0 8px;font-family:"Songti SC",serif;font-size:13.5px;color:#6B6152;font-weight:600}
.lp-vs-col.paid h4{color:var(--gold)}
.lp-vs-col ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.lp-vs-col li{font-size:12.5px;line-height:1.6;color:#4A5260;padding-left:14px;position:relative}
.lp-vs-col li::before{content:"·";position:absolute;left:2px;color:#B9B0A0;font-weight:700}
.lp-vs-col.paid li::before{content:"✦";font-size:9px;top:2px;color:var(--gold)}
@media (max-width:420px){
  .lp-vs{grid-template-columns:1fr}
}

/* ============================================================
   首页（落地页）在桌面端要「单栏往下讲」，不要侧栏
   style.css 从 ≥1000px 起把 .wrap 变成 1fr+360px 的两栏（原本用于
   列表页配一个侧栏）。落地页的每个版块都要通栏，塞进窄栏会糊成一团。
   ============================================================ */
@media (min-width:1000px){
  body[data-page="home"] .wrap{display:block;max-width:900px}
  body[data-page="home"] .lp-hero{padding-top:52px}
  body[data-page="home"] .lp-hero-grid{gap:28px}
  body[data-page="home"] .lp-stage{height:360px}
  body[data-page="home"] .lp-tile{width:120px;height:156px}
  /* 桌面舞台更大，2×2 拉开一点，四张卡互不遮挡 */
  .lp-tile.a{left:0;top:8%}
  .lp-tile.b{left:51%;top:2%}
  .lp-tile.c{left:4%;top:54%}
  .lp-tile.d{left:54%;top:48%}
}
@media (min-width:1400px){
  body[data-page="home"] .wrap{max-width:960px}
}

/* ---------- 家长周报：这一周学了什么 ----------
 * 目的只有一个：让家长不用问孩子就知道学了几天、学了什么。
 * 条形图纯 CSS，不引图表库——首屏多 30KB JS 换一张七根柱子的图不值。
 */
.wk-chart{
  display:flex;align-items:flex-end;gap:4px;
  height:98px;margin:16px 0 4px;padding:0 2px;
  border-bottom:1px solid #E7E0D2;
}
.wk-d{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
.wk-bar{
  width:100%;max-width:26px;border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg,#C4503F,#B23A32);
  box-shadow:0 2px 6px rgba(178,58,50,.18);
  transform-origin:bottom;
  animation:wkGrow .5s cubic-bezier(.2,.7,.3,1) both;
}
.wk-bar.is-zero{background:#E7E0D2;box-shadow:none}
@keyframes wkGrow{from{transform:scaleY(.2);opacity:.4}to{transform:scaleY(1);opacity:1}}
.wk-lab{font-size:9px;color:#A8AFB9;margin-top:5px;white-space:nowrap;height:12px;line-height:12px}

.wk-split{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
.wk-split span{font-size:12px;color:#7C8797}
.wk-split b{font-family:var(--serif,Georgia,serif);font-size:16px;color:#2E3440;margin-left:2px}

.wk-vip{
  margin-top:14px;padding:10px 12px;border-radius:10px;
  background:#FBF3E9;border:1px dashed #E4C79E;
  font-size:12px;color:#8A6A3C;line-height:1.6;
}
.wk-vip a{color:#B23A32;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(178,58,50,.35)}

@media (max-width:420px){
  .wk-chart{height:82px;gap:3px}
  .wk-split{gap:10px}
}

/* 减少动态偏好：条形图直接到位，不做生长动画 */
@media (prefers-reduced-motion:reduce){
  .wk-bar{animation:none}
}

/* ============================================================
   2026-10-25 第五轮：把「真实差距」做成能看的东西
   ------------------------------------------------------------
   四条设计的共同前提：**数字必须是真的**。
   自查的 6 个词来自三到六年级真实词语卡（点得开、有拼音、有音频）；
   差距条的分子是本地学习记录，分母是年级清单里的生字总数；
   课文缺口把「这一课还剩几个字」算出来，并且能真的跳到那一课。
   一处造假，四个模块就一起变成话术。
   ============================================================ */

/* ---------- ① 首屏自查：6 个词，先自己读一遍 ---------- */
.sc-wrap{
  position:relative;margin-top:22px;border-radius:20px;overflow:hidden;
  background:linear-gradient(168deg,#FFFFFF,#FBF6EB 62%,#F6EEDD);
  border:1px solid rgba(20,24,30,.07);box-shadow:var(--lp-shadow-2);
}
.sc-wrap::before{      /* 顶部一条细金线，和广告位呼应但不抢 */
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(168,122,36,.55),transparent);
}
.sc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:16px 16px 0}
.sc-head b{font-family:"Songti SC",serif;font-size:15px;color:var(--lp-ink-deep);font-weight:600}
.sc-head span{font-size:11.5px;color:#98A0AC}
/* 默认单列：手机上点开拼音后一行要放下「词 + 年级 + 拼音 + 读错了」，
   两列在 390px 屏里必然挤出容器（保守起见 600px 以下都单列）。 */
.sc-grid{list-style:none;margin:12px 0 0;padding:0 8px 4px;display:grid;grid-template-columns:1fr;gap:6px}
@media (min-width:600px){
  .sc-grid{grid-template-columns:repeat(2,1fr)}
}
.sc-i{
  position:relative;display:flex;align-items:center;gap:8px;padding:10px 10px;
  border-radius:12px;background:rgba(255,255,255,.78);
  border:1px solid rgba(20,24,30,.06);transition:background .2s,border-color .2s,transform .2s;
}
.sc-i.py-on{background:#FFFDF6;border-color:rgba(168,122,36,.26)}
.sc-i.bad{background:#FDF3F0;border-color:rgba(178,58,50,.3)}
.sc-main{
  flex:1;min-width:0;display:flex;align-items:center;gap:9px;
  background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;
}
.sc-w{
  font-family:"Songti SC",serif;font-size:19px;line-height:1.1;color:var(--lp-ink-deep);
  letter-spacing:.04em;white-space:nowrap;
}
.sc-g{font-size:10.5px;color:#B4A992;white-space:nowrap;padding-top:3px}
.sc-py{
  font-size:12.5px;color:#8E6A1E;letter-spacing:.02em;white-space:nowrap;margin-left:auto;
  opacity:0;transform:translateX(-4px);transition:opacity .22s,transform .22s;
}
.sc-i.py-on .sc-py{opacity:1;transform:none}
.sc-hint{
  font-size:10.5px;color:#A8996F;margin-left:auto;white-space:nowrap;
  border:1px solid rgba(168,122,36,.28);background:rgba(248,239,220,.7);
  border-radius:99px;padding:3px 8px;line-height:1;
}
.sc-i.py-on .sc-hint{display:none}
.sc-mark{
  flex:0 0 auto;border:1px solid rgba(178,58,50,.28);background:#fff;color:#B23A32;
  font-size:11px;line-height:1;padding:6px 8px;border-radius:8px;cursor:pointer;
  display:none;white-space:nowrap;
}
.sc-i.py-on .sc-mark{display:inline-block}
.sc-i.bad .sc-mark{background:#B23A32;color:#FFF3E6;border-color:#B23A32}
.sc-foot{padding:10px 16px 16px;border-top:1px dashed rgba(20,24,30,.08);margin-top:10px}
.sc-out{font-size:13px;line-height:1.75;color:#4A5260;min-height:2.6em}
.sc-out b{color:var(--lp-red-deep);font-family:"Songti SC",serif;font-size:16px;padding:0 2px}
.sc-out .ok{color:#2E6B5C}
.sc-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sc-act .lp-btn{font-size:13px;padding:10px 14px}
.sc-src{font-size:11px;color:#A8AFB9;margin-top:8px;line-height:1.6}

/* ---------- ② 差距条：一根有厚度的条，比一句「你落后了」有力 ---------- */
.gp{margin-top:16px}
.gp-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.gp-t{font-size:12px;color:#7C8797}
.gp-t b{color:#2E3440;font-size:13px}
.gp-sel{
  border:1px solid rgba(20,24,30,.12);background:#fff;border-radius:8px;
  font-size:12px;padding:4px 6px;color:#4A5260;cursor:pointer;
}
.gp-3d{perspective:520px;perspective-origin:50% 100%;margin:2px 0 10px}
.gp-track{
  position:relative;height:26px;border-radius:8px;overflow:hidden;
  /* 没走到的那一段用**斜纹**表示「还没做」，不是留白。
     进度只有 0.7% 时（756 个字学了 5 个），纯留白会看起来像"条坏了"，
     斜纹至少明确表示：这是一大片没动过的空地，而且确实很大。 */
  background:
    repeating-linear-gradient(135deg,rgba(20,24,30,.05) 0 3px,transparent 3px 8px),
    linear-gradient(180deg,#EDE6D8,#F7F2E7 55%,#EFE8D9);
  box-shadow:0 1px 0 #FFF inset,0 -2px 4px rgba(20,24,30,.05) inset,0 6px 14px -8px rgba(20,24,30,.35);
  transform:rotateX(13deg);transform-origin:bottom center;
}
.gp-track::after{      /* 四等分刻度：只是给个尺度感，不做 10% 满格线（太碎，像表格） */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(20,24,30,.06) 0 1px,transparent 1px 25%);
}
.gp-fill{
  position:relative;display:block;height:100%;width:0;border-radius:8px 6px 6px 8px;
  background:linear-gradient(180deg,#D4604F,#B23A32 45%,#8E2B24);
  box-shadow:0 1px 0 rgba(255,255,255,.42) inset,0 -3px 6px rgba(0,0,0,.18) inset;
  transition:width .9s cubic-bezier(.2,.8,.25,1);
}
.gp-fill::after{       /* 高光扫过，只在有进度时出现 */
  content:"";position:absolute;left:0;right:0;top:1px;height:38%;
  background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.06));
  border-radius:7px 5px 0 0;
}
.gp-fill.none{background:linear-gradient(180deg,#E8DFCC,#DCD2BE);box-shadow:none}
.gp-num{display:flex;align-items:baseline;gap:6px;font-size:12px;color:#8A93A0}
.gp-num b{font-family:"Songti SC",serif;font-size:26px;line-height:1;color:var(--lp-ink-deep)}
.gp-num u{text-decoration:none;font-size:14px;color:#6B7280}
.gp-num span{margin-left:auto;font-size:12px;color:#A87A24}
.gp-foot{margin-top:9px;font-size:12.5px;color:#5C6472;line-height:1.7}
.gp-foot b{color:var(--lp-red-deep)}
.gp-flag{display:inline-block;font-size:10.5px;color:#8A6A3C;background:#FBF3E9;border:1px dashed #E4C79E;border-radius:99px;padding:2px 8px;margin-left:6px}

/* ---------- ③ 课文级缺口：具体到「第 6 课还剩 3 个字」 ---------- */
.lu-list{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.lu-row{
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;
  background:rgba(255,255,255,.9);border:1px solid rgba(20,24,30,.07);
  box-shadow:var(--lp-shadow-1);text-decoration:none;color:inherit;
  transition:transform .2s,box-shadow .2s,border-color .2s;
}
.lu-row:hover{transform:translateY(-2px);box-shadow:var(--lp-shadow-2);border-color:rgba(178,58,50,.22)}
.lu-main{flex:1;min-width:0}
.lu-t{
  font-size:13.5px;color:#2E3440;font-family:"Songti SC",serif;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lu-m{font-size:11.5px;color:#98A0AC;margin-top:3px}
.lu-m b{color:#B23A32;font-size:12.5px}
.lu-bar{
  height:5px;border-radius:99px;background:#F1EBDF;overflow:hidden;margin-top:7px;
}
.lu-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#D4604F,#B23A32)}
.lu-go{flex:0 0 auto;font-size:12px;color:#B23A32;font-weight:600;white-space:nowrap}
.lu-empty{font-size:12.5px;color:#7C8797;padding:14px 2px}

/* ---------- ④ 错题回看：只一张卡，翻面是复习入口 ---------- */
.wr-one{max-width:440px;margin-top:18px;perspective:var(--lp-persp)}
.wr-one .lp-flip{height:184px}
.wr-list{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.wr-list li{display:flex;align-items:baseline;gap:7px;font-size:13.5px;color:#2E3440}
.wr-list li em{font-style:normal;font-family:"Songti SC",serif;font-size:16px}
.wr-list li span{font-size:11px;color:#B4A992;margin-left:auto}
/* 链接要一眼看出是链接：金色虚线下划线 + 尾部箭头，不要靠颜色区分
   （色弱用户看不出 #8A5A18 和 #2E3440 的差别）。 */
.wr-back li a{
  color:#8A5A18;text-decoration:none;
  border-bottom:1px solid rgba(168,122,36,.45);
  font-family:"Songti SC",serif;font-size:15px;line-height:1.4;
}
.wr-back li a i{font-style:normal;color:#B23A32;margin-left:3px;font-size:13px}
.wr-back li a:hover{color:#B23A32;border-color:rgba(178,58,50,.55)}
.wr-tip{margin-top:auto;font-size:11px;color:#A39A88;padding-top:8px;border-top:1px dashed rgba(20,24,30,.08)}

@media (max-width:420px){
  .sc-w{font-size:18px}
  .gp-num b{font-size:23px}
  .wr-one .lp-flip{height:210px}
}

/* 减少动态：进度条不做生长，直接到位 */
@media (prefers-reduced-motion:reduce){
  .gp-fill{transition:none}
  .lu-row,.sc-i{transition:none}
}

/* ============================================================
   集群页脚（首页专用，2026-10-25）
   ------------------------------------------------------------
   原来的 footer 是三行灰字，只说了「语基强化」。但这是一套集群站的
   第一个站，页脚是唯一适合把「学霸星球是谁、还有哪几个站」讲清楚的地方：
   顶栏太小（56px），首屏太贵（每一屏都在卖语文）。
   ============================================================ */
.site-foot{margin-top:46px;padding:26px 0 6px;border-top:1px solid var(--line)}
/* 2026-10-25：页脚改成「二维码 | 品牌 + 分站矩阵」两栏。
   二维码放页脚不放顶栏/首屏：顶栏 56px 放不下，首屏每一屏都在卖语文。 */
.sf-top{display:flex;gap:24px;align-items:flex-start}
.sf-right{flex:1;min-width:0}
.sf-brand{display:flex;align-items:center;gap:12px}
.sf-brand .logo-mark{width:34px;height:34px}
.sf-brand .logo-mark::before{width:50px;height:18px}
.sf-name{font-family:"Songti SC","Noto Serif SC",serif;font-size:15.5px;letter-spacing:.1em;color:var(--lp-ink-deep,#20242B)}
.sf-tag{font-size:10.5px;color:#A39A88;margin-top:4px;letter-spacing:.04em}
.sf-sites{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}
.sf-site{
  display:flex;flex-direction:column;gap:4px;padding:11px 12px;border-radius:12px;min-width:0;
  background:rgba(255,255,255,.7);border:1px solid var(--line2,#F2EDE3);
  transition:border-color .2s,transform .2s,background .2s;
}
.sf-site b{
  font-family:"Songti SC","Noto Serif SC",serif;font-weight:400;font-size:13px;
  color:#7C8797;letter-spacing:.04em;white-space:nowrap;
}
.sf-site span{font-size:10px;color:#B7BEC8;letter-spacing:.03em;white-space:nowrap}
.sf-site.on{background:#FDF4F1;border-color:rgba(178,58,50,.22)}
.sf-site.on b{color:var(--red)}
.sf-site.on span{color:#B9786F}
a.sf-site:hover{border-color:rgba(178,58,50,.32);background:#FEFAF8;transform:translateY(-1px)}
.sf-note{margin-top:18px;font-size:11.5px;line-height:1.9;color:#A39A88}
.sf-note a{color:#7C8797;text-decoration:none;border-bottom:1px solid rgba(20,24,30,.1)}
.sf-note a:hover{color:var(--red);border-color:rgba(178,58,50,.35)}

@media (max-width:560px){
  /* 四列在 390px 上每列只有 80px，「语基强化」四个字会被压成两行。
     拆成两列，卡片宽一半，字不换行。 */
  .sf-sites{grid-template-columns:repeat(2,1fr)}
  .site-foot{margin-top:34px;padding-top:22px}
  .sf-top{flex-direction:column;gap:16px}
}
@media (prefers-reduced-motion:reduce){
  a.sf-site:hover{transform:none}
}