/*
 * landing.css — 前台营销区块（首页 hero / 步骤 / 功能卡 / 定价 / FAQ / 页脚）的样式。
 * 令牌先于组件：颜色全部取自现有 inspinia 主题（style.css）已在用的值，不另起一套色板。
 * 依据：docs/施工计划-变现Phase1-2026-09-07.md 第三批；playbooks/构建-落地页设计与验收.md 第 2 步。
 */

:root {
    /* 颜色（与 inspinia 一致） */
    --amz-primary: #1ab394;
    --amz-primary-dark: #18a689;
    --amz-primary-soft: #e8f7f3;
    --amz-ink: #2f4050;
    --amz-text: #676a6c;
    --amz-muted: #9aa4b1;
    --amz-line: #e7eaec;
    --amz-bg: #f3f3f4;
    --amz-white: #ffffff;
    --amz-accent: #f8ac59;
    --amz-danger: #ed5565;

    /* 间距（8 的倍数，四档） */
    --amz-sp-1: 8px;
    --amz-sp-2: 16px;
    --amz-sp-3: 24px;
    --amz-sp-4: 40px;
    --amz-sp-5: 64px;

    /* 字号（四档） */
    --amz-fs-xl: 34px;
    --amz-fs-lg: 24px;
    --amz-fs-md: 16px;
    --amz-fs-sm: 13px;

    --amz-radius: 6px;
    --amz-shadow: 0 1px 3px rgba(47, 64, 80, .08), 0 8px 24px rgba(47, 64, 80, .06);
    --amz-container: 1100px;
}

/* ---------- 通用 ---------- */
.amz-container { max-width: var(--amz-container); margin: 0 auto; padding: 0 var(--amz-sp-2); }
.amz-section { padding: var(--amz-sp-5) 0; }
.amz-section--tight { padding: var(--amz-sp-4) 0; }
.amz-section--alt { background: var(--amz-white); border-top: 1px solid var(--amz-line); border-bottom: 1px solid var(--amz-line); }
.amz-section h2 { font-size: var(--amz-fs-lg); font-weight: 600; color: var(--amz-ink); margin: 0 0 var(--amz-sp-1); text-align: center; }
.amz-section .amz-sub { color: var(--amz-text); text-align: center; margin: 0 auto var(--amz-sp-4); max-width: 640px; font-size: var(--amz-fs-md); }
.amz-grid { display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--amz-sp-2)); }
.amz-grid > * { padding: 0 var(--amz-sp-2) var(--amz-sp-3); box-sizing: border-box; }
.amz-grid--3 > * { width: 33.333%; }
.amz-grid--4 > * { width: 25%; }
.amz-grid--2 > * { width: 50%; }
@media (max-width: 767px) {
    .amz-grid--3 > *, .amz-grid--4 > *, .amz-grid--2 > * { width: 100%; }
}

.amz-btn { display: inline-block; padding: 12px 22px; border-radius: var(--amz-radius); font-size: var(--amz-fs-md); font-weight: 600; text-decoration: none !important; line-height: 1.2; border: 1px solid transparent; cursor: pointer; }
.amz-btn:focus-visible { outline: 3px solid var(--amz-accent); outline-offset: 2px; }
.amz-btn--primary { background: var(--amz-primary); color: var(--amz-white) !important; border-color: var(--amz-primary); }
.amz-btn--primary:hover { background: var(--amz-primary-dark); }
.amz-btn--ghost { background: var(--amz-white); color: var(--amz-ink) !important; border-color: var(--amz-line); }
.amz-btn--ghost:hover { border-color: var(--amz-ink); }
.amz-btn--block { display: block; text-align: center; width: 100%; }
.amz-btn[disabled], .amz-btn--disabled { background: var(--amz-bg); color: var(--amz-muted) !important; border-color: var(--amz-line); cursor: not-allowed; }

/* ---------- 首页 hero ---------- */
.amz-hero { background: var(--amz-white); border-bottom: 1px solid var(--amz-line); padding: var(--amz-sp-5) 0 var(--amz-sp-4); }
.amz-hero .amz-container { display: flex; flex-wrap: wrap; align-items: center; gap: var(--amz-sp-4); }
.amz-hero__copy { flex: 1 1 380px; text-align: left; }
.amz-hero__visual { flex: 1 1 420px; min-width: 0; }
.amz-hero__eyebrow { display: inline-block; font-size: var(--amz-fs-sm); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--amz-primary-dark); background: var(--amz-primary-soft); padding: 4px 10px; border-radius: 999px; margin-bottom: var(--amz-sp-2); }
.amz-hero h1 { font-size: var(--amz-fs-xl); line-height: 1.2; font-weight: 700; color: var(--amz-ink); margin: 0 0 var(--amz-sp-2); }
.amz-hero__lead { font-size: 17px; color: var(--amz-text); margin: 0 0 var(--amz-sp-3); max-width: 520px; }
.amz-hero__actions { display: flex; flex-wrap: wrap; gap: var(--amz-sp-2); align-items: center; }
.amz-hero__fineprint { font-size: var(--amz-fs-sm); color: var(--amz-muted); margin-top: var(--amz-sp-2); }
.amz-hero__visual img { width: 100%; height: auto; display: block; border: 1px solid var(--amz-line); border-radius: var(--amz-radius); box-shadow: var(--amz-shadow); }
.amz-hero__caption { font-size: var(--amz-fs-sm); color: var(--amz-muted); text-align: center; margin-top: var(--amz-sp-1); }
@media (max-width: 767px) {
    .amz-hero { padding: var(--amz-sp-4) 0 var(--amz-sp-3); }
    .amz-hero h1 { font-size: 26px; }
}

/* ---------- 信任条（真实读数） ---------- */
.amz-trust { background: var(--amz-bg); padding: var(--amz-sp-3) 0; }
.amz-trust__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--amz-sp-4); text-align: center; }
.amz-trust__num { font-size: var(--amz-fs-lg); font-weight: 700; color: var(--amz-ink); font-variant-numeric: tabular-nums; }
.amz-trust__label { font-size: var(--amz-fs-sm); color: var(--amz-text); }
.amz-trust__src { display: block; text-align: center; font-size: 12px; color: var(--amz-muted); margin-top: var(--amz-sp-2); }

/* ---------- 工具区锚点 ---------- */
.amz-tool-heading { text-align: left; margin: 0 0 var(--amz-sp-1); font-size: var(--amz-fs-lg); font-weight: 600; color: var(--amz-ink); }
.amz-tool-lead { color: var(--amz-text); margin: 0 0 var(--amz-sp-2); text-align: left; }

/* ---------- 步骤条 ---------- */
.amz-step { background: var(--amz-white); border: 1px solid var(--amz-line); border-radius: var(--amz-radius); padding: var(--amz-sp-3); height: 100%; text-align: left; }
.amz-step__n { display: inline-flex; width: 32px; height: 32px; border-radius: 50%; background: var(--amz-primary); color: var(--amz-white); font-weight: 700; align-items: center; justify-content: center; margin-bottom: var(--amz-sp-2); }
.amz-step h3 { font-size: var(--amz-fs-md); font-weight: 600; color: var(--amz-ink); margin: 0 0 var(--amz-sp-1); }
.amz-step p { color: var(--amz-text); margin: 0; font-size: 14px; }
.amz-step code { background: var(--amz-bg); color: var(--amz-ink); padding: 1px 5px; border-radius: 3px; font-size: 13px; }

/* ---------- 功能卡 ---------- */
.amz-card { background: var(--amz-white); border: 1px solid var(--amz-line); border-radius: var(--amz-radius); padding: var(--amz-sp-3); height: 100%; text-align: left; }
.amz-card__icon { color: var(--amz-primary); font-size: 22px; margin-bottom: var(--amz-sp-2); }
.amz-card h3 { font-size: var(--amz-fs-md); font-weight: 600; color: var(--amz-ink); margin: 0 0 var(--amz-sp-1); }
.amz-card ul { list-style: none; padding: 0; margin: 0; }
.amz-card li { color: var(--amz-text); font-size: 14px; padding: 4px 0 4px 20px; position: relative; }
.amz-card li::before { content: "\f00c"; font-family: FontAwesome; color: var(--amz-primary); position: absolute; left: 0; top: 5px; font-size: 12px; }
.amz-card__tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--amz-ink); background: var(--amz-bg); border-radius: 3px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }

/* ---------- 定价卡 ---------- */
.amz-billing { display: flex; justify-content: center; align-items: center; gap: var(--amz-sp-2); margin: 0 auto var(--amz-sp-4); }
.amz-billing__btn { background: var(--amz-white); border: 1px solid var(--amz-line); color: var(--amz-ink); padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; }
.amz-billing__btn[aria-pressed="true"] { background: var(--amz-ink); color: var(--amz-white); border-color: var(--amz-ink); }
.amz-billing__btn:focus-visible { outline: 3px solid var(--amz-accent); outline-offset: 2px; }
.amz-billing__save { font-size: 12px; font-weight: 700; color: var(--amz-primary-dark); background: var(--amz-primary-soft); padding: 2px 8px; border-radius: 999px; margin-left: 6px; }
.amz-plan { background: var(--amz-white); border: 1px solid var(--amz-line); border-radius: var(--amz-radius); padding: var(--amz-sp-3); height: 100%; position: relative; text-align: left; display: flex; flex-direction: column; }
.amz-plan--featured { border: 2px solid var(--amz-primary); box-shadow: var(--amz-shadow); }
.amz-plan__ribbon { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--amz-primary); color: var(--amz-white); font-size: 12px; font-weight: 700; padding: 3px 12px; border-radius: 999px; white-space: nowrap; }
.amz-plan__current { position: absolute; top: 12px; right: 12px; background: var(--amz-ink); color: var(--amz-white); font-size: 11px; padding: 2px 8px; border-radius: 3px; }
.amz-plan h3 { font-size: 20px; font-weight: 700; color: var(--amz-ink); margin: 0 0 2px; }
.amz-plan__who { font-size: var(--amz-fs-sm); color: var(--amz-muted); min-height: 18px; }
.amz-plan__price { margin: var(--amz-sp-2) 0 2px; font-size: 36px; font-weight: 700; color: var(--amz-ink); line-height: 1; font-variant-numeric: tabular-nums; }
.amz-plan__price small { font-size: 14px; font-weight: 400; color: var(--amz-muted); }
.amz-plan__billed { font-size: var(--amz-fs-sm); color: var(--amz-muted); min-height: 18px; margin-bottom: var(--amz-sp-2); }
.amz-plan ul { list-style: none; padding: 0; margin: 0 0 var(--amz-sp-3); flex: 1; }
.amz-plan li { font-size: 14px; color: var(--amz-ink); padding: 6px 0 6px 22px; position: relative; border-top: 1px solid var(--amz-bg); }
.amz-plan li:first-child { border-top: 0; }
.amz-plan li::before { content: "\f00c"; font-family: FontAwesome; color: var(--amz-primary); position: absolute; left: 0; top: 7px; font-size: 12px; }
.amz-plan li.is-off { color: var(--amz-muted); }
.amz-plan li.is-off::before { content: "\f00d"; color: #d3dbe3; }
.amz-plan__cta { margin-top: auto; }
.amz-plan__cta .amz-btn + .amz-btn { margin-top: var(--amz-sp-1); }
.amz-plan__note { font-size: 12px; color: var(--amz-muted); margin-top: var(--amz-sp-1); text-align: center; }
[data-billing="monthly"] .amz-only-yearly, [data-billing="yearly"] .amz-only-monthly { display: none !important; }

/* ---------- 对比表 ---------- */
.amz-compare { width: 100%; border-collapse: collapse; background: var(--amz-white); border: 1px solid var(--amz-line); font-size: 14px; }
.amz-compare th, .amz-compare td { padding: 10px 12px; border-top: 1px solid var(--amz-line); text-align: center; color: var(--amz-ink); }
.amz-compare th { background: var(--amz-bg); font-weight: 600; }
.amz-compare td:first-child, .amz-compare th:first-child { text-align: left; }
.amz-compare .fa-check { color: var(--amz-primary); }
.amz-compare .fa-times { color: #d3dbe3; }
.amz-compare-wrap { overflow-x: auto; }

/* ---------- FAQ ---------- */
.amz-faq { max-width: 760px; margin: 0 auto; text-align: left; }
.amz-faq details { background: var(--amz-white); border: 1px solid var(--amz-line); border-radius: var(--amz-radius); padding: 0 var(--amz-sp-2); margin-bottom: var(--amz-sp-1); }
.amz-faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--amz-ink); list-style: none; position: relative; padding-right: 28px; }
.amz-faq summary::-webkit-details-marker { display: none; }
.amz-faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; color: var(--amz-muted); font-size: 18px; }
.amz-faq details[open] summary::after { content: "−"; }
.amz-faq summary:focus-visible { outline: 3px solid var(--amz-accent); outline-offset: 2px; }
.amz-faq p { color: var(--amz-text); margin: 0 0 14px; font-size: 14px; }

/* ---------- 末尾 CTA ---------- */
.amz-final { background: var(--amz-ink); color: var(--amz-white); text-align: center; padding: var(--amz-sp-5) 0; }
.amz-final h2 { color: var(--amz-white); }
.amz-final p { color: #c7d0d9; margin: 0 auto var(--amz-sp-3); max-width: 560px; }

/* ---------- 页脚 ---------- */
.amz-footer { background: var(--amz-white); border-top: 1px solid var(--amz-line); padding: var(--amz-sp-4) 0 var(--amz-sp-3); font-size: var(--amz-fs-sm); color: var(--amz-text); text-align: left; }
.amz-footer h4 { font-size: var(--amz-fs-sm); font-weight: 700; color: var(--amz-ink); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 var(--amz-sp-1); }
.amz-footer ul { list-style: none; padding: 0; margin: 0; }
.amz-footer li { padding: 3px 0; }
.amz-footer a { color: var(--amz-text); }
.amz-footer a:hover { color: var(--amz-primary-dark); }
.amz-footer__legal { border-top: 1px solid var(--amz-line); margin-top: var(--amz-sp-3); padding-top: var(--amz-sp-2); color: var(--amz-muted); font-size: 12px; }

/* 老布局里 wrapper 的顶部留白在有 hero 时不需要 */
.amz-has-hero .wrapper-content { padding-top: var(--amz-sp-3); }

/* 有 hero 的页面：工具区不用再撑 70vh 的最小高度（那是旧「打开即工具」布局的留白） */
.amz-has-hero .wrapper-content .ibox-content { min-height: 0 !important; }