.landing { color-scheme:light; --background:#f8faf7; --surface:#fff; --text:#142f2d; --muted:#5c706d; --brand:#007c78; --brand-soft:#dff4e9; --line:#dce6df; background:var(--background); color:var(--text); }
.landing .site-shell { max-width:1320px; padding-inline:56px; }
.landing .site-header { padding-block:25px; gap:24px; }
.landing .brand { font-size:1.3rem; }
.landing .site-header nav { align-items:center; gap:26px; }
.language-menu { position:relative; font-size:.8rem; }
.language-menu summary { cursor:pointer; border:1px solid var(--line); border-radius:99px; padding:8px 12px; font-weight:650; white-space:nowrap; list-style:none; }
.language-menu summary::-webkit-details-marker { display:none; }
.language-menu summary::after { content:'⌄'; margin-left:9px; }
.language-menu > div { position:absolute; z-index:20; right:0; top:calc(100% + 8px); background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:8px; min-width:180px; box-shadow:0 12px 40px #16352f18; }
.language-menu a { display:block; padding:9px 12px; border-radius:9px; text-decoration:none; white-space:nowrap; }
.language-menu a:hover,.language-menu a[aria-current] { background:var(--brand-soft); color:var(--brand); }
.landing-hero { display:grid; grid-template-columns:1fr 1.05fr; gap:24px; align-items:center; padding:38px 0 60px; min-height:640px; }
.landing-hero-copy { position:relative; z-index:2; padding:18px 0; }
.landing-hero .eyebrow { font-size:.73rem; letter-spacing:.13em; margin-bottom:22px; }
.landing-hero h1 { font-size:clamp(3.5rem,5.4vw,4.9rem); line-height:1.03; letter-spacing:-.065em; font-weight:790; }
.landing-hero h1 span { color:var(--brand); }
.landing-hero .hero-description { max-width:440px; margin-top:24px; font-size:1.1rem; line-height:1.65; }
.hero-store-badges { margin-top:20px; margin-left:-12px; }
.landing .download-banner .store-badges { justify-content:center; margin-left:0; }
.landing-proof { display:flex; flex-wrap:wrap; gap:8px; font-size:.76rem; color:var(--muted); margin:17px 0 0; line-height:1.5; }
.landing-proof span { display:inline-block; border:1px solid var(--line); border-radius:99px; padding:6px 11px; background:#ffffff70; }
.landing-hero .compatibility { font-size:.72rem; color:var(--muted); margin-top:12px; line-height:1.7; }
.hero-scene { position:relative; display:flex; justify-content:center; align-items:center; min-width:0; height:560px; margin:0; isolation:isolate; overflow-x:clip; }
.hero-scene::before { content:''; position:absolute; width:110%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#bdebd475 0%,#d9f1e8aa 42%,#eaf5ed00 70%); z-index:-2; }
.hero-scene::after { content:''; position:absolute; width:78%; aspect-ratio:1; border:1px solid #c0ded3; border-radius:50%; z-index:-1; transform:rotate(-20deg) scaleX(1.18); }
.hero-scene img { position:relative; width:46%; max-width:250px; height:auto; border-radius:24px; box-shadow:0 24px 55px #174f3b24; border:1px solid #0c777555; }
.hero-scene .scene-loops { transform:translate(8px,-14px) rotate(-7deg); z-index:2; }
.hero-scene .scene-balances { transform:translate(-8px,28px) rotate(7deg); }
.hero-scene figcaption { position:absolute; bottom:-45px; left:0; right:0; font-size:.68rem; color:var(--muted); margin:0; }
.landing-section { padding:64px 0; }
.landing-section > .eyebrow { margin-bottom:14px; }
.landing-section > h2,.film-heading h2 { font-size:clamp(2.1rem,4vw,3.4rem); line-height:1.06; letter-spacing:-.05em; margin:0 0 16px; }
.landing-section > p:not(.eyebrow) { max-width:610px; color:var(--muted); }
.value-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:30px; }
.value-card { min-width:0; overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:25px; display:flex; flex-direction:column; }
.value-card .card-copy { padding:28px 27px 18px; }
.value-card .card-number { font-size:.73rem; color:var(--brand); font-weight:700; letter-spacing:.08em; }
.value-card h3 { font-size:1.5rem; letter-spacing:-.035em; line-height:1.12; margin:12px 0; }
.value-card p { color:var(--muted); margin:0; font-size:.91rem; line-height:1.65; }
.value-card .card-art { display:flex; align-items:center; justify-content:center; height:auto; margin-top:auto; padding:24px 24px 28px; background:linear-gradient(180deg,#fff,#e2f3e8); }
.value-card img { display:block; width:100%; height:auto; max-width:255px; object-fit:contain; margin:0 auto; border-radius:18px; box-shadow:0 10px 30px #16352f17; }
.value-card:nth-child(2) .card-art { background:linear-gradient(180deg,#fff,#e5eef4); }
.value-card:nth-child(3) .card-art { background:linear-gradient(180deg,#fff,#f5efdf); }
.film-section { background:#103e3b; color:#f6fbf8; border-radius:30px; padding:36px; margin-block:30px; }
.film-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.film-heading h2 { margin:0; max-width:620px; }
.film-heading p { color:#b6d7cc; font-size:.9rem; max-width:260px; margin:0; }
.landing .product-film { margin:0; }
.landing .product-film video { border-radius:17px; border-color:#ffffff20; box-shadow:none; }
.landing .product-film figcaption { color:#b6d7cc; font-size:.72rem; margin-top:14px; }
.landing .film-summary { color:#cce2d9; font-size:.8rem; }
.landing .film-summary summary { cursor:pointer; }
.detail-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:30px; }
.detail-grid h3 { font-size:1.13rem; letter-spacing:-.02em; margin:0 0 10px; }
.detail-grid p { color:var(--muted); font-size:.9rem; margin:0; }
.plan-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:28px; }
.plan-card { background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:30px; }
.plan-card + .plan-card { background:#e4f2e8; }
.plan-card h3 { font-size:1.55rem; margin:8px 0 16px; letter-spacing:-.04em; }
.plan-card p,.plan-card li { font-size:.92rem; color:var(--muted); }
.plan-card ul { padding-left:20px; margin:0; }
.plan-card li { margin:8px 0; }
.plan-note { color:var(--muted); font-size:.77rem; margin-top:14px; }
.landing .help-topics { grid-template-columns:repeat(3,minmax(0,1fr)); }
.landing .help-topic { background:#fff; }
.landing .help-topic h2 { font-size:1.1rem; line-height:1.3; }
.landing .help-topic p { font-size:.85rem; }
.landing .download-banner { margin:48px 0 30px; border-radius:30px; background:#123f3b; color:#f2faf5; padding:52px 24px; }
.landing .download-banner h2 { font-size:clamp(2rem,4vw,3.5rem); line-height:1.06; letter-spacing:-.05em; }
.landing .download-banner p,.landing .download-banner .eyebrow { color:#beded0; }
.landing .download-banner .small-print { font-size:.73rem; max-width:850px; margin-inline:auto; }
.landing .store-badge-link { background:transparent; }
.landing .support-card { margin:0 0 30px; }
.landing .support-card .button { background:var(--text); color:#fff; }
.landing .site-footer { font-size:.8rem; }
.landing .site-footer .trademark-notice { font-size:.65rem; }
.locale-notice { padding:13px 17px; border-radius:12px; border:1px solid var(--line); background:var(--brand-soft); font-size:.9rem; color:var(--muted); }
.landing:lang(zh-Hans) .landing-hero h1,.landing:lang(zh-Hant) .landing-hero h1,.landing:lang(ja) .landing-hero h1 { letter-spacing:-.055em; font-size:clamp(3.2rem,5.5vw,5.2rem); line-height:1.13; }
.landing:lang(fr) .landing-hero h1 { font-size:clamp(3rem,4.8vw,4.25rem); }
@media(min-width:1600px) { .landing-hero { padding-top:60px; } }
@media(max-width:1000px) { .landing .site-shell { padding-inline:32px; } .landing-hero { grid-template-columns:1fr 1fr; min-height:580px; } .landing-hero h1 { font-size:4.4rem; } .hero-scene { height:490px; } .hero-scene img { width:47%; } .value-card .card-copy { padding:24px 20px 18px; } .value-card .card-art { height:auto; padding-inline:20px; } .landing .site-header nav { gap:18px; } }
@media(max-width:760px) { .landing .site-shell { padding-inline:22px; } .landing .site-header { padding-block:20px; gap:16px; } .landing .site-header nav { gap:16px; font-size:.85rem; } .landing-hero { grid-template-columns:1fr; gap:10px; padding:18px 0 28px; min-height:0; } .landing-hero-copy { padding:5px 0 0; text-align:center; } .landing-hero .eyebrow { margin-bottom:15px; font-size:.65rem; } .landing-hero h1 { font-size:clamp(3.1rem,10vw,4.9rem); line-height:1; letter-spacing:-.06em; } .landing-hero .hero-description { font-size:1rem; margin:20px auto 0; max-width:450px; } .landing-proof { font-size:.73rem; margin-top:12px; } .landing-hero .compatibility { font-size:.65rem; margin-bottom:0; } .hero-scene { height:auto; min-height:320px; padding:28px 20px 20px; max-width:510px; width:100%; margin:auto; } .hero-scene img { width:43%; max-width:185px; border-radius:18px; } .hero-scene::before { width:90%; } .hero-scene figcaption { bottom:-10px; font-size:.61rem; } .landing-section { padding:48px 0; } .value-grid { grid-template-columns:1fr; gap:18px; } .value-card { display:flex; flex-direction:column; min-height:0; } .value-card .card-copy { padding:26px 23px 0; } .value-card h3 { font-size:1.45rem; } .value-card p { font-size:.87rem; } .value-card .card-art { height:auto; min-height:0; padding:24px 23px 28px; align-self:stretch; } .value-card img { width:100%; height:auto; max-width:220px; border-radius:15px; } .detail-grid { grid-template-columns:1fr; gap:24px; } .plan-grid { grid-template-columns:1fr; } .film-section { padding:22px; border-radius:24px; } .film-heading { display:block; } .film-heading p { max-width:none; margin-top:16px; } .film-heading h2 { font-size:2.2rem; } .landing .help-topics { grid-template-columns:1fr; } .landing .download-banner { padding:36px 18px; } .landing:lang(zh-Hans) .landing-hero h1,.landing:lang(zh-Hant) .landing-hero h1,.landing:lang(ja) .landing-hero h1 { font-size:clamp(2.75rem,9vw,4.1rem); } }
@media(max-width:370px) { .landing .site-shell { padding-inline:16px; } .landing .site-header nav { gap:11px; } .landing .site-header .brand { font-size:1.1rem; } .landing-hero h1 { font-size:3rem; } .hero-scene { padding-inline:10px; } .value-card .card-copy { padding-left:19px; } }
@media(max-width:760px) { .landing .site-header nav { width:100%; justify-content:space-between; gap:12px; } .landing .site-header nav > a:first-child { display:none; } .download-actions.hero-store-badges { justify-content:center; margin:16px -10px 0; } .store-badges .store-badge-link { padding:10px; } .store-badges img { height:40px; } .hero-scene { padding-bottom:45px; } .hero-scene figcaption { bottom:0; } }
@media(max-width:760px) { .landing-proof { justify-content:center; font-size:.7rem; } .landing-hero h1 { font-size:clamp(2.4rem,8.9vw,4.9rem); } }
@media(min-width:761px) and (max-width:1000px) { .landing-hero h1 { font-size:clamp(2.5rem,5.3vw,4.4rem); } }
@media(max-width:760px) { .hero-scene { padding-bottom:70px; } .hero-scene::after { width:70%; } }