/* ============================================================
   DIY 落地页前台样式(diypage.css)
   版式对齐参考站(Strikingly 主题站):通栏板块 + 94% 版心(≤1200px)、
   75px 上下节奏、平铺无边框卡片、胶囊按钮、深黑页脚。板块底色由运营逐块设置。
   移动端优先;主题色经 CSS 变量 --dp-theme 注入(仅按钮/编号数字/强调色)。
   ============================================================ */

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

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

body.dp-body {
    --dp-theme: #eb1659;                       /* 兜底主题色(参考站按钮红),页面级 <style> 会覆盖 */
    --dp-theme-dark: #c51249;
    --dp-deep: #1c1c1c;                        /* 深黑:hero 兜底底色/页脚/CTA 系 */
    --dp-title: #1d2023;                       /* 标题色 */
    --dp-text: #50555c;                        /* 正文灰 */
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: var(--dp-text);
    background: #ffffff;
    line-height: 1.6;
}

img { max-width: 100%; height: auto; }

/* ---------- 版心:板块通栏着色,内容以 padding 收进 94%(≤1200px) ---------- */
.dp-section {
    width: 100%;
    padding: 5px max(3%, calc((100% - 1200px) / 2));
    background: #ffffff;
}
@media (min-width: 768px) {
    .dp-section { padding-top: 20px; padding-bottom: 40px; }
}

/* ---------- 通用按钮:主题色胶囊(参考站:无阴影,hover 加深) ---------- */
.dp-btn {
    display: inline-block;
    background: var(--dp-theme);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.2;
    padding: 14px 28px;
    border-radius: 1000px;
    border: none;
    transition: background .15s ease, transform .15s ease;
    word-break: break-word;
}
.dp-btn:active { transform: scale(.97); }
.dp-btn:hover,
.dp-btn:focus { background: var(--dp-theme-dark); color: #ffffff; text-decoration: none; }
@media (min-width: 768px) {
    .dp-btn { font-size: 20px; padding: 16px 32px; }
}

/* ---------- Hero 板块:全屏背景图 + 遮罩 + 居中浅色文字 ---------- */
.dp-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dp-deep);          /* 背景三态兜底:无图无色时默认深黑 */
    color: #ffffff;
    overflow: hidden;
    padding-top: 40px;
    padding-bottom: 40px;
}
.dp-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}
/* 遮罩:参考站 s-bg-overlay rgba(94,97,109,.35),再叠一层底部压暗保证文字可读 */
.dp-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(94, 97, 109, .35) 0%, rgba(28, 28, 28, .55) 100%);
}
.dp-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 94%;
    max-width: 960px;
}
.dp-hero-title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.4;
    word-break: break-word;
}
.dp-hero-sub {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 400;
    opacity: .95;
    white-space: pre-line;
}
.dp-hero .dp-btn { margin-top: 30px; }
@media (min-width: 768px) {
    .dp-hero-title { font-size: 36px; }
    .dp-hero-sub { font-size: 19px; }
}

/* ---------- 页脚:深黑底白字居中版权行(参考站样式) ---------- */
.dp-footer {
    padding: 28px 3%;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, .85);
    background: var(--dp-deep);
}

/* ---------- "页面不存在"提示页 ---------- */
body.dp-body.dp-missing-body { background: var(--dp-deep); }
.dp-missing {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    padding: 24px;
}
.dp-missing-icon { font-size: 44px; font-weight: 800; opacity: .5; }
.dp-missing-title { margin-top: 14px; font-size: 24px; }
.dp-missing-text { margin-top: 10px; font-size: 14px; opacity: .75; max-width: 320px; }

/* ---------- 图文混排板块 ---------- */
.dp-rich-header { text-align: center; margin-bottom: 32px; }
.dp-rich-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--dp-title);
    margin-bottom: 10px;
    word-break: break-word;
}
.dp-rich-sub { font-size: 17px; color: var(--dp-title); }

.dp-rich-body { margin-bottom: 32px; }
.dp-rich-img-wrap { margin-bottom: 28px; }
.dp-rich-img { width: 100%; border-radius: 2px; }
.dp-rich-content { font-size: 17px; line-height: 1.7; color: var(--dp-text); }
.dp-rich-content p { margin-bottom: 14px; }
.dp-rich-content p:last-child { margin-bottom: 0; }
.dp-rich-content img { max-width: 100%; border-radius: 2px; }
.dp-rich-content ul, .dp-rich-content ol { margin-left: 22px; margin-bottom: 14px; }
.dp-rich-content li { margin-bottom: 8px; }
.dp-rich-content b, .dp-rich-content strong { font-weight: 700; color: var(--dp-title); }
.dp-rich-content i, .dp-rich-content em { font-style: italic; }
.dp-rich-content u { text-decoration: underline; }
/* 运营在富文本里手工写的内联颜色(如参考站彩色标题)原样生效 */
.dp-rich-content a { color: var(--dp-theme); }

.dp-rich-action { text-align: center; }
.dp-rich-action .dp-btn { margin-top: 0; }

@media (min-width: 768px) {
    .dp-rich-title { font-size: 36px; }
    .dp-rich-sub { font-size: 18px; }
}

/* ---------- 卡片板块:参考站 feature-list 平铺风(无卡片底/边框/阴影) ---------- */
.dp-cards-header { text-align: center; margin-bottom: 36px; }
.dp-cards-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--dp-title);
    margin-bottom: 10px;
    word-break: break-word;
}
.dp-cards-sub { font-size: 17px; color: var(--dp-title); }

.dp-cards-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-bottom: 36px;
}
@media (min-width: 620px) {
    .dp-cards-list { flex-direction: row; flex-wrap: wrap; gap: 32px 24px; }
    .dp-card-item { flex: 1 1 calc(50% - 12px); min-width: 0; }
}
@media (min-width: 900px) {
    .dp-card-item { flex: 1 1 calc(33.33% - 16px); }
}

.dp-card-item {
    display: flex;
    flex-direction: column;
    /* 参考站平铺:无底色、无边框、无阴影、无位移动效 */
}

.dp-card-icon-wrap { margin-bottom: 16px; }
.dp-card-icon-img { width: 100%; border-radius: 2px; }
.dp-card-icon-text { font-size: 44px; line-height: 1; margin-bottom: 16px; }

.dp-card-content { flex: 1; display: flex; flex-direction: column; }
.dp-card-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--dp-title);
    margin-bottom: 10px;
    word-break: break-word;
}
.dp-card-sub {
    font-size: 17px;
    color: var(--dp-text);
    line-height: 1.65;
    margin-bottom: 16px;
    flex: 1;
    white-space: pre-line;
}

.dp-card-btn {
    display: inline-block;
    align-self: flex-start;
    background: var(--dp-theme);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    padding: 10px 22px;
    border-radius: 1000px;
    transition: background .15s ease, transform .15s ease;
    word-break: break-word;
}
.dp-card-btn:hover, .dp-card-btn:focus { background: var(--dp-theme-dark); color: #ffffff; text-decoration: none; }
.dp-card-btn:active { transform: scale(0.97); }

@media (min-width: 768px) {
    .dp-cards-header { margin-bottom: 44px; }
    .dp-cards-title { font-size: 36px; }
    .dp-cards-sub { font-size: 18px; }
}

/* ---------- 编号列表板块:左数字右内容(数字为主题色,无圆底) ---------- */
.dp-numbered-header { text-align: center; margin-bottom: 36px; }
.dp-numbered-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--dp-title);
    margin-bottom: 10px;
    word-break: break-word;
}
.dp-numbered-sub { font-size: 17px; color: var(--dp-title); }

.dp-numbered { color: var(--dp-text); }
.dp-numbered-list { display: flex; flex-direction: column; gap: 36px; margin-bottom: 36px; }

.dp-numbered-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}
.dp-numbered-num {
    flex-shrink: 0;
    min-width: 40px;
    background: none;
    color: var(--dp-theme);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.dp-numbered-content { flex: 1; }

.dp-numbered-item-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--dp-title);
    margin-bottom: 8px;
    word-break: break-word;
}
.dp-numbered-item-sub {
    font-size: 17px;
    color: var(--dp-text);
    line-height: 1.65;
    margin-bottom: 12px;
    white-space: pre-line;
}

.dp-numbered-item-btn {
    display: inline-block;
    background: var(--dp-theme);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    padding: 9px 20px;
    border-radius: 1000px;
    transition: background .15s ease, transform .15s ease;
    word-break: break-word;
}
.dp-numbered-item-btn:hover, .dp-numbered-item-btn:focus { background: var(--dp-theme-dark); color: #ffffff; text-decoration: none; }
.dp-numbered-item-btn:active { transform: scale(0.97); }

.dp-numbered-action { text-align: center; }
.dp-numbered-action .dp-btn { margin-top: 0; }

@media (min-width: 768px) {
    .dp-numbered-header { margin-bottom: 44px; }
    .dp-numbered-title { font-size: 36px; }
    .dp-numbered-sub { font-size: 18px; }
    .dp-numbered-list { gap: 44px; }
    .dp-numbered-num { font-size: 34px; min-width: 48px; }
}