/* v8.03 服务落地页通用样式 —— 居家便民服务 / 时间银行 共用。
   设计原则（适老）：正文不小于 13px、可点区域不小于 44px、一屏一主题、不堆砌。 */
:root{
  --sp-primary:#1a2540;   /* 主色：深墨蓝，稳重 */
  --sp-gold:#c9a96e;      /* 辅色：暖金 */
  --sp-bg:#faf8f4;        /* 页面底：米白 */
  --sp-line:#eee7db;      /* 分隔线 */
  --sp-card:#fff;
  --sp-text:#3d3d3d;
  --sp-sub:#8a857b;
  --sp-safe:env(safe-area-inset-bottom, 0px);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; padding:0; background:#efe9dd; color:#2b2b2b;
  font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif; }
.sp-page { max-width:560px; margin:0 auto; background:var(--sp-bg); min-height:100vh;
  box-shadow:0 0 14px rgba(26,37,64,.06); padding-bottom:calc(20px + var(--sp-safe)); }

/* 顶部导航 */
.sp-nav { position:sticky; top:0; z-index:20; display:flex; align-items:center; height:48px;
  padding:0 12px; background:var(--sp-primary); color:#fff; font-size:17px; font-weight:600; }
.sp-nav .sp-back { width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#fff; text-decoration:none; border-radius:8px; }
.sp-nav .sp-title { flex:1; text-align:center; margin-right:32px; }
.sp-nav .sp-right { width:32px; }

/* 头部大图区 */
.sp-hero { margin:12px; padding:18px 16px; border-radius:16px; color:#fff; }
.sp-hero h2 { margin:0 0 8px; font-size:19px; }
.sp-hero p { margin:0; font-size:13px; line-height:1.85; opacity:.95; }

/* 内容区块 */
.sp-sec { margin:12px; padding:16px; background:var(--sp-card); border-radius:16px;
  box-shadow:0 1px 4px rgba(26,37,64,.06); }
.sp-sec-t { font-size:14px; font-weight:800; color:var(--sp-primary); margin:0 0 4px;
  padding-left:8px; border-left:3px solid var(--sp-gold); }
.sp-sec-s { font-size:12px; color:var(--sp-sub); margin:0 0 12px; line-height:1.7; }

/* 两列服务卡 */
.sp-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sp-card { display:flex; gap:9px; padding:11px; background:#fbf8f2; border-radius:12px;
  border:1px solid var(--sp-line); }
.sp-card .c-ic { font-size:18px; flex:0 0 auto; line-height:1.2; }
.sp-card .c-b { flex:1; min-width:0; }
.sp-card .c-n { font-size:13.5px; font-weight:700; color:var(--sp-primary); margin-bottom:3px; }
.sp-card .c-d { font-size:11.5px; color:var(--sp-sub); line-height:1.6; }
.sp-card .c-p { display:inline-block; margin-top:5px; font-size:11px; color:#a3823c;
  background:#f6f1e6; border-radius:999px; padding:2px 8px; }

/* 步骤 */
.sp-steps { margin:0; padding:0; list-style:none; counter-reset:sp; }
.sp-steps li { position:relative; padding:0 0 12px 30px; font-size:13px; line-height:1.8;
  color:#5b5b5b; counter-increment:sp; }
.sp-steps li::before { content:counter(sp); position:absolute; left:0; top:1px; width:20px; height:20px;
  border-radius:50%; background:var(--sp-gold); color:#fff; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
.sp-steps li:last-child { padding-bottom:0; }

/* 提示块 */
.sp-note { margin-top:12px; padding:11px 12px; background:#fff8ec; border-radius:12px;
  font-size:12px; color:#8a6a2a; line-height:1.8; }
.sp-note b { color:#6b5216; }

/* 表单 */
.sp-form label { display:block; font-size:12.5px; font-weight:600; color:var(--sp-primary); margin:12px 0 6px; }
.sp-form input, .sp-form select, .sp-form textarea { width:100%; padding:11px 12px;
  border:1px solid var(--sp-line); border-radius:10px; font-size:15px; background:#fff;
  color:#2b2b2b; font-family:inherit; }
.sp-form textarea { min-height:70px; resize:vertical; }
.sp-form .sp-2col { display:flex; gap:8px; }
.sp-form .sp-2col > * { flex:1; min-width:0; }
.sp-chips { display:flex; flex-wrap:wrap; gap:8px; }
.sp-chip { padding:9px 14px; border-radius:999px; border:1px solid var(--sp-line);
  background:#fff; font-size:13px; color:#5b5b5b; }
.sp-chip.on { background:var(--sp-primary); border-color:var(--sp-primary); color:#fff; font-weight:600; }
.sp-submit { margin-top:16px; width:100%; height:48px; border:0; border-radius:12px;
  background:var(--sp-primary); color:#fff; font-size:16px; font-weight:700; }
.sp-submit:disabled { opacity:.6; }

/* 底部常驻按钮：登记入口始终够得到 */
.sp-cta { position:fixed; left:0; right:0; bottom:0; z-index:30; max-width:560px; margin:0 auto;
  padding:10px 12px calc(10px + var(--sp-safe)); background:rgba(255,255,255,.97);
  box-shadow:0 -2px 10px rgba(26,37,64,.08); display:flex; gap:10px; }
.sp-cta button { flex:1; height:48px; border:0; border-radius:12px; font-size:15px; font-weight:700;
  color:#fff; background:var(--sp-primary); }
.sp-cta button.ghost { background:#fff; color:var(--sp-primary); border:1.5px solid var(--sp-primary); }

/* 大字模式（适老化）跟随放大 */
body.sp-elder .sp-hero p, body.sp-elder .sp-card .c-d, body.sp-elder .sp-sec-s { font-size:14px; }
body.sp-elder .sp-card .c-n { font-size:16px; }
body.sp-elder .sp-steps li { font-size:15px; }
body.sp-elder .sp-sec-t { font-size:17px; }
body.sp-elder .sp-chip { font-size:15px; padding:12px 16px; }
body.sp-elder .sp-form input, body.sp-elder .sp-form select, body.sp-elder .sp-form textarea { font-size:17px; padding:13px 12px; }

/* 窄屏（≤360px）两列改一列，避免文字挤成两行 */
@media (max-width:360px){
  .sp-grid { grid-template-columns:1fr; }
}