/* 招商落地页（P1）＋ 开通 / 付款页（P3）—— 商用化 12 号「公开页」样式
 *
 * ★ 与 `css/app.css` 同一个风格 A 暖陶土，变量名一致。
 * ★ 视觉出处：`outputs/UI设计稿_商用化注册开通_双端.html` 的 P1 / P3 两节（老唐已拍板）。
 * ★ 断点：桌面 1280（四档横排）· 手机 390（**两张大卡叠放 ＋ 两张小卡并排**，见 §四档卡片）。
 *   ⚠️ 手机端不只是"变窄"：按稿子，个人版 / 租户 变成整行大卡 ＋ 一句话摘要（把四条 bullet 压成一行），
 *      店员号 / 总部 缩成并排小卡、**去掉 bullet 与按钮**。所以 HTML 里两套都写了，用媒体查询切。
 */
:root{
  --clay:#8C3D14; --clay2:#B04A19; --amber:#D97706; --sand:#F7F2EA;
  --paper:#FFFFFF; --ink:#2A211B; --muted:#7C6A5B; --faint:#A2937F;
  --line:#EBE0D2; --soft:#FBF2E9; --red:#C0392B; --green:#2F6B45;
  --cvs:#FBF7F1;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* ★★★ `[hidden]` 必须**压过**后面所有 `display` 声明（2026-09-24 踩到）：
   本文件里 `.refbar{display:flex}` / `.alert{display:flex}` 这类规则**优先级高于**
   浏览器内置的 `[hidden]{display:none}`，于是 `el.hidden = true` 设了等于没设 ——
   元素照样显示。归属条就这样在"没有 ?ref="的页面上**真的露出来了**，
   而当时的自检读的是 `el.hidden` **属性**（读到了 true）⇒ 一路绿灯、截图才露馅。
   ⇒ 一条全局兜底，别在具体类上一个个补。配套：断言必须查 `getClientRects().length`，别查属性。 */
[hidden]{display:none !important}
body{background:var(--sand);color:var(--ink);
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif;
  font-size:13.5px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
svg{display:block}

/* ==================== 按钮 ==================== */
.btn{border-radius:10px;padding:9px 16px;font-size:12.5px;border:1px solid transparent;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;line-height:1.2;cursor:pointer}
.btn.pri{background:var(--clay);color:#fff}
.btn.pri:hover{background:#7C3410}
.btn.amb{background:var(--amber);color:#fff}
.btn.amb:hover{background:#C26A05}
.btn.gh{background:#fff;color:var(--clay);border-color:#E3D2BC}
.btn.gh:hover{background:var(--soft)}
.btn.line{background:transparent;color:var(--muted);border-color:var(--line)}
.btn.sm{padding:6px 11px;font-size:11.5px;border-radius:9px}
.btn.lg{padding:12px 20px;font-size:13.5px;border-radius:12px}
.btn.dis{background:#F1EDE7;color:var(--faint);border-color:var(--line);cursor:default}
.btn[disabled]{background:#F1EDE7;color:var(--faint);border-color:var(--line);cursor:default}
/* `<a>` 没有 disabled 属性 ⇒ 用 aria-disabled ＋ 这条规则装成禁用（例如"拨打电话"拿不到号码时） */
.btn[aria-disabled="true"]{background:#F1EDE7;color:var(--faint);border-color:var(--line);
  cursor:default;pointer-events:none}
.pill{display:inline-block;font-size:11px;color:#9A5A11;background:#FDF1E3;border:1px solid #EFDCB8;border-radius:20px;padding:2px 11px}
.logo{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,var(--clay),var(--clay2));
  color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex-shrink:0}

/* ==================== 顶栏 / 归属条 ==================== */
.refbar{background:#FDF1E3;border-bottom:1px solid #EFDCB8;color:#7A5410;font-size:11.5px;
  padding:8px 30px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.refbar b{color:var(--clay)}
.refbar .rt{margin-left:auto;font-size:10.5px;color:var(--faint)}
.nav{height:58px;display:flex;align-items:center;gap:12px;padding:0 30px;background:#fff;border-bottom:1px solid var(--line)}
.nav .bn{font-size:14px;font-weight:700;line-height:1.15}
.nav .bn i{display:block;font-style:normal;font-size:10px;color:var(--faint);font-weight:400}
.nav .r{margin-left:auto;display:flex;gap:10px;align-items:center}
.nav .r .lnk{font-size:12px;color:var(--muted)}

/* ==================== 首屏 ==================== */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 452px;gap:30px;padding:34px 30px 26px;align-items:center}
.hero h2{font-size:29px;line-height:1.3;margin:10px 0 12px;letter-spacing:-.3px}
.hero h2 em{font-style:normal;color:var(--clay)}
.hero p.s{font-size:13px;color:var(--muted);margin:0 0 18px;max-width:52ch}
.kpis{display:flex;gap:26px;margin:0 0 20px}
.kpi b{font-size:19px;color:var(--clay);font-variant-numeric:tabular-nums}
.kpi span{display:block;font-size:10.5px;color:var(--faint)}
.ctarow{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ctarow .tipline{font-size:11px;color:var(--faint);width:100%}

/* 效果图占位（不是真出图：落地页不调引擎，省一次算料） */
.shot{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 40px rgba(42,33,27,.10);overflow:hidden}
.shot .bar{height:32px;background:#F3EDE4;border-bottom:1px solid #E4DACC;display:flex;align-items:center;gap:6px;padding:0 11px}
.shot .bar i{width:8px;height:8px;border-radius:50%;background:#DCD2C3}
.shot .bar span{font-size:10px;color:var(--faint);margin-left:5px}
.shot .bd{display:grid;grid-template-columns:1fr 172px}
.shot .cv{background:var(--cvs);padding:9px}
.shot .bom{background:#fff;border-left:1px solid var(--line);padding:9px 11px}
.shot .bom h6{font-size:10px;margin:0 0 7px;color:var(--faint);font-weight:400;letter-spacing:.1em}
.shot .r{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);padding:3px 0;border-bottom:1px dashed #F1E9DD}
.shot .r b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}
.shot .tot{margin-top:8px;display:flex;justify-content:space-between;font-size:10.5px;color:var(--clay);font-weight:700}

/* ==================== 四档卡片 ==================== */
.secttitle{padding:2px 30px 12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.secttitle b{font-size:15px}
.secttitle span{font-size:11.5px;color:var(--faint)}
.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 30px 26px}
.pc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 15px 14px;position:relative;display:flex;flex-direction:column}
.pc.hi{border-color:var(--clay);box-shadow:0 10px 26px rgba(140,61,20,.14)}
.pc .rb{position:absolute;top:-9px;left:15px;background:var(--clay);color:#fff;font-size:10px;border-radius:6px;padding:2px 8px}
.pc h4{font-size:13.5px;margin:0 0 2px}
.pc .who{font-size:10.5px;color:var(--faint);margin:0 0 10px;min-height:16px}
.pc .pr{font-size:25px;font-weight:700;color:var(--clay);line-height:1.05;font-variant-numeric:tabular-nums}
.pc .pr .u{font-size:12px;font-weight:400;color:var(--faint);margin-left:5px}
.pc ul{list-style:none;margin:12px 0 14px;padding:0;font-size:11.5px;color:var(--muted);line-height:1.75}
.pc li{padding-left:12px;position:relative}
.pc li::before{content:"";position:absolute;left:2px;top:9px;width:4px;height:4px;border-radius:50%;background:#D9C9B6}
.pc li b{color:var(--ink)}
.pc .btn{margin-top:auto}
/* 手机端才显示的一行摘要（桌面端隐藏） */
.pc .mline{display:none;font-size:11.5px;color:var(--muted);margin:10px 0 14px;line-height:1.7}

/* ==================== 两条线入口说明 ==================== */
.entry{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 30px 24px}
.ec{border-radius:16px;padding:17px 18px 15px;border:1px solid var(--line);background:#fff}
.ec.a{border-color:#E3D2BC;background:#FFFBF3}
.ec h4{font-size:14px;margin:0 0 4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ec h4 i{font-style:normal;font-size:10px;font-weight:400;color:#9A5A11;background:#FDF1E3;border:1px solid #EFDCB8;border-radius:6px;padding:1px 7px}
.ec p{font-size:12px;color:var(--muted);margin:0 0 12px}
.ec .kv{font-size:11.5px;color:var(--muted);line-height:2}
.ec .kv b{color:var(--ink)}

/* ==================== 三条底线 + 页脚 ==================== */
.note3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 30px 28px}
.n3{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 13px;font-size:11.5px;color:var(--muted)}
.n3 b{display:block;color:var(--ink);font-size:12.5px;margin-bottom:3px}
.foot{background:#2A211B;color:#BFB2A3;font-size:11px;padding:15px 30px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.foot .fx{margin-left:auto;display:flex;gap:16px;color:#9C8F80}

/* ==================== 提示条（公开页共用） ==================== */
.alert{display:flex;gap:9px;align-items:flex-start;border-radius:11px;padding:11px 13px;font-size:11.5px;line-height:1.7}
.alert .ic{width:17px;height:17px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  font-size:11px;font-weight:700;color:#fff;margin-top:1px}
.alert.bad{background:#FDF4F2;border:1px solid #F0C9C4;color:#8E2F22}
.alert.bad .ic{background:var(--red)}
.alert.warn{background:#FDF6E9;border:1px solid #EFDCB8;color:#7A5410}
.alert.warn .ic{background:var(--amber)}
.alert.ok{background:#F1F7F2;border:1px solid #CBE0D2;color:#2F6B45}
.alert.ok .ic{background:var(--green)}
.alert[hidden]{display:none}

/* ==================== 联系方式卡（租户线） ==================== */
.tcard{border:1px solid #E3D2BC;background:#FFFBF3;border-radius:13px;padding:12px 13px;display:flex;gap:12px;align-items:center}
.tcard .av{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,var(--clay),var(--clay2));
  color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;flex-shrink:0}
.tcard .tx{font-size:11.5px;color:var(--muted);line-height:1.7;min-width:0}
.tcard .tx b{display:block;font-size:13px;color:var(--ink)}

/* ==================== P3 开通 / 付款页 ==================== */
.pgwrap{padding:22px 30px 34px;max-width:1080px;margin:0 auto}
/* 页头（公开页自己的顶栏：返回 + 品牌名） */
.pnav{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.pnav .bn{font-size:13.5px;font-weight:700;line-height:1.15}
.pnav .bn i{display:block;font-style:normal;font-size:10px;color:var(--faint);font-weight:400}
.pnav .r{margin-left:auto;display:flex;gap:10px;align-items:center;font-size:11.5px;color:var(--muted)}

/* 步骤条 —— 语义照稿：done＝走完（绿）· cur＝当前（陶土实心）· 其余＝未到（灰） */
.steps{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--faint);margin:0 0 16px;flex-wrap:wrap}
.steps .stp{display:flex;align-items:center;gap:6px}
.steps .stp .n{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;font-weight:700;
  background:#F1EDE7;color:var(--faint)}
.steps .stp.done .n{background:#EDF6F0;color:var(--green)}
.steps .stp.cur{color:var(--clay);font-weight:700}
.steps .stp.cur .n{background:var(--clay);color:#fff}
.steps .ar{color:#D9CFC0}

/* 档位选择 */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}
.tier{background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 15px 13px;position:relative;
  cursor:pointer;display:flex;flex-direction:column;transition:border-color .12s,box-shadow .12s}
.tier:hover{border-color:#D9BE9E}
.tier.on{border-color:var(--clay);box-shadow:0 10px 26px rgba(140,61,20,.14)}
.tier .rb{position:absolute;top:-9px;left:15px;background:var(--clay);color:#fff;font-size:10px;border-radius:6px;padding:2px 8px}
.tier .rd{position:absolute;top:13px;right:13px;width:17px;height:17px;border-radius:50%;border:1.5px solid #D9CFC0;background:#fff}
.tier.on .rd{border-color:var(--clay);background:var(--clay);
  box-shadow:inset 0 0 0 3.5px #fff}
.tier h4{font-size:13.5px;margin:0 0 2px;padding-right:24px}
.tier .who{font-size:10.5px;color:var(--faint);margin:0 0 9px}
.tier .pr{font-size:23px;font-weight:700;color:var(--clay);line-height:1.05;font-variant-numeric:tabular-nums}
.tier .pr .u{font-size:12px;font-weight:400;color:var(--faint);margin-left:5px}
.tier ul{list-style:none;margin:10px 0 0;padding:0;font-size:11.5px;color:var(--muted);line-height:1.7}
.tier li{padding-left:12px;position:relative}
.tier li::before{content:"";position:absolute;left:2px;top:9px;width:4px;height:4px;border-radius:50%;background:#D9C9B6}
/* ★ 手机端把 bullet 压成一行摘要（稿子 390 帧就是这么做的）——桌面端不显示。
   ⚠️ 只把 ul 藏掉、不留这一行，手机上档位卡就**只剩名字和价格**，"含什么"全丢了。 */
.tier .mline{display:none;font-size:11.5px;color:var(--muted);margin:9px 0 0;line-height:1.7}

/* 结算栏：**收款卡窄、订单信息宽**（照稿子 `200px minmax(0,1fr)`）。
   ⚠️ 反过来的话收款区会撑成一整片空白虚线，看着像"页面坏了"。 */
.pay{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start}
.pcard{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 19px 16px;box-shadow:0 10px 26px rgba(42,33,27,.06)}
.pcard h3{font-size:14px;margin:0 0 12px}
.sumline{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);padding:6px 0;border-bottom:1px dashed #F1E9DD}
.sumline b{color:var(--ink);font-variant-numeric:tabular-nums}
.sumtot{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px;font-size:12.5px;color:var(--muted)}
.sumtot b{font-size:24px;color:var(--clay);font-variant-numeric:tabular-nums}
.qr{width:150px;height:150px;margin:0 auto 10px;display:block}
.qrcard{border:1px solid var(--line);border-radius:13px;padding:14px;text-align:center;background:#fff}
.qrcard .alipay{display:flex;align-items:center;gap:6px;justify-content:center;font-size:11px;color:var(--muted);margin-bottom:9px}
.qrcard .ali{width:18px;height:18px;border-radius:5px;background:#1677FF;color:#fff;font-size:11px;display:grid;place-items:center;font-weight:700}
.qrcard .amt{font-size:19px;font-weight:700;color:var(--clay);margin-top:11px;font-variant-numeric:tabular-nums}
.qrcard .cd{font-size:10.5px;color:var(--faint);margin-top:3px}

/* ★ 收款区「未就绪」占位：**故意不画二维码、不给扫码入口**。
   后端付款接口（下单 / 查单 / 回调）现在一条都没有 ⇒ 画个真二维码等于让人扫一个收不到钱的码。
   这里只说明"还差什么"，不给任何可操作的假动作。 */
.qrhold{border:1.5px dashed #D9CFC0;border-radius:10px;background:#FBF8F3;height:168px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:0 14px;text-align:center}
.qrhold .ic{width:30px;height:30px;border-radius:9px;background:#F1EDE7;color:var(--faint);
  display:grid;place-items:center;font-size:15px;font-weight:700}
.qrhold b{font-size:12px;color:var(--muted)}
.qrhold span{font-size:10.5px;color:var(--faint);line-height:1.65}

/* 订单信息行 */
.orow{display:flex;justify-content:space-between;gap:14px;font-size:12px;color:var(--muted);
  padding:8px 0;border-bottom:1px dashed #F1E9DD}
.orow>span{flex-shrink:0}
.orow>b{color:var(--ink);text-align:right;font-weight:700}
.orow .mono{font-variant-numeric:tabular-nums;letter-spacing:.3px}
.orow .todo{color:var(--faint);font-weight:400}

/* 等待到账条 */
.waiting{display:flex;align-items:center;gap:9px;font-size:11.5px;color:#7A5410;background:#FDF7EA;
  border:1px solid #EFDDB4;border-radius:10px;padding:9px 11px;margin-top:13px}
.spin{width:13px;height:13px;border-radius:50%;border:2px solid #EFDDB4;border-top-color:var(--amber);flex-shrink:0}

/* 说明盒 / 按钮行 / 提示语 */
.box{border:1px solid var(--line);background:#FBF8F3;border-radius:11px;padding:11px 12px;
  font-size:11.5px;color:var(--muted);line-height:1.75}
.box.amber{border-color:#EFDDB4;background:#FDF7EA;color:#7A5410}
.box b{color:var(--clay)}
.btnrow{display:flex;gap:10px;align-items:center;margin-top:15px}
/* 桌面端按钮**按内容宽度**（不分摊）—— 分摊在宽栏里会拉成两条巨长的横条，很重 */
.btnrow .btn{flex:0 1 auto}
.hint{font-size:11px;color:var(--faint);margin:6px 0 0;line-height:1.6}
.hint b{color:var(--clay)}
.btn.blk{width:100%;margin-top:9px}

/* 两栏小卡（租户线的「联系方式 | 开通后得到什么」） */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch}
.two-c{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 15px}
.two-c .hd{display:flex;align-items:center;gap:8px;margin-bottom:9px;flex-wrap:wrap}
.two-c .hd b{font-size:13px}
.two-c .hd i{font-style:normal;font-size:10px;color:#9A5A11;background:#FDF1E3;border:1px solid #EFDCB8;border-radius:6px;padding:1px 7px}
.two-c .sc{font-size:11.5px;color:var(--muted);line-height:1.9;margin:9px 0 11px}
.two-c .sc b{color:var(--ink)}

/* ==================== 手机 390 ==================== */
@media (max-width:900px){
  .refbar{padding:8px 14px}
  .refbar .rt{display:none}
  .nav{height:52px;padding:0 14px}
  /* ★ 手机端顶栏：**保留「登录」**、去掉两个大按钮（照稿子 390 帧）。
     反了的话，老用户从落地页进来**没有登录入口** —— 而且两个并排按钮在 390 上会把品牌名挤掉。 */
  .mhide{display:none !important}
  .nav .r .lnk{font-size:11.5px;color:var(--clay);border:1px solid var(--line);
    border-radius:9px;padding:5px 11px;background:#fff;white-space:nowrap}
  .hero{grid-template-columns:1fr;gap:18px;padding:22px 14px 16px}
  .hero h2{font-size:23px;margin:9px 0 10px}
  .hero p.s{font-size:12.5px;margin-bottom:14px}
  .kpis{gap:18px;margin-bottom:16px}
  .kpi b{font-size:17px}
  .ctarow{gap:10px}
  .ctarow .btn{width:100%}
  .secttitle{padding:0 14px 10px}
  .secttitle span{display:none}
  .prices{grid-template-columns:1fr 1fr;gap:10px;padding:0 14px 18px}
  .pc.s-dealer{order:1;grid-column:1/-1}
  .pc.s-tenant{order:2;grid-column:1/-1}
  .pc.s-staff{order:3}
  .pc.s-hq{order:4}
  /* 小卡：按稿去掉 bullet 与按钮，只留名字 / 价格 / 一句话 */
  .pc.s-staff ul,.pc.s-hq ul,.pc.s-staff .btn,.pc.s-hq .btn{display:none}
  .pc.s-staff .who,.pc.s-hq .who{margin-bottom:6px}
  /* 大卡：bullet 换成一行摘要 */
  .pc.s-dealer ul,.pc.s-tenant ul{display:none}
  .pc .mline{display:block}
  .entry{grid-template-columns:1fr;gap:12px;padding:0 14px 18px}
  .note3{grid-template-columns:1fr;gap:10px;padding:0 14px 20px}
  .foot{padding:14px;font-size:10.5px;gap:10px}
  .foot .fx{gap:12px}
  .pgwrap{padding:16px 14px 26px}
  .pnav{gap:9px;margin-bottom:14px}
  .pnav .bn{font-size:12.5px}
  .steps{gap:6px;margin-bottom:12px}
  .steps .stp{font-size:10.5px}
  .steps .stp .n{width:16px;height:16px;font-size:9.5px}
  .tiers{grid-template-columns:1fr;gap:10px}
  .pay{grid-template-columns:1fr;gap:14px}
  .tier ul{display:none}
  .tier .mline{display:block}
  .two{grid-template-columns:1fr;gap:12px}
  .qrhold{height:150px}
  .btnrow{flex-direction:column;align-items:stretch;gap:8px}
  .btnrow .btn{width:100%}
  .orow{font-size:11.5px}
}