:root { --orange:#ff6b35; --orange-deep:#e55a2b; --orange-soft:#fff4f0; --ink:#1d1d1f; --muted:#6e6e73; --line:rgba(29,29,31,.09); --bg:#f5f5f7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; line-height:1.6; overscroll-behavior-y:none; touch-action:manipulation; -webkit-text-size-adjust:100%; }
a { color:inherit; text-decoration:none; }
.shell { width:100%; max-width:430px; min-height:100dvh; margin:0 auto; padding:0 20px calc(36px + env(safe-area-inset-bottom)); background:var(--bg); box-shadow:0 0 38px rgba(29,29,31,.08); }
.nav { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px; padding-top:calc(10px + env(safe-area-inset-top)); background:linear-gradient(180deg,var(--bg) 72%,rgba(245,245,247,0)); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.02em; }
.brand-mark { display:grid; width:32px; height:32px; place-items:center; border-radius:11px; background:var(--orange); color:white; box-shadow:0 8px 20px rgba(255,107,53,.25); }
.brand-mark svg { width:19px; height:19px; }
.nav-link { font-size:13px; color:var(--muted); font-weight:650; }
.hero { padding:28px 22px; border-radius:28px; background:linear-gradient(135deg,#fff8f5 0%,#fff 62%,#fff0e9 100%); box-shadow:0 1px 0 white inset,0 15px 36px rgba(29,29,31,.05); }
.eyebrow { margin:0 0 8px; color:var(--orange); font-size:13px; font-weight:800; letter-spacing:.08em; }
h1 { margin:0; font-size:clamp(30px,7vw,46px); line-height:1.13; letter-spacing:-.04em; }
h2 { margin:0; font-size:22px; line-height:1.3; letter-spacing:-.02em; }
h3 { margin:0; font-size:16px; line-height:1.4; }
.lede { margin:14px 0 0; max-width:590px; color:var(--muted); font-size:15px; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.button { display:inline-flex; min-height:46px; align-items:center; justify-content:center; gap:8px; padding:0 17px; border-radius:18px; background:linear-gradient(180deg,#ff7a45 0%,#ff6b35 100%); color:white; font-size:14px; font-weight:750; box-shadow:0 12px 28px rgba(255,107,53,.24); transition:transform 160ms ease,box-shadow 160ms ease; }
.button:active,.card:active { transform:scale(.97); }
.button.secondary { background:white; color:var(--orange-deep); box-shadow:0 0 0 1px rgba(255,107,53,.18); }
.section { margin-top:30px; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:12px; }
.section-head p { margin:4px 0 0; color:var(--muted); font-size:13px; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.card,.notice,details { border:1px solid var(--line); border-radius:22px; background:#fff; box-shadow:0 5px 16px rgba(29,29,31,.025); }
.card { display:block; padding:18px; transition:transform .18s ease,box-shadow .18s ease; }
.card:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(29,29,31,.07); }
.icon { display:grid; width:39px; height:39px; place-items:center; border-radius:14px; background:var(--orange-soft); color:var(--orange); }
.icon svg { width:20px; height:20px; stroke-width:2; }
.card h3 { margin-top:13px; }
.card p,.step p,.notice p,.faq-copy { margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.65; }
.arrow { display:block; margin-top:13px; color:var(--orange); font-size:13px; font-weight:750; }
.notice { padding:17px; background:var(--orange-soft); border-color:rgba(255,107,53,.16); }
.notice strong { color:var(--orange-deep); }
.notice.warning { background:#fff8e9; border-color:rgba(197,137,0,.2); }
.notice.warning strong { color:#8a5a00; }
.steps { display:grid; gap:10px; }
.channel-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:4px; border:1px solid var(--line); border-radius:22px; background:white; box-shadow:0 5px 16px rgba(29,29,31,.025); }
.channel-tab { min-height:44px; border:0; border-radius:18px; background:transparent; color:var(--muted); font:inherit; font-size:12px; font-weight:750; line-height:1.2; cursor:pointer; transition:background .2s,color .2s,box-shadow .2s,transform .16s; }
.channel-tab:active { transform:scale(.97); }
.channel-tab[aria-selected="true"] { background:linear-gradient(180deg,#ff7a45 0%,#ff6b35 100%); color:white; box-shadow:0 9px 20px rgba(255,107,53,.25); }
.channel-panel { display:none; margin-top:16px; animation:channel-panel-in .22s ease-out both; }
.channel-panel.is-active { display:block; }
.channel-panel .panel-intro { margin:0 0 13px; color:var(--muted); font-size:13px; }
.step { display:flex; gap:13px; padding:17px; border:1px solid var(--line); border-radius:20px; background:white; }
.step-num { display:grid; flex:0 0 29px; height:29px; place-items:center; border-radius:50%; background:var(--orange-soft); color:var(--orange-deep); font-size:13px; font-weight:800; }
.step p { margin-top:3px; }
.step strong { font-size:15px; }
.compare { width:100%; overflow:hidden; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:20px; background:white; font-size:13px; }
.compare th,.compare td { padding:13px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.compare th { color:var(--muted); font-weight:700; background:#fafafa; }
.compare tr:last-child td { border-bottom:0; }
details { padding:0 16px; overflow:hidden; }
summary { cursor:pointer; padding:16px 25px 16px 0; font-size:15px; font-weight:750; list-style:none; position:relative; }
summary::after { content:"+"; position:absolute; right:0; color:var(--orange); font-size:21px; font-weight:400; }
details[open] summary::after { content:"−"; }
.faq-copy { padding:0 0 16px; }
.faq-copy ul { margin:8px 0 0; padding-left:19px; }
.footer { margin-top:36px; padding-top:20px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; text-align:center; }
.footer a { color:var(--orange-deep); font-weight:700; }
.back-top { position:fixed; right:18px; bottom:18px; width:42px; height:42px; border:0; border-radius:15px; background:white; color:var(--orange); box-shadow:0 8px 25px rgba(29,29,31,.13); cursor:pointer; opacity:0; pointer-events:none; transition:opacity .2s; }
.back-top.show { opacity:1; pointer-events:auto; }
.back-top svg { width:18px; height:18px; }
@keyframes channel-panel-in { from { opacity:0; transform:translateX(8px); } to { opacity:1; transform:translateX(0); } }
@media (max-width:430px) { .shell { padding-left:16px; padding-right:16px; } .nav { min-height:62px; } .hero { padding:28px 22px; border-radius:26px; } .grid { grid-template-columns:1fr; } .compare { display:block; overflow-x:auto; white-space:normal; } }