/* ============================================
   海南有知有行基金销售有限公司 · 全站视觉系统
   Visual tokens 沿用有知有行官网 About Us（advisor/longterm_strategy 同源）
   参考：Stripe / Apple / Cal / Linear 的克制留白哲学
   ============================================ */

:root {
    /* ── Palette ── */
    --ink: #262626;
    --ink-secondary: #5C5C5C;
    --ink-tertiary: #999;
    --surface: #FFFFFF;
    --surface-card: #FFFFFF;
    --surface-soft: #F6F8FB;
    --accent: #21A3FF;
    --accent-light: #E8F2FF;
    --hairline: rgba(0, 0, 0, 0.08);

    /* ── Type ── 系统字体 fallback，不用 Google Fonts CDN */
    --f-display: 'Noto Serif SC', 'Songti SC', Georgia, Cambria, 'Times New Roman', Times, serif;
    --f-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Emoji, 'PingFang SC', 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif;
    --f-mono: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    /* ── Spacing ── */
    --s-4: 4px;
    --s-8: 8px;
    --s-12: 12px;
    --s-16: 16px;
    --s-20: 20px;
    --s-24: 24px;
    --s-32: 32px;
    --s-48: 48px;
    --s-64: 64px;
    --s-80: 80px;
    --s-96: 96px;
    --s-120: 120px;

    /* ── Radius ── */
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;

    /* ── Layout ── */
    --content-w: 720px;
    --pad-x: max(20px, calc(50% - var(--content-w) / 2));
}

/* ============================================
   Base reset + body
   ============================================ */

:where(.hn-scope *),
:where(.hn-scope *::before),
:where(.hn-scope *::after) {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hn-scope {
    font-family: var(--f-body);
    background: var(--surface);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.75;
    font-size: 16px;
    min-height: 100vh;
}

html:has(.hn-scope) { scroll-behavior: smooth; }

.hn-scope a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dotted rgba(33, 163, 255, 0.4);
    transition: border-color 0.15s ease;
}

.hn-scope a:hover { border-bottom-color: var(--accent); }

.hn-scope img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ============================================
   Site header — 全站统一 chrome
   logo + 下载 App
   ============================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hairline);
}

.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-16) var(--pad-x);
    gap: var(--s-20);
    /* pad-x 已经把内容居中到 720px 容器；不要再叠 max-width 否则会把内容挤成单字列 */
}

/* brand / nav 不换行，单行 flex */
.site-brand,
.site-nav { white-space: nowrap; }

.hn-scope .site-brand {
    display: inline-flex;
    align-items: center;
    border-bottom: none !important;
}

.hn-scope .site-brand img {
    height: 22px;
    width: auto;
    display: block;
}

.hn-scope .site-brand:hover { border-bottom: none !important; }

.site-nav {
    display: inline-flex;
    align-items: center;
    gap: var(--s-20);
}

.site-nav a {
    font-size: 13px;
    color: var(--ink-secondary);
    border-bottom: none;
}

.site-nav a:hover { color: var(--ink); }

.site-nav .btn-download {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--ink);
    color: #fff;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    border-bottom: none;
    transition: background 0.15s ease;
}

.site-nav .btn-download:hover {
    background: #000;
    color: #fff;
    border-bottom: none;
}

@media (max-width: 720px) {
    .site-header-inner { padding: var(--s-12) var(--s-20); }
    .site-nav a:not(.btn-download) { display: none; }
}

/* ============================================
   Page shell + container
   ============================================ */

.page {
    background: var(--surface);
    min-height: 100vh;
}

.container {
    width: 100%;
    max-width: var(--content-w);
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================
   Hero — 共享 base
   各页面（首页/反洗钱专栏/agreement）通过 modifier 调整
   ============================================ */

.hn-hero {
    padding: var(--s-96) var(--pad-x) var(--s-48);
    position: relative;
    overflow: hidden;
}

.hn-hero-inner {
    max-width: var(--content-w);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* dot grid 背景 — Linear/Stripe 风的微弱质感
   每 24px 一个 0.5px 灰点，hero section 内独占（不渗到正文）
*/
.hn-hero--dot-grid {
    background:
        radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.07) 1px, transparent 0) 0 0 / 24px 24px,
        linear-gradient(180deg, var(--accent-light) 0%, var(--surface) 100%);
}

.hn-hero--soft {
    background: linear-gradient(180deg, var(--accent-light) 0%, var(--surface) 100%);
}

.hn-hero-eyebrow {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ink-tertiary);
    margin-bottom: var(--s-16);
}

.hn-hero-title {
    font-family: var(--f-display);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ink);
    letter-spacing: -0.5px;
    margin-bottom: var(--s-20);
}

/* 首页 hero 双行大字 */
.hn-hero-title-couplet {
    font-family: var(--f-display);
    font-size: 36px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--ink);
    letter-spacing: -0.3px;
    margin-bottom: var(--s-24);
}

.hn-hero-title-couplet > span {
    display: block;
}

.hn-hero-lede {
    font-size: 15px;
    line-height: 1.85;
    color: var(--ink-secondary);
    max-width: 600px;
}

@media (max-width: 720px) {
    .hn-hero { padding-top: var(--s-64); padding-bottom: var(--s-32); }
    .hn-hero-title { font-size: 30px; }
    .hn-hero-title-couplet { font-size: 24px; }
}

/* ============================================
   Table of Contents — 单列 link list
   反洗钱专栏 / agreements list 共用
   ============================================ */

.toc {
    padding: var(--s-48) var(--pad-x);
}

.toc-inner {
    max-width: var(--content-w);
    margin: 0 auto;
}

.toc-label {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--ink-tertiary);
    margin-bottom: var(--s-16);
}

.toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toc-list li { break-inside: avoid; }

.toc-list a {
    display: block;
    font-family: var(--f-display);
    font-size: 18px;
    color: var(--ink);
    padding: var(--s-8) 0;
    border-bottom: 1px solid var(--hairline);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.toc-list a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* 双列变体 — /information 用，让 6 条链接分两列展示，减少纵向高度 */
.toc-list--columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-48);
}

@media (max-width: 720px) {
    .toc-list--columns { grid-template-columns: 1fr; }
}

/* ============================================
   Section — 通用区块
   ============================================ */

.section {
    padding: var(--s-64) var(--pad-x);
    border-bottom: 1px solid var(--hairline);
}

.section:last-of-type { border-bottom: none; }

.section-inner {
    max-width: var(--content-w);
    margin: 0 auto;
}

.section-eyebrow {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: var(--s-12);
}

.section-title {
    font-family: var(--f-display);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ink);
    margin-bottom: var(--s-32);
    letter-spacing: -0.3px;
}

.section h3 {
    font-family: var(--f-display);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    margin: var(--s-32) 0 var(--s-12);
}

.section h4 {
    font-family: var(--f-body);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin: var(--s-24) 0 var(--s-8);
}

.section p {
    font-size: 16px;
    line-height: 1.85;
    color: var(--ink-secondary);
    margin-bottom: var(--s-16);
}

.section p strong {
    color: var(--ink);
    font-weight: 600;
}

.section ul,
.section ol {
    margin: var(--s-16) 0 var(--s-20);
    padding-left: var(--s-24);
}

.section li {
    font-size: 16px;
    line-height: 1.85;
    color: var(--ink-secondary);
    margin-bottom: var(--s-8);
}

.section li strong {
    color: var(--ink);
    font-weight: 600;
}

@media (max-width: 720px) {
    .section { padding-top: var(--s-48); padding-bottom: var(--s-48); }
    .section-title { font-size: 24px; }
    .section h3 { font-size: 18px; }
}

/* ============================================
   Homepage — flourish HN 视觉照搬
   carousel + 投资者承诺标题 + 4 组数据（icon + label + metric）
   + 交易安全保障（3 张图卡片 + 4 link 横向）
   ============================================ */

/* Carousel */
.hn-carousel {
    margin: 0 auto var(--s-48);
    max-width: 1080px;
    overflow: hidden;
}

.hn-carousel .glide__slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* 投资者体验承诺 — flourish view-container 同款 (max-width 1080 + 20px padding)
   字体走 sans-serif body 栈，与 flourish 一致（不用 serif/Songti） */
.hn-promise {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--s-80) 20px var(--s-48);
}

.hn-promise-title {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.625;
    color: var(--ink);
    text-align: center;
    margin: 0;
}

/* 第一行 H1 顶部留 80px 在 .hn-promise padding 已给；两行间不再留 margin */
.hn-promise-title + .hn-promise-title { margin-top: 0; }

/* 4 组数据 ul.flex-wrap — 70/30/70/30 布局 */
.hn-stats {
    list-style: none;
    padding: 0;
    margin: var(--s-64) 0 0;
    display: flex;
    flex-wrap: wrap;
}

.hn-stats li {
    margin-bottom: var(--s-64);
}

.hn-stats .hn-stat--wide { flex: 0 0 70%; }
.hn-stats .hn-stat--narrow { flex: 0 0 30%; }

.hn-stat h4 {
    display: flex;
    align-items: center;
    font-size: 24px;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 var(--s-20);
    line-height: 1.4;
}

.hn-stat h4 img {
    width: 32px;
    height: 32px;
    margin-right: 8px;
    display: inline-block;
    flex-shrink: 0;
}

.hn-stat h4 .hn-stat-inline-value {
    color: var(--ink-secondary);
    font-weight: 300;
    margin-left: 12px;
    white-space: nowrap;
}

.hn-stat p {
    margin: var(--s-8) 0 0 40px;
    font-size: 18px;
    color: var(--ink-secondary);
    font-weight: 300;
    line-height: 1.6;
}

.hn-stats-note {
    font-size: 14px;
    color: var(--ink-tertiary);
    font-weight: 300;
    line-height: 1.65;
    margin: 0 0 var(--s-24);
}

@media (max-width: 720px) {
    .hn-promise { padding: var(--s-32) 20px var(--s-32); }
    .hn-promise-title { font-size: 20px; line-height: 1.7; }
    .hn-stats { margin-top: var(--s-32); }
    .hn-stats li { margin-bottom: var(--s-32); }
    .hn-stats .hn-stat--wide,
    .hn-stats .hn-stat--narrow { flex: 0 0 100%; }
    .hn-stat h4 { font-size: 18px; }
    .hn-stat p { font-size: 14px; margin-left: 40px; }
}

/* 交易安全保障 — 灰底全宽，内容 view-container 居中 */
.hn-trust {
    background: #F9F9F9;
    border-bottom: 1px solid #D9D9D9;
}

.hn-trust-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--s-64) 20px;
    text-align: center;
}

.hn-trust-title {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.625;
    color: var(--ink);
    margin: 0;
}

.hn-trust-cards {
    list-style: none;
    padding: 0;
    margin: var(--s-48) 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.hn-trust-cards li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 28px 60px;
    margin: 0 16px;
    font-size: 20px;
    color: var(--ink);
}

.hn-trust-cards img {
    height: 104px;
    width: auto;
    margin-bottom: var(--s-16);
}

.hn-trust-cards a { border-bottom: none; }

.hn-trust-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    font-size: 20px;
}

.hn-trust-links li { margin: 0 16px; }

.hn-trust-links a {
    color: var(--ink);
    border-bottom: 1px dotted rgba(0, 0, 0, 0.2);
}

.hn-trust-links a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

@media (max-width: 720px) {
    .hn-trust-inner { padding: var(--s-48) 20px; }
    .hn-trust-title { font-size: 20px; }
    .hn-trust-cards { flex-direction: column; align-items: center; margin: var(--s-32) 0; }
    .hn-trust-cards li { width: 100%; max-width: 280px; margin: var(--s-16) 0; }
    .hn-trust-links { font-size: 16px; }
}

/* ============================================
   Agreement detail — 详情页正文样式
   兼容：有章节 / 无章节 / 有表格 / 有图片 / 有 ordered list / footer signature
   ============================================ */

.agreement-body {
    max-width: var(--content-w);
    margin: 0 auto;
    padding: var(--s-48) 20px var(--s-96);
}

/* Title block — 规整后的"封面 eyebrow + 主标题"组合
   eyebrow 为可选的"海南有知有行基金销售有限公司"等封面公司名 */
.agreement-title-block {
    margin-bottom: var(--s-32);
    padding-bottom: var(--s-24);
    border-bottom: 1px solid var(--hairline);
    text-align: center;
}

.agreement-title-block .eyebrow {
    font-size: 14px;
    color: var(--ink-tertiary);
    font-weight: 400;
    line-height: 1.6;
    margin: 0 0 var(--s-12);
}

.agreement-title-block > h1 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: var(--ink);
    margin: 0;
}

.agreement-body h2 {
    font-family: var(--f-display);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    margin: var(--s-48) 0 var(--s-16);
    padding-top: var(--s-16);
    border-top: 1px dashed var(--hairline);
}

.agreement-body h2:first-of-type {
    margin-top: var(--s-32);
    padding-top: 0;
    border-top: none;
}

.agreement-body h3 {
    font-family: var(--f-display);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink);
    margin: var(--s-32) 0 var(--s-12);
}

.agreement-body h4 {
    font-family: var(--f-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin: var(--s-24) 0 var(--s-8);
}

.agreement-body p {
    font-size: 15px;
    line-height: 1.85;
    color: var(--ink-secondary);
    margin-bottom: var(--s-12);
}

.agreement-body p strong:first-child,
.agreement-body p strong {
    color: var(--ink);
    font-weight: 600;
    margin-right: 2px;
}

.agreement-body ul,
.agreement-body ol {
    margin: var(--s-12) 0 var(--s-16);
    padding-left: var(--s-24);
}

.agreement-body li {
    font-size: 15px;
    line-height: 1.85;
    color: var(--ink-secondary);
    margin-bottom: var(--s-4);
}

.agreement-body li strong {
    color: var(--ink);
    font-weight: 600;
}

/* 图片 — 经营证券期货业务许可证等 */
.agreement-body figure {
    margin: var(--s-32) 0;
    text-align: center;
}

.agreement-body figure img {
    margin: 0 auto;
    max-width: 100%;
    border-radius: var(--r-md);
    border: 1px solid var(--hairline);
    background: var(--surface-card);
}

.agreement-body figcaption {
    font-size: 13px;
    color: var(--ink-tertiary);
    margin-top: var(--s-8);
    line-height: 1.6;
}

/* 表格 — 公募基金风险评级指引等 */
.agreement-body .table-wrap {
    overflow-x: auto;
    margin: var(--s-20) 0;
}

.agreement-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.6;
}

.agreement-body table td {
    border: 1px solid var(--hairline);
    padding: var(--s-8) var(--s-12);
    vertical-align: top;
    color: var(--ink-secondary);
    min-width: 100px;
}

.agreement-body table td strong { color: var(--ink); }

/* 落款（footer signature 区） */
.agreement-body .signature {
    margin-top: var(--s-48);
    padding-top: var(--s-24);
    border-top: 1px solid var(--hairline);
    color: var(--ink-secondary);
    font-size: 14px;
    line-height: 1.85;
}

.agreement-body .signature.align-right { text-align: right; }
.agreement-body .signature.align-center { text-align: center; }

@media (max-width: 720px) {
    .agreement-body { padding: var(--s-32) var(--s-20) var(--s-64); }
    .agreement-body > h1 { font-size: 24px; }
    .agreement-body h2 { font-size: 18px; }
    .agreement-body h3 { font-size: 16px; }
}

/* ============================================
   Section rail — 左上悬挂目录（PC 独占）
   reused: agreements 详情页章节导航（有 H2 时启用）
   ============================================ */

.section-rail {
    position: fixed;
    top: 96px;
    left: max(20px, calc((100vw - var(--content-w)) / 2 - 252px));
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 5;

    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.section-rail.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.section-rail a {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--ink-tertiary);
    border-bottom: none;
    padding: 2px 0;
    transition: color 0.18s ease;
}

.section-rail .rail-num {
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.5px;
    color: var(--ink-tertiary);
    flex-shrink: 0;
    padding-top: 1px;
}

.section-rail .rail-name {
    flex: 1 1 auto;
    min-width: 0;
}

.section-rail a:hover,
.section-rail a:focus-visible { color: var(--ink-secondary); }

.section-rail a:hover .rail-num,
.section-rail a:focus-visible .rail-num { color: var(--ink-secondary); }

.section-rail a.is-active,
.section-rail a.is-active .rail-num { color: var(--accent); }

/* 窄屏隐藏 */
@media (max-width: 1080px) {
    .section-rail { display: none !important; }
}

/* ============================================
   Footer
   ============================================ */

.page-footer {
    padding: var(--s-32) var(--pad-x);
    background: var(--surface-soft);
    color: var(--ink-tertiary);
    font-size: 12px;
    line-height: 1.7;
    border-top: 1px solid var(--hairline);
}

.page-footer-inner {
    max-width: var(--content-w);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-32);
    flex-wrap: wrap;
}

.page-footer .footer-meta p { margin: 0 0 var(--s-4); }

.page-footer .footer-gongan {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.page-footer .footer-gongan img {
    width: 14px;
    height: auto;
    display: inline-block;
}

.page-footer .footer-meta a {
    text-decoration: underline;
    text-decoration-color: rgba(0, 0, 0, 0.18);
    text-underline-offset: 2px;
}

.page-footer a {
    color: var(--ink-secondary);
    border-bottom: none;
    text-decoration: none;
}

.page-footer a:hover { color: var(--accent); }

.footer-links {
    display: flex;
    gap: var(--s-12);
    align-items: center;
}

.footer-links a { color: var(--ink-secondary); font-size: 12px; }

@media (max-width: 720px) {
    .page-footer-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-16);
    }
    .footer-links { flex-wrap: wrap; }
}

/* ============================================
   Utility
   ============================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .section-rail { transition: none; }
}