:root { color-scheme:light; --ink:#283342; --muted:#66707e; --purple:#735799; --green:#397768; --line:#e5e2e9; --paper:#fbfafc; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(ellipse 1100px 850px at 95% 3%,#eee5fa88,transparent 75%),var(--paper); color:var(--ink); font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--purple); text-underline-offset:4px; }
img { display:block; max-width:100%; height:auto; }
h1,h2,h3,p,figure,blockquote { margin:0; }
header,main,body>footer,.release-notes { width:min(1200px,calc(100% - 96px)); margin:auto; }
header { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:30px 0; }
.brand { display:flex; align-items:center; gap:11px; font:600 24px/1.2 Georgia,serif; color:var(--ink); text-decoration:none; white-space:nowrap; }
.brand img { border-radius:9px; }
nav { display:flex; align-items:center; gap:28px; font-size:13px; }
nav a { color:var(--muted); text-decoration:none; padding:8px 0; }
nav a:hover { color:var(--purple); }
a:focus-visible,summary:focus-visible { outline:3px solid var(--green); outline-offset:5px; }
.skip { position:absolute; top:-80px; left:16px; background:white; padding:12px; z-index:30; }
.skip:focus { top:12px; }
.hero { display:grid; grid-template-columns:.9fr 1.35fr; gap:45px; align-items:center; padding:66px 0 100px; }
.eyebrow { font-size:11px; font-weight:650; color:var(--purple); letter-spacing:.12em; margin-bottom:22px; }
h1 { font-size:clamp(42px,4.4vw,62px); font-weight:650; letter-spacing:-.045em; line-height:1.12; }
h1 span,h2 span { color:var(--purple); }
.intro { margin-top:28px; color:var(--muted); font-size:17px; max-width:460px; line-height:1.85; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:28px; min-height:50px; padding:12px 22px; background:var(--purple); color:white; border-radius:14px; text-decoration:none; font-size:14px; font-weight:600; margin-top:28px; }
.button:hover { background:#624784; }
.platforms { font-size:12px; color:var(--muted); margin-top:17px; letter-spacing:.03em; }
.hero-visual { min-width:0; margin-right:-15px; }
.hero-visual img { width:100%; aspect-ratio:4/3; object-fit:cover; object-position:top; border:1px solid #e4ddeb; border-radius:22px; box-shadow:0 22px 65px -23px #4c32632b; }
figcaption { color:var(--muted); font-size:11px; line-height:1.6; margin-top:16px; }
.hero-visual figcaption { text-align:center; }
.chapter { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:90px; padding:90px 65px 100px; border-top:1px solid var(--line); }
h2 { font-size:clamp(36px,3.6vw,49px); font-weight:650; line-height:1.22; letter-spacing:-.035em; }
.section-intro { font-size:16px; color:var(--muted); line-height:1.9; margin-top:25px; max-width:570px; }
.story-points { margin-top:35px; display:grid; gap:23px; }
h3 { font-size:16px; line-height:1.5; font-weight:650; }
.story-points p { font-size:14px; color:var(--muted); line-height:1.8; margin-top:6px; }
.phone { width:min(100%,285px); margin:auto; }
.phone img { border-radius:30px; border:1px solid #e9e5ed; box-shadow:0 20px 60px -32px #36244455; }
.phone figcaption { text-align:center; }
.multi { display:grid; grid-template-columns:1.05fr 1fr; gap:65px; padding:65px; border-radius:32px; background:linear-gradient(140deg,#eee5f5,#f5f1fa 60%,#e8f2ed); }
.multi .section-intro { font-size:15px; }
.questions { padding:0; margin:28px 0 0; list-style:none; font-size:13px; color:var(--purple); }
.questions li { padding:10px 0; border-bottom:1px solid #ddd1e988; }
.questions li::before { content:"↗"; margin-right:10px; }
.questions li:last-child { border:0; }
.multi-proof { display:flex; flex-direction:column; justify-content:center; }
.multi-proof figure { padding:28px; border:1px solid #ffffffc0; background:#ffffff77; border-radius:22px; }
blockquote { font-size:22px; line-height:1.65; font-weight:500; letter-spacing:-.015em; }
.proof-stats { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:27px; }
.proof-stats div { display:flex; flex-direction:column; }
.proof-stats strong { font-size:55px; font-weight:500; line-height:1.1; letter-spacing:-.06em; color:var(--purple); }
.proof-stats span { font-size:12px; margin-top:8px; color:var(--muted); }
.proof-insight { margin-top:23px; color:var(--green); font-size:14px; line-height:1.8; }
.practice { grid-template-columns:1fr 1.2fr; border:0; padding-top:110px; padding-bottom:110px; }
.practice h2 { font-size:43px; }
.practice .eyebrow { color:var(--green); }
.practice h2 span { color:var(--green); }
.practice-note { font-size:13px; color:var(--green); margin-top:25px; line-height:1.8; }
.tools { padding:50px 0 65px; border-top:1px solid var(--line); }
.tools h2 { font-size:25px; letter-spacing:-.02em; }
.tools>div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px; margin-top:28px; }
.tools p { font-size:13px; color:var(--muted); margin-top:10px; line-height:1.85; }
.closing { padding:75px 20px 90px; text-align:center; border-top:1px solid var(--line); }
.closing h2 { font-size:44px; }
.closing>p { color:var(--muted); font-size:15px; margin-top:20px; }
.closing .availability { font-size:11px; margin-top:15px; }
.usage-details { border-top:1px solid var(--line); padding:20px 0 26px; color:var(--muted); font-size:12px; }
summary { cursor:pointer; }
dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:35px; margin:22px 0 0; }
dt { font-weight:600; color:var(--ink); }
dd { margin:7px 0 0; line-height:1.9; }
body>footer { display:flex; justify-content:space-between; align-items:start; gap:24px; padding:25px 0; border-top:1px solid var(--line); color:var(--muted); font-size:11px; }
footer p+p { margin-top:5px; }
.contact { text-align:right; }
.release-notes { padding:6px 0 35px; color:var(--muted); font-size:11px; line-height:1.8; }
.release-notes h2 { font-size:11px; font-weight:600; letter-spacing:0; margin-bottom:9px; }
.release-notes ol { list-style:none; padding:0; margin:0; display:grid; gap:5px; }
.release-notes li { display:grid; grid-template-columns:90px 155px 1fr; gap:12px; }
.release-notes strong { font-weight:500; }
section[id] { scroll-margin-top:30px; }
@media(max-width:1050px) {
 header,main,body>footer,.release-notes { width:calc(100% - 64px); }
 .hero { gap:35px; padding-top:45px; grid-template-columns:1fr 1.2fr; }
 h1 { font-size:45px; }
 .hero-visual { margin-right:0; }
 .intro { font-size:15px; }
 .chapter { padding-left:30px; padding-right:30px; gap:60px; }
 .multi { padding:40px; gap:35px; }
 .multi h2 { font-size:38px; }
 blockquote { font-size:19px; }
 .multi-proof figure { padding:22px; }
 .tools>div { gap:30px; }
}
@media(max-width:750px) {
 header,main,body>footer,.release-notes { width:calc(100% - 40px); }
 header { padding:22px 0; gap:15px; }
 .brand { font-size:20px; gap:9px; }
 .brand img { width:29px; height:29px; }
 nav { gap:17px; font-size:12px; }
 .desktop-link { display:none; }
 .hero { grid-template-columns:1fr; padding:35px 0 55px; gap:40px; }
 .hero-copy { max-width:550px; }
 h1 { font-size:clamp(39px,8.9vw,56px); }
 html[lang=zh-Hans] h1 { font-size:clamp(37px,9.7vw,52px); }
 .eyebrow { font-size:10px; margin-bottom:18px; }
 .intro { font-size:16px; max-width:480px; margin-top:24px; line-height:1.8; }
 .hero-visual img { border-radius:15px; }
 .hero-visual figcaption { margin-top:12px; }
 .chapter { grid-template-columns:1fr; gap:38px; padding:50px 5px 60px; }
 h2 { font-size:37px; }
 .section-intro { font-size:15px; margin-top:22px; }
 .story-points { margin-top:28px; gap:20px; }
 .phone { width:245px; }
 .phone img { border-radius:25px; }
 .multi { grid-template-columns:1fr; gap:32px; padding:32px 25px; border-radius:24px; }
 .multi h2 { font-size:35px; }
 .multi-proof figure { padding:23px; }
 blockquote { font-size:20px; }
 .proof-stats { margin-top:24px; }
 .proof-stats strong { font-size:48px; }
 .practice { padding-top:65px; }
 .practice .chapter-copy { grid-row:1; }
 .practice h2 { font-size:35px; }
 .tools { padding:35px 0 45px; }
 .tools h2 { font-size:24px; }
 .tools>div { grid-template-columns:1fr; gap:25px; }
 .tools p { max-width:500px; margin-top:6px; }
 .closing { padding:50px 0 55px; }
 .closing h2 { font-size:34px; }
 dl { grid-template-columns:1fr; gap:20px; }
 body>footer { flex-direction:column; gap:15px; }
 .contact { text-align:left; }
 .release-notes li { grid-template-columns:85px 1fr; gap:0 10px; padding-top:7px; }
 .release-notes li span { grid-column:1 / -1; margin-top:2px; }
}
@media(max-width:370px) { nav a:first-child { display:none; } nav { gap:12px; } .brand { font-size:18px; } h1 { font-size:37px; } .multi { padding:28px 21px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }