/* Calm dark surfaces, legible typography, clearly labeled illustrations. */
:root { color-scheme: dark; --bg: #0b0c0e; --surface: #111215; --text: #edeef1; --muted: #a4a6b0; --subtle: #81848f; --line: #292b32; --accent: #b5b8ef; --font: "SF Pro Display", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.7 var(--font); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a, summary { -webkit-tap-highlight-color: transparent; }
a:hover { color: var(--text); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 3px; }
::selection { background: #555975; color: #f5f5fa; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 550; }
h1, h2 { text-wrap: balance; letter-spacing: -.045em; }
h3 { letter-spacing: -.02em; line-height: 1.45; }
p { text-wrap: pretty; }
.wrap, .header-inner, .site-footer { width: min(1120px, calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; left: 24px; top: -100px; padding: 10px 18px; background: var(--text); color: var(--bg); }
.skip-link:focus { top: 12px; color: var(--bg); }
.site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid #202127; }
.header-inner { min-height: 76px; display: flex; align-items: center; gap: 36px; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.brand img, .illustration-heading img { border-radius: 8px; }
.primary-nav { margin-left: auto; display: flex; align-items: center; gap: 30px; font-size: 13px; color: var(--muted); }
.primary-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.language-menu { position: relative; font-size: 13px; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.language-menu summary { display: flex; justify-content: center; align-items: center; gap: 9px; min-height: 44px; min-width: 54px; color: var(--muted); }
.language-menu[open] summary { color: var(--text); }
.language-popover { position: absolute; right: 0; top: calc(100% + 8px); width: 216px; padding: 7px; border: 1px solid #3b3d47; border-radius: 10px; background: #1b1c22; box-shadow: 0 16px 48px #0005; }
.language-popover a { display: flex; align-items: center; min-height: 44px; padding-inline: 12px; border-radius: 5px; }
.language-popover a:hover, .language-popover a[aria-current] { background: #2b2d37; }
.hero { display: grid; grid-template-columns: 1.18fr 1fr; gap: 64px; align-items: center; padding-block: 100px 104px; }
.eyebrow { font-size: 12px; color: var(--accent); font-weight: 500; letter-spacing: .045em; line-height: 1.6; margin-bottom: 24px; }
h1 { font-size: clamp(38px, 4.2vw, 59px); line-height: 1.17; }
h1 span:last-child { color: var(--muted); }
:lang(zh-CN) h1 { font-size: clamp(42px, 4.9vw, 66px); line-height: 1.35; letter-spacing: -.035em; }
:lang(pt-BR) h1, :lang(es-MX) h1 { font-size: clamp(34px, 3.8vw, 51px); }
.hero-body { max-width: 465px; margin-top: 26px; font-size: 17px; line-height: 1.85; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 11px 20px; background: #202126; color: #e9eaf0; border: 1px solid #3a3c45; border-radius: 7px; font-size: 14px; font-weight: 550; line-height: 1.5; box-shadow: inset 0 1px 0 #ffffff08; transition: background .18s ease-out, border-color .18s ease-out, color .18s ease-out; }
.button:hover { color: #f5f5f7; background: #292a31; border-color: #50525e; }
.button:active { background: #1b1c21; border-color: #444650; }
.button:focus-visible { outline-color: #d0d2ff; outline-offset: 3px; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; text-decoration: underline; text-decoration-color: #4b4d58; text-underline-offset: 5px; transition: color .18s ease-out, text-decoration-color .18s ease-out; }
.text-link:hover { color: var(--accent); }
.compatibility { font-size: 12px; color: var(--subtle); margin-top: 21px; }
.product-illustration { align-self: center; max-width: 450px; width: 100%; margin-left: auto; animation: appear .8s ease-out both; }
.product-illustration figcaption { font-size: 11px; color: var(--subtle); text-align: right; margin-bottom: 13px; letter-spacing: .04em; }
.illustration-content { background: var(--surface); border: 1px solid #34363e; border-radius: 17px; padding: 28px; box-shadow: 0 24px 65px #0003; }
.illustration-heading { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.illustration-title { font-size: 24px; font-weight: 500; letter-spacing: -.035em; margin: 22px 0; line-height: 1.45; }
.incoming { display: flex; align-items: center; gap: 17px; padding: 21px 0; border-block: 1px solid var(--line); }
.incoming svg { flex: 0 0 25px; width: 25px; stroke: var(--muted); stroke-width: 1.3; stroke-linejoin: round; }
.incoming strong, .library-row strong { display: block; font-size: 14px; font-weight: 500; }
.incoming span, .library-row div span { display: block; color: var(--subtle); font-size: 12px; margin-top: 4px; }
.choice-list { padding-block: 13px 18px; }
.choice-list > div { display: flex; align-items: center; gap: 12px; padding-block: 9px; font-size: 13px; color: #c6c8d1; }
.choice-symbol { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; border: 1px solid #48414a; border-radius: 50%; color: #d9b8bb; font-size: 16px; }
.choice-symbol.allow { color: #b6c7c0; border-color: #3c4843; font-size: 12px; }
.library-row { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid #33343e; background: #1a1b22; border-radius: 8px; }
.library-symbol { font-size: 29px; line-height: 1; color: var(--accent); }
.illustration-foot { font-size: 11px; color: var(--subtle); padding-top: 18px; text-align: center; }
.section { padding-block: 88px; }
.community { border-top: 1px solid var(--line); }
h2 { font-size: clamp(29px, 3.2vw, 42px); line-height: 1.35; }
:lang(zh-CN) h2 { letter-spacing: -.025em; line-height: 1.5; }
.section-heading { max-width: 700px; }
.lede { max-width: 620px; color: var(--muted); margin-top: 20px; font-size: 16px; line-height: 1.9; }
.community-steps { padding: 0; margin: 50px 0 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.community-steps li { position: relative; padding-top: 24px; border-top: 1px solid #444650; }
.step-marker { display: block; font-size: 12px; color: var(--accent); margin-bottom: 22px; font-variant-numeric: tabular-nums; }
.community-steps h3 { font-size: 19px; margin-bottom: 12px; }
.community-steps p, .feature p { color: var(--muted); font-size: 14px; line-height: 1.9; }
.availability { color: var(--subtle); font-size: 12px; line-height: 1.8; padding-left: 13px; border-left: 2px solid #505268; margin-top: 30px; max-width: 800px; }
#features { border-top: 1px solid var(--line); }
.split-heading { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; align-items: start; }
.split-heading .eyebrow { margin-top: 13px; }
.features { margin-top: 45px; }
.feature { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; padding-block: 30px; border-top: 1px solid var(--line); }
.feature-label { font-size: 12px; color: var(--subtle); }
.feature h3 { font-size: 21px; max-width: 245px; }
.privacy-band { background: #101115; border-block: 1px solid var(--line); }
.trust-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.trust-layout .text-link { margin-top: 27px; color: var(--accent); }
.trust-list { list-style: none; padding: 0; margin: 0; }
.trust-list li + li { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.trust-list h3 { font-size: 17px; margin-bottom: 9px; }
.trust-list p { color: var(--muted); font-size: 14px; line-height: 1.9; }
.faq-layout { display: grid; grid-template-columns: 1fr 1.65fr; gap: 70px; }
.faq-layout h2 { font-size: 30px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; gap: 20px; justify-content: space-between; padding-block: 23px; font-size: 16px; line-height: 1.6; }
.faq-item summary > span { color: var(--subtle); font-size: 21px; flex-shrink: 0; transition: transform .18s; }
.faq-item[open] summary > span { transform: rotate(45deg); }
.faq-item p { margin-bottom: 24px; color: var(--muted); font-size: 14px; line-height: 1.9; max-width: 580px; }
.final-cta { display: flex; align-items: center; justify-content: space-between; gap: 50px; border-top: 1px solid var(--line); padding-block: 66px 82px; }
.final-cta h2 { font-size: 30px; }
.final-cta p { color: var(--muted); font-size: 14px; margin-top: 10px; }
.final-cta .button { flex-shrink: 0; }
.site-footer { border-top: 1px solid var(--line); padding-block: 35px 30px; }
.footer-top, .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.footer-top nav { display: flex; flex-wrap: wrap; gap: 8px 25px; font-size: 12px; color: var(--muted); }
.footer-top nav a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-bottom { margin-top: 27px; color: var(--subtle); font-size: 11px; align-items: start; }
.footer-bottom a { flex-shrink: 0; min-height: 30px; }
.document-page { padding-block: 75px 90px; }
.document-hero { max-width: 810px; margin-bottom: 64px; }
.document-hero h1 { font-size: clamp(36px, 5vw, 58px); line-height: 1.3; }
.document-hero p:last-child { font-size: 17px; color: var(--muted); margin-top: 24px; line-height: 1.9; }
.document-layout { display: grid; grid-template-columns: 245px minmax(0, 1fr); gap: 80px; align-items: start; }
.toc { position: sticky; top: 110px; max-height: calc(100vh - 145px); overflow-y: auto; font-size: 12px; padding-right: 12px; }
.toc > p { color: var(--subtle); margin-bottom: 14px; }
.toc nav { display: flex; flex-direction: column; gap: 4px; }
.toc a { display: flex; gap: 13px; padding-block: 8px; color: var(--muted); }
.toc a:hover { color: var(--text); }
.toc span { color: var(--subtle); font-variant-numeric: tabular-nums; }
.legal-document { min-width: 0; }
.legal-document section { padding-top: 28px; border-top: 1px solid var(--line); margin-bottom: 38px; }
.legal-document h2 { font-size: 24px; margin-bottom: 19px; letter-spacing: -.015em; display: flex; align-items: baseline; gap: 14px; }
.legal-document h2 span { font-size: 12px; font-weight: 400; color: var(--subtle); flex-shrink: 0; }
.legal-document p { color: #b2b4be; font-size: 15px; line-height: 2; margin-top: 14px; overflow-wrap: anywhere; }
.source-links ul { list-style: none; margin: 0; padding: 0; }
.source-links a { display: inline-flex; padding-block: 10px; font-size: 14px; color: var(--accent); text-decoration: underline; text-decoration-color: #505267; text-underline-offset: 5px; }
.facts-list { margin: 0; max-width: 920px; }
.facts-list > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 32px; padding-block: 24px; border-top: 1px solid var(--line); }
.facts-list dt { color: var(--subtle); font-size: 14px; }
.facts-list dd { margin: 0; color: #c2c4ce; font-size: 15px; overflow-wrap: anywhere; }
.facts-cta { margin-top: 36px; }
@keyframes appear { from { transform: translateY(10px); } to { transform: none; } }
@media (min-width: 1600px) { .hero { padding-block: 125px; } }
@media (max-width: 1000px) {
  .wrap, .header-inner, .site-footer { width: calc(100% - 56px); }
  .hero { gap: 32px; padding-block: 75px; }
  .illustration-content { padding: 23px; }
  .illustration-title { font-size: 21px; }
  .trust-layout { gap: 50px; }
  .document-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
  .footer-top { align-items: start; }
  .footer-top nav { justify-content: flex-end; }
}
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 44px; padding-top: 56px; }
  .hero-copy { max-width: 570px; }
  h1, :lang(pt-BR) h1, :lang(es-MX) h1 { font-size: clamp(36px, 7vw, 52px); }
  :lang(zh-CN) h1 { font-size: clamp(42px, 8vw, 60px); }
  .product-illustration { margin-inline: auto; max-width: 520px; }
  .illustration-content { padding: 28px; }
  .community-steps { gap: 22px; }
  .split-heading { grid-template-columns: 1fr; gap: 0; }
  .split-heading .eyebrow { margin-top: 0; }
  .feature { grid-template-columns: .75fr 1.2fr; gap: 12px 30px; }
  .feature-label { grid-column: 1 / -1; }
  .trust-layout, .faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .document-layout { grid-template-columns: 1fr; gap: 38px; }
  .toc { position: static; max-height: none; padding: 22px; border: 1px solid var(--line); border-radius: 8px; }
  .toc nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px; }
  .final-cta { align-items: start; flex-direction: column; gap: 28px; }
}
@media (max-width: 620px) {
  html { scroll-padding-top: 128px; }
  .wrap, .header-inner, .site-footer { width: calc(100% - 40px); }
  .header-inner { flex-wrap: wrap; gap: 0; min-height: 100px; padding-top: 8px; padding-bottom: 3px; }
  .brand { font-size: 16px; }
  .language-menu { margin-left: auto; }
  .primary-nav { order: 3; flex-basis: 100%; justify-content: space-between; gap: 16px; margin-left: 0; font-size: 12px; }
  .primary-nav a { min-height: 39px; }
  .hero { padding-block: 45px 58px; }
  .hero .eyebrow { font-size: 11px; margin-bottom: 20px; }
  .hero-body { font-size: 16px; margin-top: 23px; }
  .hero-actions { margin-top: 26px; gap: 13px 20px; }
  .compatibility { margin-top: 13px; }
  .product-illustration figcaption { font-size: 10px; }
  .illustration-content { padding: 23px; border-radius: 12px; }
  .section { padding-block: 58px; }
  .eyebrow { margin-bottom: 17px; }
  h2 { font-size: 29px; }
  .lede { font-size: 15px; }
  .community-steps { grid-template-columns: 1fr; gap: 24px; margin-top: 34px; }
  .community-steps li { padding-top: 20px; padding-left: 43px; }
  .step-marker { position: absolute; left: 0; top: 24px; margin: 0; }
  .community-steps h3 { font-size: 18px; margin-bottom: 8px; }
  .availability { margin-top: 25px; }
  .features { margin-top: 32px; }
  .feature { grid-template-columns: 1fr; gap: 11px; padding-block: 24px; }
  .feature h3 { max-width: none; font-size: 20px; }
  .trust-list li + li { margin-top: 24px; padding-top: 24px; }
  .faq-layout h2 { font-size: 28px; }
  .faq-item summary { font-size: 15px; }
  .final-cta { padding-block: 48px 57px; }
  .final-cta h2 { font-size: 27px; }
  .footer-top { display: block; }
  .footer-top nav { margin-top: 19px; justify-content: flex-start; gap: 0 23px; }
  .footer-bottom { display: block; margin-top: 16px; }
  .footer-bottom a { display: block; margin-top: 15px; }
  .document-page { padding-block: 43px 50px; }
  .document-hero { margin-bottom: 35px; }
  .document-hero h1, :lang(zh-CN) .document-hero h1 { font-size: 36px; }
  .document-hero p:last-child { font-size: 15px; margin-top: 20px; }
  .toc nav { grid-template-columns: 1fr; }
  .toc a { min-height: 40px; }
  .legal-document h2 { font-size: 21px; }
  .legal-document p { font-size: 15px; line-height: 1.95; }
  .facts-list > div { grid-template-columns: 1fr; gap: 8px; padding-block: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}