:root { --ink:#111217; --muted:#6f747c; --paper:#fbfbf8; --line:#e2e4df; --lime:#c9ff3d; --pink:#ff7db4; --blue:#4b6cff; --cyan:#8be8ff; --orange:#ff8b42; --max:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.wrap { width:min(var(--max),calc(100% - 64px)); margin:0 auto; }
.site-header { position:fixed; z-index:20; inset:0 0 auto; border-bottom:1px solid rgba(17,18,23,.1); background:rgba(251,251,248,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:.25s ease; }
.site-header.is-scrolled { background:rgba(255,255,255,.96); box-shadow:0 10px 26px rgba(17,18,23,.08); }
.nav-wrap { height:84px; display:flex; align-items:center; gap:46px; }
.brand { display:inline-flex; align-items:center; gap:12px; min-width:215px; }.brand-icon { display:grid; place-items:center; width:38px; height:38px; color:#fff; border-radius:12px 12px 12px 3px; background:var(--ink); font-size:23px; font-style:italic; font-weight:900; box-shadow:5px 5px 0 var(--lime); }.brand strong,.brand small { display:block; line-height:1.05; }.brand strong { font-size:17px; letter-spacing:1px; }.brand small { margin-top:5px; color:#8b9095; font-size:8px; letter-spacing:2px; }
.main-nav { display:flex; gap:34px; margin-right:auto; color:#6e7478; font-size:14px; }.main-nav a { position:relative; padding:30px 0 28px; }.main-nav a:hover,.main-nav a.active { color:var(--ink); }.main-nav a.active:after { content:""; position:absolute; left:0; right:0; bottom:18px; height:4px; background:var(--pink); }
.nav-cta { display:inline-flex; align-items:center; gap:10px; min-height:42px; padding:0 17px; color:#fff; background:var(--ink); font-size:13px; font-weight:800; transition:.25s ease; }.nav-cta:hover { transform:translateY(-2px); box-shadow:5px 5px 0 var(--lime); }.menu-toggle { display:none; border:0; background:transparent; color:var(--ink); font-size:25px; }
.hero { position:relative; overflow:hidden; padding:120px 0 70px; background:linear-gradient(180deg,#fff 0%,var(--paper) 70%); }.hero:before { content:""; position:absolute; inset:84px 0 auto; height:1px; background:var(--line); }.hero-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; min-height:610px; }.tag { margin:0 0 20px; color:var(--blue); font-size:11px; font-weight:900; letter-spacing:2px; }.tag span { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--pink); }.hero-copy h1 { margin:0 0 24px; font-size:clamp(52px,6.5vw,92px); font-weight:300; letter-spacing:-2px; line-height:1.06; }.hero-copy h1 span,.gallery-copy h2 span,.scene-head h2 span,.cta-inner h2 span,.download-cover h1 span { color:var(--pink); font-weight:900; }.hero-copy p:not(.tag),.gallery-copy p { max-width:430px; margin:0 0 32px; color:var(--muted); font-size:16px; line-height:1.9; }.hero-actions { display:flex; align-items:center; gap:22px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:48px; padding:0 21px; border:1px solid transparent; font-size:14px; font-weight:900; cursor:pointer; transition:.25s ease; }.button:hover { transform:translateY(-3px); }.button-black { color:#fff; background:var(--ink); box-shadow:7px 7px 0 var(--lime); }.button-black:hover { box-shadow:10px 10px 0 var(--lime); }.button-white { color:var(--ink); background:#fff; }.link-button { display:inline-flex; align-items:center; gap:9px; color:#60666b; font-size:13px; font-weight:800; }.link-button:hover { color:var(--pink); }
.phone-stage { position:relative; min-height:570px; display:grid; place-items:center; }.phone-shell { width:305px; min-height:545px; position:relative; z-index:2; padding:18px 15px 15px; border:8px solid var(--ink); border-radius:34px; background:#fff; box-shadow:18px 20px 0 var(--blue); transform:rotate(-4deg); transition:.35s ease; }.phone-shell:hover { transform:rotate(0) translateY(-8px); box-shadow:23px 26px 0 var(--blue); }.phone-top { width:74px; height:17px; margin:0 auto 18px; border-radius:20px; background:var(--ink); }.chat-area { min-height:250px; padding:24px 18px; border-radius:21px; background:var(--lime); }.chat-title { color:#56610e; font-size:12px; font-weight:900; letter-spacing:1.5px; }.chat-bubble { width:max-content; max-width:100%; margin:50px 0 14px auto; padding:12px 14px; border-radius:18px 18px 3px 18px; color:#fff; background:var(--ink); font-size:16px; font-weight:800; }.chat-bubble span { color:var(--lime); transition:.22s ease; }.suggestion-line { display:flex; gap:7px; }.suggestion-line span { padding:7px 10px; border:1px solid rgba(17,18,23,.18); border-radius:20px; background:rgba(255,255,255,.5); font-size:12px; font-weight:800; }.keyboard-ui { margin-top:14px; padding:12px; border-radius:18px; background:#f0f1ed; }.keyboard-ui div { display:flex; gap:6px; margin-bottom:7px; }.keyboard-ui div:last-child { margin-bottom:0; }.keyboard-ui i,.keyboard-ui b,.keyboard-ui em { display:grid; place-items:center; flex:1; min-height:28px; border-radius:7px; background:#fff; font-size:10px; font-style:normal; }.keyboard-ui b { flex:1.5; color:#fff; background:var(--pink); }.keyboard-ui .space { flex:4; }.keyboard-ui em { flex:1.3; color:#fff; background:var(--ink); }.sticker { position:absolute; z-index:3; display:grid; place-items:center; width:82px; height:82px; text-align:center; color:var(--ink); border:4px solid #fff; font-size:13px; font-weight:900; line-height:1.25; box-shadow:8px 8px 0 rgba(17,18,23,.1); }.sticker-green { left:65px; top:78px; border-radius:50%; background:var(--lime); animation:float-a 5s ease-in-out infinite; }.sticker-pink { right:55px; bottom:94px; background:var(--pink); transform:rotate(9deg); animation:float-b 5.5s ease-in-out infinite; }
.platform-strip { display:flex; align-items:center; justify-content:center; gap:22px; min-height:76px; border:1px solid var(--line); background:#fff; box-shadow:8px 8px 0 rgba(17,18,23,.05); }.platform-strip span { color:#7a8085; font-size:13px; font-weight:800; }.platform-strip > i { font-size:22px; }.platform-strip a { margin-left:15px; color:var(--blue); font-size:13px; font-weight:900; }
.feature-band { padding:78px 0; background:var(--ink); }.feature-band-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.feature-tile { min-height:300px; padding:27px; transition:.3s ease; }.feature-tile:hover { transform:translateY(-8px); }.feature-tile small { font-size:10px; font-weight:900; letter-spacing:1.5px; opacity:.65; }.feature-tile > i { display:block; margin:60px 0 15px; font-size:30px; }.feature-tile h3 { margin:0 0 9px; font-size:25px; }.feature-tile p { max-width:260px; margin:0; color:rgba(17,18,23,.68); font-size:14px; line-height:1.8; }.lime { background:var(--lime); }.blue { color:#fff; background:var(--blue); }.blue p { color:rgba(255,255,255,.75); }.pink { background:var(--pink); }
.skin-gallery { padding:120px 0 135px; }.gallery-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:88px; align-items:center; }.gallery-copy h2,.scene-head h2,.download-cover h1,.install-card h2 { margin:0 0 18px; font-size:clamp(40px,5vw,64px); font-weight:300; line-height:1.12; }.poster-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.poster { min-height:210px; position:relative; padding:24px; overflow:hidden; transition:.3s ease; }.poster:hover { transform:translateY(-7px); box-shadow:8px 8px 0 rgba(17,18,23,.08); }.poster small { font-size:10px; font-weight:900; letter-spacing:1.5px; }.poster strong { display:block; margin-top:56px; font-size:26px; line-height:1.2; }.poster i { position:absolute; right:22px; bottom:18px; font-size:32px; }.poster-a { color:#fff; background:var(--blue); }.poster-b { background:var(--lime); }.poster-c { color:#fff; background:var(--ink); }.poster-d { background:var(--pink); }
.scene-section { padding:0 0 125px; }.scene-head { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:40px; }.scene-head h2 { margin:0; }.scene-list { border-top:1px solid var(--line); }.scene-item { display:grid; grid-template-columns:72px .8fr 1.2fr; gap:28px; align-items:center; min-height:105px; border-bottom:1px solid var(--line); transition:.25s ease; }.scene-item:hover { padding-left:14px; background:#fff; }.scene-item b { color:var(--pink); font-size:13px; }.scene-item strong { font-size:20px; }.scene-item span { color:var(--muted); font-size:14px; }
.cta-section { padding:90px 0; color:#fff; background:var(--blue); }.cta-inner { display:flex; align-items:center; justify-content:space-between; }.cta-inner h2 { margin:0; font-size:clamp(42px,5vw,66px); font-weight:300; line-height:1.12; }.cta-inner h2 span { color:var(--lime); }
.site-footer { background:#fff; color:#6e7478; }.footer-top { min-height:170px; display:flex; align-items:center; justify-content:space-between; }.footer-links { display:flex; gap:28px; font-size:12px; font-weight:800; }.footer-links a:hover { color:var(--pink); }.footer-top > span { color:var(--blue); font-size:12px; font-weight:900; }.footer-bottom { min-height:58px; display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); font-size:10px; }
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s cubic-bezier(.2,.75,.25,1); }.reveal.is-visible { opacity:1; transform:translateY(0); }.toast { position:fixed; z-index:30; right:24px; bottom:24px; padding:14px 18px; color:#fff; background:var(--ink); font-size:13px; opacity:0; pointer-events:none; transform:translateY(12px); transition:.25s ease; }.toast.show { opacity:1; transform:translateY(0); }
@keyframes float-a { 0%,100% { transform:translateY(0) rotate(-8deg); } 50% { transform:translateY(-12px) rotate(-4deg); } } @keyframes float-b { 0%,100% { transform:translateY(0) rotate(9deg); } 50% { transform:translateY(11px) rotate(13deg); } }

.download-hero { padding:128px 0 72px; color:#fff; background:var(--ink); }.download-cover { max-width:760px; margin:0 auto; text-align:center; }.download-cover .tag { color:var(--lime); }.download-cover p:not(.tag) { max-width:560px; margin:0 auto; color:rgba(255,255,255,.72); font-size:16px; line-height:1.9; }
.download-dock { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; padding:84px 0 70px; }.dock-card { min-height:365px; display:flex; flex-direction:column; align-items:flex-start; padding:26px; border:1px solid var(--line); background:#fff; text-align:left; cursor:pointer; transition:.3s ease; }.dock-card:hover { transform:translateY(-8px); box-shadow:0 18px 28px rgba(17,18,23,.1); }.dock-card > i { display:grid; place-items:center; width:62px; height:62px; margin-bottom:35px; color:#fff; background:var(--ink); font-size:28px; }.dock-card small { color:#8a9095; font-size:10px; font-weight:900; letter-spacing:1.4px; }.dock-card strong { margin-top:7px; color:var(--ink); font-size:25px; line-height:1.15; }.dock-card span { min-height:42px; margin-top:10px; color:#737a80; font-size:13px; }.dock-card b { margin-top:auto; color:var(--blue); font-size:13px; }.dock-card.windows { border-top:5px solid var(--blue); }.dock-card.windows > i { background:var(--blue); }.dock-card.mac { border-top:5px solid var(--lime); }.dock-card.mac > i { color:var(--ink); background:var(--lime); }.dock-card.android { border-top:5px solid var(--pink); }.dock-card.android > i { background:var(--pink); }.dock-card.ios { border-top:5px solid var(--orange); }.dock-card.ios > i { background:var(--orange); }
.download-info { display:grid; grid-template-columns:.95fr 1.05fr; gap:18px; padding-bottom:110px; }.install-card,.mini-faq { min-height:280px; padding:30px; border:1px solid var(--line); background:#fff; }.install-card h2 { font-size:42px; }.install-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:42px; }.install-steps span { min-height:82px; padding:14px; color:#60686d; background:var(--paper); font-size:13px; }.install-steps b { display:block; color:var(--pink); margin-bottom:9px; }.mini-faq details { border-top:1px solid var(--line); }.mini-faq details:last-child { border-bottom:1px solid var(--line); }.mini-faq summary { display:flex; justify-content:space-between; padding:22px 0; cursor:pointer; list-style:none; font-size:16px; font-weight:900; }.mini-faq summary::-webkit-details-marker { display:none; }.mini-faq summary i { color:var(--pink); transition:.25s ease; }.mini-faq details[open] summary i { transform:rotate(45deg); }.mini-faq p { margin:-2px 32px 22px 0; color:var(--muted); font-size:14px; line-height:1.85; }
@media (max-width:900px) { .wrap { width:min(var(--max),calc(100% - 40px)); }.hero-layout,.gallery-layout,.download-info { grid-template-columns:1fr; gap:50px; }.phone-stage { min-height:620px; }.feature-band-grid,.download-dock { grid-template-columns:1fr 1fr; }.scene-head { display:block; }.scene-head .tag { margin-bottom:18px; }.scene-item { grid-template-columns:50px 1fr; }.scene-item span { grid-column:2; }.cta-inner { display:grid; gap:28px; }.download-cover { max-width:680px; } }
@media (max-width:650px) { .wrap { width:calc(100% - 32px); }.nav-wrap { height:72px; }.brand { min-width:0; }.brand strong { font-size:14px; }.brand small { font-size:7px; }.main-nav,.nav-cta { display:none; }.main-nav.mobile-open { position:absolute; top:72px; right:16px; left:16px; display:grid; gap:0; padding:6px 16px; border:1px solid var(--line); background:#fff; box-shadow:0 15px 30px rgba(17,18,23,.12); }.main-nav.mobile-open a { padding:13px 0; border-bottom:1px solid var(--line); font-size:13px; }.main-nav.mobile-open a:last-child { border:0; }.main-nav.mobile-open a.active:after { display:none; }.menu-toggle { display:block; margin-left:auto; }.hero { padding-top:105px; }.hero-layout { min-height:820px; gap:20px; }.hero-copy h1 { font-size:51px; letter-spacing:-1px; }.hero-copy p:not(.tag),.gallery-copy p,.download-cover p:not(.tag) { font-size:15px; }.hero-actions { gap:14px; }.button { min-height:45px; padding:0 16px; font-size:13px; }.phone-stage { min-height:500px; }.phone-shell { width:258px; min-height:472px; border-width:7px; border-radius:30px; transform:rotate(0); box-shadow:10px 12px 0 var(--blue); }.chat-area { min-height:210px; }.chat-bubble { margin-top:35px; font-size:14px; }.sticker { width:62px; height:62px; font-size:10px; }.sticker-green { left:8px; top:58px; }.sticker-pink { right:4px; bottom:78px; }.platform-strip { flex-wrap:wrap; gap:15px; padding:14px; }.feature-band { padding:64px 0; }.feature-band-grid,.poster-grid,.download-dock { grid-template-columns:1fr; }.feature-tile { min-height:250px; }.feature-tile > i { margin-top:45px; }.skin-gallery { padding:82px 0 90px; }.gallery-copy h2,.scene-head h2,.download-cover h1,.cta-inner h2 { font-size:41px; }.scene-section { padding-bottom:85px; }.scene-item { min-height:120px; gap:12px; }.scene-item strong { font-size:17px; }.scene-item span { font-size:13px; }.cta-section { padding:70px 0; }.footer-top { min-height:230px; display:grid; align-content:center; gap:26px; }.footer-bottom { min-height:80px; display:grid; align-content:center; gap:5px; font-size:10px; }.download-hero { padding-top:108px; }.download-dock { padding:64px 0 50px; }.dock-card { min-height:300px; }.download-info { padding-bottom:80px; }.install-card,.mini-faq { padding:23px; }.install-steps { grid-template-columns:1fr; margin-top:28px; }.mini-faq summary { font-size:14px; }.mini-faq p { font-size:13px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }.reveal { opacity:1; transform:none; } }

/* 04 redesign: mobile-app showcase and device selector. */
.showcase-hero { position:relative; overflow:hidden; min-height:920px; padding:124px 0 88px; background:linear-gradient(180deg,#fff 0%,#f7f8f2 100%); }
.showcase-hero:before { content:""; position:absolute; right:-180px; top:80px; width:520px; height:520px; border-radius:50%; background:var(--lime); opacity:.7; }
.showcase-copy { position:relative; z-index:2; max-width:760px; }
.showcase-copy h1 { margin:0 0 22px; font-size:clamp(56px,8vw,104px); font-weight:300; letter-spacing:-2px; line-height:1.05; }
.showcase-copy h1 span { color:var(--pink); font-weight:900; }
.showcase-copy p:not(.tag) { max-width:570px; margin:0 0 31px; color:#6b7277; font-size:16px; line-height:1.9; }
.keyboard-showcase { position:relative; z-index:2; display:grid; grid-template-columns:.8fr 1.08fr .8fr; gap:18px; align-items:end; margin-top:54px; }
.showcase-phone { position:relative; overflow:hidden; min-height:380px; padding:18px; border:7px solid var(--ink); border-radius:34px; background:#fff; box-shadow:10px 12px 0 rgba(17,18,23,.1); transition:.35s ease; }
.showcase-phone:hover { transform:translateY(-8px); box-shadow:14px 18px 0 rgba(17,18,23,.13); }
.phone-main { min-height:520px; padding:22px; box-shadow:18px 20px 0 var(--blue); }
.phone-left { transform:rotate(-5deg); }
.phone-right { transform:rotate(5deg); }
.phone-camera { width:76px; height:18px; margin:0 auto 22px; border-radius:20px; background:var(--ink); }
.mini-screen,.message-card { display:grid; align-items:end; min-height:210px; padding:22px; border-radius:24px; font-size:18px; font-weight:900; line-height:1.35; }
.lime-screen { background:var(--lime); }
.pink-screen { color:#fff; background:var(--pink); }
.mini-screen span span { color:var(--pink); transition:.22s ease; }
.message-card { min-height:250px; color:#fff; background:var(--ink); font-size:34px; }
.message-card b { color:var(--lime); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.chips span { padding:8px 11px; border-radius:20px; background:var(--lime); font-size:12px; font-weight:900; }
.mini-keys,.big-keyboard { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; padding:12px; border-radius:20px; background:#eff0ea; }
.mini-keys i,.mini-keys b,.big-keyboard i,.big-keyboard b,.big-keyboard em { display:grid; place-items:center; height:30px; border-radius:8px; background:#fff; flex:1 0 20%; font-style:normal; font-size:10px; }
.mini-keys b,.big-keyboard b { color:#fff; background:var(--pink); flex-basis:26%; }
.mini-keys .space,.big-keyboard .space { flex-basis:44%; }
.big-keyboard em { color:#fff; background:var(--ink); flex-basis:22%; }
.experience-track { padding:105px 0; background:var(--ink); color:#fff; }
.track-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:34px; }
.track-head h2,.waterfall-head h2 { margin:0; font-size:clamp(42px,5vw,66px); font-weight:300; line-height:1.1; }
.track-head h2 span,.waterfall-head h2 span { color:var(--lime); font-weight:900; }
.track-scroll { display:grid; grid-template-columns:repeat(4,minmax(230px,1fr)); gap:14px; overflow-x:auto; padding-bottom:8px; }
.track-card { min-height:295px; padding:27px; border:1px solid rgba(255,255,255,.16); background:#1b1c23; transition:.3s ease; }
.track-card:hover { transform:translateY(-8px); border-color:var(--lime); }
.track-card i { color:var(--lime); font-size:30px; }
.track-card small { display:block; margin-top:55px; color:#8b9298; font-size:10px; font-weight:900; letter-spacing:1.5px; }
.track-card h3 { margin:9px 0 8px; font-size:24px; }
.track-card p { margin:0; color:#aab0b7; font-size:14px; line-height:1.75; }
.skin-waterfall { padding:118px 0 135px; background:#fff; }
.waterfall-head { margin-bottom:42px; }
.waterfall-head h2 span { color:var(--pink); }
.waterfall-grid { display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:14px; align-items:start; }
.waterfall-grid > div { position:relative; padding:24px; overflow:hidden; transition:.3s ease; }
.waterfall-grid > div:hover { transform:translateY(-8px); box-shadow:8px 10px 0 rgba(17,18,23,.08); }
.skin-tall { min-height:380px; }
.skin-short { min-height:260px; margin-top:55px; }
.waterfall-grid small { font-size:10px; font-weight:900; letter-spacing:1.5px; }
.waterfall-grid strong { display:block; margin-top:80px; font-size:28px; line-height:1.18; }
.waterfall-grid i { position:absolute; right:23px; bottom:20px; font-size:34px; }
.skin-blue { color:#fff; background:var(--blue); }
.skin-lime { background:var(--lime); }
.skin-pink { color:#fff; background:var(--pink); }
.skin-dark { color:#fff; background:var(--ink); }
.app-dock { padding:36px 0 110px; background:#fff; }
.app-dock-inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; min-height:86px; padding:14px; border:1px solid var(--line); background:var(--paper); }
.app-dock-inner span,.app-dock-inner a { display:inline-flex; align-items:center; min-height:42px; padding:0 17px; border-radius:22px; background:#fff; font-size:13px; font-weight:900; }
.app-dock-inner a { color:#fff; background:var(--ink); }

.selector-hero { padding:130px 0 76px; background:linear-gradient(180deg,#111217 0%,#1b1c23 100%); color:#fff; }
.selector-layout { display:grid; grid-template-columns:1fr 420px; gap:86px; align-items:center; }
.selector-copy h1 { margin:0 0 20px; font-size:clamp(54px,7vw,92px); font-weight:300; letter-spacing:-2px; line-height:1.05; }
.selector-copy h1 span { color:var(--lime); font-weight:900; }
.selector-copy p:not(.tag) { max-width:520px; margin:0; color:rgba(255,255,255,.72); font-size:16px; line-height:1.9; }
.selector-hero .tag { color:var(--lime); }
.install-panel { min-height:360px; padding:28px; color:var(--ink); background:var(--lime); box-shadow:16px 18px 0 var(--pink); }
.panel-top { display:flex; justify-content:space-between; color:#52600d; font-size:11px; font-weight:900; letter-spacing:1.5px; }
.panel-main { display:grid; justify-items:center; margin:52px 0 43px; text-align:center; }
.panel-main b { display:grid; place-items:center; width:82px; height:82px; color:#fff; border-radius:24px 24px 24px 6px; background:var(--ink); font-size:48px; font-style:italic; }
.panel-main strong { margin-top:18px; font-size:25px; }
.panel-main small { margin-top:4px; color:#59650f; font-size:12px; }
.device-selector { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:84px 0 26px; }
.device-pill { min-height:132px; display:grid; align-content:center; justify-items:start; gap:4px; padding:22px; border:1px solid var(--line); background:#fff; text-align:left; cursor:pointer; transition:.25s ease; }
.device-pill:hover,.device-pill.active { transform:translateY(-5px); border-color:var(--pink); box-shadow:7px 8px 0 rgba(17,18,23,.08); }
.device-pill i { color:var(--blue); font-size:28px; }
.device-pill span { margin-top:10px; color:var(--ink); font-size:20px; font-weight:900; }
.device-pill small { color:#7b8288; font-size:12px; }
.version-strip { display:grid; grid-template-columns:repeat(4,1fr); margin-bottom:80px; border:1px solid var(--line); background:#fff; }
.version-strip div { min-height:92px; padding:20px; border-left:1px solid var(--line); }
.version-strip div:first-child { border-left:0; }
.version-strip b,.version-strip span { display:block; }
.version-strip b { font-size:16px; }
.version-strip span { margin-top:5px; color:#7b8288; font-size:12px; }
.download-help { padding:0 0 112px; }
.help-grid { display:grid; grid-template-columns:.95fr 1.05fr; gap:18px; }
.help-card { min-height:300px; padding:30px; border:1px solid var(--line); background:#fff; }
.help-card h2 { margin:0; font-size:42px; font-weight:300; }
.help-card ol { display:grid; gap:12px; margin:42px 0 0; padding:0; list-style:none; }
.help-card li { display:flex; gap:14px; align-items:center; min-height:48px; border-bottom:1px solid var(--line); color:#6c7378; font-size:14px; }
.help-card li b { color:var(--pink); }
.faq-card details { border-top:1px solid var(--line); }
.faq-card details:last-child { border-bottom:1px solid var(--line); }
.faq-card summary { display:flex; justify-content:space-between; padding:23px 0; cursor:pointer; list-style:none; font-size:16px; font-weight:900; }
.faq-card summary::-webkit-details-marker { display:none; }
.faq-card summary i { color:var(--pink); transition:.25s ease; }
.faq-card details[open] summary i { transform:rotate(45deg); }
.faq-card p { margin:-2px 34px 22px 0; color:#70777d; font-size:14px; line-height:1.85; }

@media (max-width:900px) {
  .showcase-hero { min-height:1080px; }
  .keyboard-showcase { grid-template-columns:1fr 1fr; }
  .phone-main { grid-column:1 / -1; grid-row:1; max-width:430px; width:100%; justify-self:center; }
  .track-head { display:block; }
  .track-head .tag { margin-bottom:18px; }
  .track-scroll { grid-template-columns:repeat(4,260px); }
  .waterfall-grid { grid-template-columns:1fr 1fr; }
  .selector-layout,.help-grid { grid-template-columns:1fr; gap:52px; }
  .install-panel { max-width:520px; width:100%; margin:0 auto; }
  .device-selector,.version-strip { grid-template-columns:1fr 1fr; }
  .version-strip div:nth-child(3) { border-left:0; border-top:1px solid var(--line); }
  .version-strip div:nth-child(4) { border-top:1px solid var(--line); }
}

@media (max-width:650px) {
  .showcase-hero { min-height:980px; padding-top:108px; }
  .showcase-copy h1 { font-size:51px; letter-spacing:-1px; }
  .showcase-copy p:not(.tag),.selector-copy p:not(.tag) { font-size:15px; }
  .keyboard-showcase { display:block; margin-top:36px; }
  .showcase-phone { min-height:250px; margin-bottom:14px; border-width:6px; border-radius:28px; }
  .phone-left,.phone-right { display:none; }
  .phone-main { min-height:468px; box-shadow:10px 12px 0 var(--blue); }
  .message-card { min-height:210px; font-size:28px; }
  .experience-track { padding:78px 0; }
  .track-head h2,.waterfall-head h2,.selector-copy h1 { font-size:42px; letter-spacing:-1px; }
  .track-scroll { grid-template-columns:repeat(4,235px); width:calc(100% - 16px); margin-left:16px; }
  .track-card { min-height:260px; }
  .skin-waterfall { padding:82px 0 90px; }
  .waterfall-grid { grid-template-columns:1fr; }
  .skin-short { margin-top:0; }
  .skin-tall,.skin-short { min-height:260px; }
  .app-dock { padding-bottom:78px; }
  .selector-hero { padding-top:110px; }
  .install-panel { min-height:315px; padding:24px; box-shadow:9px 11px 0 var(--pink); }
  .panel-main { margin:38px 0 30px; }
  .device-selector,.version-strip { grid-template-columns:1fr; }
  .version-strip div { border-left:0; border-top:1px solid var(--line); }
  .version-strip div:first-child { border-top:0; }
  .download-help { padding-bottom:80px; }
  .help-card { padding:23px; }
  .help-card h2 { font-size:36px; }
  .faq-card summary { font-size:14px; }
  .faq-card p { font-size:13px; }
}