/* 页面整体背景 - 橙色 */
page {
    background-color: #FF9800;
}

.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 自定义导航栏 */
.nav-bar {
    height: 88rpx;
    /* 标准导航栏高度 */
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    /* 适配状态栏高度在 vue 中通过 padding-top 实现，这里仅控制栏本身 */
}

.back-icon {
    font-size: 60rpx;
    color: #fff;
    font-weight: bold;
    /* 增大点击区域 */
    width: 60rpx;
    height: 60rpx;
    line-height: 56rpx;
    text-align: center;
    display: block;
}

/* 头部文案 */
.header-area {
    padding: 40rpx 40rpx 20rpx;
    color: #fff;
    text-align: center;
}

.main-title {
    font-size: 48rpx;
    font-weight: bold;
    display: block;
    margin-bottom: 20rpx;
}

.sub-title {
    font-size: 32rpx;
    opacity: 0.9;
    display: block;
}

/* 内容卡片 */
.content-card {
    background-color: #fff;
    border-radius: 30rpx;
    /* 四周圆角 */
    margin: 40rpx 30rpx;
    /* 上下40 左右30 */
    padding: 60rpx 40rpx;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
}

.benefit-item {
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
    margin-bottom: 60rpx;
}

.icon-circle {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 30rpx;
    flex-shrink: 0;
    color: #fff;
    /* 图标文字白色 */
    font-weight: bold;
}

/* 图1 配色复刻 */
.icon-money {
    background-color: #26A69A;
    /* 青色/绿色 */
}

.icon-loc {
    background-color: #2979FF;
    /* 蓝色 */
}

.icon-clock {
    background-color: #FF7043;
    /* 橙色 */
}

.icon-text {
    font-size: 40rpx;
}

.info {
    flex: 1;
}

.item-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 8rpx;
    /* 减小间距 */
    display: block;
}

.item-desc {
    font-size: 26rpx;
    color: #666;
    line-height: 1.6;
    display: block;
}

/* 底部区域 */
.footer-area {
    margin-top: auto;
    /* 推到最底部 */
    padding: 20rpx 40rpx 80rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 移除白色背景，呈现底色橙色 */
}

.join-btn {
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    background: #fff;
    /* 白色按钮 */
    color: #FF5722;
    /* 橙色文字 */
    font-size: 34rpx;
    font-weight: bold;
    border-radius: 45rpx;
    box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
}

.join-btn::after {
    border: none;
}

.faq {
    margin-top: 30rpx;
    color: #fff;
    /* 白色文字 */
    font-size: 26rpx;
    display: flex;
    align-items: center;
}

.help-icon {
    width: 30rpx;
    height: 30rpx;
    border: 1px solid #fff;
    /* 白色边框 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20rpx;
    margin-right: 10rpx;
    color: #fff;
    /* 白色问号 */
}