/* home.html（首页）的页面样式。通过 <link rel="stylesheet" href="static/css/rainyun-home.css"> 引入；
   固定框架、优惠码卡、领取流程、三个 tab 的等高规则都在这里。改动请直接改本文件，不要再往 HTML 里写 <style>。 */

/* 固定框架：外层卡片定高，三个 tab 切换时外框尺寸不变，超长内容在框内滚动 */
.app-shell {
    display: flex;
    flex-direction: column;
}

.app-body {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    /* 始终保留滚动条槽（而不是按需出现），保证三个 tab 的内容区宽度完全一致，
       切换时内容不会左右横移；轨道透明，视觉上看不到 */
    overflow-y: scroll;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d8dce0 transparent;
}

.app-body::-webkit-scrollbar {
    width: 6px;
}

.app-body::-webkit-scrollbar-thumb {
    background: #d8dce0;
    border-radius: 3px;
}

.app-body::-webkit-scrollbar-track {
    background: transparent;
}
/* 三个 tab 的内容容器统一内宽 840px 并居中：切换时内容宽度也不跳 */
#my-about > div,
#my-experience > div,
#my-contact > div {
    width: 100%;
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
}
/* 三个 tab 的 head 都要通栏：不吃 840 内容宽限制。
   必须用 id 选择器，否则压不过上面 #my-about > div 的 max-width:840 */
#my-about > .app-head,
#my-experience > .app-head,
#my-contact > .app-head {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}
/* 每个 tab 的内容区至少铺满框架高度，但内容多了允许自己长高（外层再滚） */
.card-section {
    min-height: 100%;
}
/* 首页：head 固定在顶部，下面整块内容在剩余高度里垂直居中 */
#my-about:not(.hidden) {
    display: flex;
    flex-direction: column;
}

#my-about > div:last-child {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* 声明页内容短，在固定框架里垂直居中，避免下方留一大片空白。
   :not(.hidden) 是必须的：否则这条 display:flex 会盖掉 .hidden 的 display:none，
   导致声明页在首页 tab 下也被渲染出来 */
#my-contact:not(.hidden) {
    display: flex;
    flex-direction: column;
}

#my-contact > div:last-child {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* 首页内容块统一收窄到 620px 并水平居中：
   块作为一个整体落在中线，块内文字保持左对齐（长句左对齐才好看，不做逐行居中） */
.card-wide {
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}
/* 主行动按钮：尺寸走独立样式，不依赖未编译的 tailwind 间距类 */
/* 主按钮配色 = 雨云官网 .btn-success 绿：
   常态 #28c76f、悬停 #22a75d、按下 #1f9d57，均为官网 CSS 原值。
   官网 /rcs 的「前往购买」实际用 .btn-warning 橙 #ff9f43，这里按站内要求统一为绿色。 */
.cta-main {
    text-decoration: none;
    height: 66px;
    padding: 0 48px;
    font-size: 19px;
    letter-spacing: 0.01em;
    border-radius: 12px;
    background-color: #28c76f;
    box-shadow: 0 8px 20px -8px rgba(40, 199, 111, 0.75);
}

.cta-main:hover {
    background-color: #22a75d;
    box-shadow: 0 12px 26px -10px rgba(40, 199, 111, 0.85);
}

.cta-main:active {
    background-color: #1f9d57;
}

/* 复制按钮用官网 .btn-primary：常态 #37b5c1、悬停 #2f99a3 */
#couponCodeButton:hover {
    background-color: #2f99a3;
}

.cta-main i {
    font-size: 17px;
}
/* 手机端整宽，高度略微收一点，避免按钮比内容还抢 */
@media (max-width: 767px) {
    .cta-main {
        height: 60px;
        padding: 0 16px;
        /* 按钮文案含优惠码，18px 在 390 宽会折成两行，收一档保证单行显示 */
        font-size: 15.5px;
        white-space: nowrap;
    }
}
/* 优惠码卡：收窄成一张居中的券，内部竖排居中（标签 → 码 → 提示） */
.coupon-card {
    max-width: 420px;
}

/* 优惠码卡内部三件套。这里不用 tailwind 工具类：
   站点 tailwind.css 是旧版编译产物，inline-flex / px-3 / text-xs 等类并不在里面，
   写了也是无效的（实测 padding 为 0、字号退回 16px） */
.coupon-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(55, 181, 193, 0.3);
    color: #2c9099;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
}

.coupon-tag i {
    font-size: 9px;
    opacity: 0.6;
}

.coupon-hint {
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: #9ca3af;
    text-align: center;
}
/* 补齐旧 CSS 里缺失的 space-y（否则列表条目会贴在一起） */
.list-tight > * + * { margin-top: 8px; }
.list-normal > * + * { margin-top: 12px; }
.list-loose > * + * { margin-top: 16px; }

/* ---------- 页脚 ----------
   整页背景是 Three.js 画的蓝天，所以页脚不能再用深色块——那会和白色卡片打架。
   改为和卡片同一套：白底 + 极浅的青色调 + 柔和投影，看起来是卡片的下半截收口。
   配色仍只用「青 / 墨 / 灰」三档，不引入新颜色。 */
.site-footer {
    margin-top: 32px;
    padding: 22px 26px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(55, 181, 193, 0.18);
    box-shadow: 0 10px 30px -16px rgba(20, 60, 70, 0.35);
    color: #1d2129;
    text-align: left;
}

/* 上排：品牌在左，官方入口在右，中间一条极浅分割线 */
.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(55, 181, 193, 0.16);
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-brand img {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    flex: 0 0 auto;
    box-shadow: 0 2px 8px -2px rgba(20, 60, 70, 0.25);
}

.footer-brand-name {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #1d2129;
}

.footer-brand-sub {
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #6b7280;
}

.footer-brand-sub b {
    color: #2c9099;
    font-weight: 600;
}

/* 官方入口：标签浅灰，链接主色青；悬停只加深颜色，不做位移 */
.footer-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
}

.footer-nav-label {
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #9ca3af;
}

.footer-nav a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    color: #2c9099;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-nav a:hover {
    color: #1d6f76;
}

.footer-nav a i {
    font-size: 9px;
    opacity: 0.7;
}

/* 官方入口与站内链接之间的竖圆点，靠伪元素画，不写在 HTML 文字里 */
.footer-nav-sep::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 11px;
    background: rgba(55, 181, 193, 0.28);
    vertical-align: -1px;
}

/* 中排：三条要点。「标签 + 一句话」，比一整段密排好扫，三行左边界对齐 */
.footer-facts {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
}

.footer-fact {
    display: grid;
    grid-template-columns: 76px 1fr;
    gap: 10px;
    align-items: baseline;
}

.footer-fact dt {
    font-size: 12px;
    color: #9ca3af;
    letter-spacing: 0.04em;
}

.footer-fact dd {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #4b5563;
}

.footer-fact dd b {
    color: #2c9099;
    font-weight: 600;
}

/* 算式单独弱化，不抢「5.6 折」 */
.footer-calc {
    color: #9ca3af;
    font-variant-numeric: tabular-nums;
}

/* 末排：合规声明。flex 整条换行，不会在半句话中间断开；
   版权放最后一项且不带分隔点，避免被挤到第二行时行首出现孤零零的「·」 */
.footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin: 16px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(55, 181, 193, 0.16);
    font-size: 11.5px;
    line-height: 1.9;
    color: #9ca3af;
}

.footer-legal span + span::before {
    content: "·";
    margin: 0 8px;
    opacity: 0.7;
}

.footer-legal span:last-child {
    margin-left: 10px;
    color: #9ca3af;
}

.footer-legal span:last-child::before {
    content: none;
}

/* 手机端：要点改为标签一行、说明一行，避免左侧 76px 把文字挤成窄条 */
@media (max-width: 767px) {
    .site-footer {
        margin-top: 24px;
        padding: 18px 16px 16px;
        border-radius: 12px;
    }

    .footer-top {
        align-items: flex-start;
    }

    .footer-nav {
        gap: 6px 14px;
    }

    .footer-fact {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .footer-fact dt {
        font-size: 11px;
    }

    /* 手机端每条声明独立成行，并去掉它们之间的「·」——
       否则一条声明换行时，行首会挂一个孤零零的分隔点 */
    .footer-legal {
        display: grid;
        gap: 2px;
    }

    .footer-legal span + span::before {
        content: none;
    }

    .footer-legal span:last-child {
        margin-left: 0;
    }
}

/* 优惠构成：按「月付 / 年付 / 可用范围」分三行。
   与下方「领取流程」共用同一套 24px 行高的紧凑节奏，保证整块能塞进固定框架不外溢。 */
.savings {
    /* HTML 上写的是 tailwind 的 mb-7，但那份预编译产物里没有 mb-7，会退化成 0；
       这里补真实下边距，否则「领取流程」会紧贴兜底说明 */
    margin-bottom: 16px;
}

.savings-title {
    text-align: left;
}

.saving-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.saving-row {
    display: grid;
    grid-template-columns: 92px 1fr;
    column-gap: 10px;
    align-items: start;
    line-height: 24px;
}

.saving-row + .saving-row {
    margin-top: 7px;
}
/* 场景标签：定宽才不会让右侧文字左边界参差 */
.saving-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    margin-top: 2px;
    padding: 0 7px;
    border-radius: 4px;
    background: #f1f5f7;
    color: #2c9099;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
/* 年付是主推场景，用主色实底把视觉重量压在这里 */
.saving-tag.is-hot {
    background: rgba(55, 181, 193, 0.14);
}

.saving-text {
    font-size: 13.5px;
    color: #1d2129;
}
/* 折扣兜底说明：平台规则随时会变，这句是合规必需的，不要删 */
.saving-note {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.55;
    color: #9ca3af;
    text-align: left;
}
/* 主按钮下方小字：说清点下去会发生什么，避免「以为能领取」的落差 */
.cta-note {
    margin: 6px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #9ca3af;
}

/* 领取流程：单行三列编号步骤。
   上方「能省多少」是勾选清单，这里换成 01/02/03 编号，两种形态不重复。
   父容器是 text-center，所以这里必须显式左对齐。
   行高压到 24px：这个块比原来那句两行说明高，再高压下去下方主按钮会被挤出框架 */
.how-to {
    margin-bottom: 12px;
    text-align: left;
}

.how-to-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    color: #1d2129;
}

.how-to-title i {
    color: #f67800;
    font-size: 0.9rem;
}

.steps {
    margin: 0;
    padding: 0;
    list-style: none;
}
/* 三列：编号 / 步骤名 / 说明。步骤名列定宽，三段说明的左边界才对齐 */
.step {
    display: grid;
    grid-template-columns: 18px 60px 1fr;
    column-gap: 10px;
    align-items: start;
    line-height: 24px;
}

.step + .step {
    margin-top: 7px;
}

.step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    /* 24px 行高里放 18px 圆标，下移 3px 才和首行文字垂直居中 */
    margin-top: 3px;
    border-radius: 50%;
    background: #eef7f8;
    color: #2c9099;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.step-name {
    font-size: 14px;
    font-weight: 600;
    color: #1d2129;
}

.step-desc {
    font-size: 14px;
    color: #6b7280;
}
/* 行内优惠码：等宽字体 + 浅底，和正文区分开 */
.step-code {
    padding: 1px 5px;
    border-radius: 4px;
    background: #f1f5f7;
    color: #2c9099;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}
/* 桌面端：外框高度钉死，三个 tab 切换时卡片不长不短。
   下限 845 = 首页 head（122）+ 正文内容 + 底部 tab 栏 59，保证首页在框内能一次看完；
   上限 900 防止超长屏把卡片拉得太空。 */
@media (min-width: 768px) {
    .app-shell {
        height: clamp(855px, calc(100vh - 96px), 900px);
    }
}
/* 手机端不锁定高度，交给整页滚动；内容块满宽 */
@media (max-width: 767px) {
    .app-shell {
        height: auto;
        /* 给固定在底部的 tab 栏让出位置，避免盖住页脚 */
        padding-bottom: 58px;
    }
    .app-body {
        overflow: visible;
    }
    .card-wide {
        max-width: 100%;
    }
    /* 手机端 head 收窄：隐藏右侧配平占位、logo 收到 48px，把宽度让给标题，避免标题折行 */
    .app-head-spacer {
        display: none;
    }
    .app-head img {
        width: 48px;
        height: 48px;
    }
    /* 手机端内容很长，tab 栏固定在视口底部，任何位置都能切 */
    .app-tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        background: #fff;
        box-shadow: 0 -4px 12px -6px rgba(0, 0, 0, 0.12);
    }
}