:root{--ink:#29282c;--muted:#706e74;--accent:#b95754;--line:#ece8e5;--paper:#fffdfa}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid #b95754;outline-offset:6px}.wrap{max-width:1180px;margin:auto;padding-left:40px;padding-right:40px}.header{height:94px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 5%;position:sticky;top:0;z-index:10;background:rgba(255,253,250,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(236,232,229,.6)}.brand{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:650}.brand img{border-radius:13px}nav{display:flex;gap:38px;font-size:15px}nav button{border:0;background:none;padding:0}nav a:hover,nav button:hover,.text-button:hover{color:var(--accent)}.header-note{text-align:right;font-size:13px;color:var(--muted);letter-spacing:.07em}.hero{display:grid;grid-template-columns:1.1fr 1fr;min-height:790px;align-items:center;gap:50px;padding-top:48px;padding-bottom:60px}.eyebrow,.step{color:var(--accent);font-size:14px;font-weight:650;letter-spacing:.13em}.hero h1{font-size:clamp(44px,5.1vw,66px);line-height:1.3;letter-spacing:-.04em;margin:25px 0}.hero h1 span{color:var(--accent)}p{font-size:17px;line-height:1.95;color:var(--muted)}.hero p{font-size:18px;margin-bottom:30px}.button{display:inline-block;background:var(--ink);color:white;border-radius:30px;padding:14px 26px;font-size:15px;transition:transform .2s,background .2s}.button:hover{transform:translateY(-3px);background:var(--accent)}.hero-foot{display:flex;align-items:center;gap:13px;font-size:13px;color:var(--muted);margin-top:36px}.hero-foot i{height:3px;width:3px;border-radius:50%;background:#b6a7a0}.hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:650px}.hero-visual:before{content:"";position:absolute;width:440px;height:440px;border-radius:50%;background:linear-gradient(145deg,#fff1e6,#ffe1e3)}.phone{position:relative;overflow:hidden;border-radius:27px;background:#f7f7fd;border:6px solid white;box-shadow:0 16px 40px #42343613,0 0 0 1px #332a2a0c}.phone img{display:block;width:100%;height:auto}.hero-phone{width:274px;transform:rotate(5deg);border-width:7px;border-radius:34px}.orbit-label{position:absolute;font-size:13px;letter-spacing:.04em;background:white;padding:13px 19px;border-radius:9px;box-shadow:0 8px 30px #7143430b;z-index:2}.label-one{left:-15px;top:180px;transform:rotate(-6deg)}.label-two{right:-5px;bottom:110px;transform:rotate(-5deg)}.intro{text-align:center;padding-top:100px;padding-bottom:120px;border-top:1px solid var(--line)}h2{font-size:40px;letter-spacing:-.035em;line-height:1.4;margin:18px 0 24px}.intro p{margin-bottom:28px}.topics{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.topics span{border:1px solid #e5deda;padding:9px 18px;border-radius:30px;font-size:14px;color:#77706c}.scenarios{background:#fff}.section-heading{padding-top:90px;padding-bottom:28px}.section-heading h2{font-size:44px}.feature{display:grid;grid-template-columns:.9fr 1.2fr;gap:70px;align-items:center;padding-top:58px;padding-bottom:88px}.feature h3{font-size:35px;line-height:1.45;letter-spacing:-.03em;margin:19px 0}.feature-copy>p{margin-bottom:23px}dl{margin:27px 0}dl div{padding:15px 0;border-top:1px solid var(--line)}dt{font-size:16px;font-weight:650;margin-bottom:6px}dd{margin:0;font-size:15px;line-height:1.8;color:var(--muted)}p.small-note{font-size:14px}.screen-pair{display:flex;gap:20px;align-items:center;padding:38px 26px;border-radius:32px}.peach{background:#fcf0ea}.green{background:#edf2e9}.blue{background:#edf1f7}.screen-pair figure{margin:0;min-width:0;flex:1}.screen-pair figure:nth-child(2){padding-top:66px}figcaption{text-align:center;font-size:12px;line-height:1.7;margin-top:18px;color:#746d6a}.reverse{grid-template-columns:1.2fr .9fr}.reverse .feature-copy{grid-column:2;grid-row:1}.single-screen{grid-column:1;grid-row:1;display:flex;justify-content:center;padding:42px;border-radius:32px}.single-screen .phone{width:255px}.plain-list{list-style:none;padding:0;margin:25px 0}.plain-list li{font-size:16px;padding:12px 0 12px 22px;position:relative;border-bottom:1px solid var(--line);line-height:1.6}.plain-list li:before{content:"";position:absolute;left:0;top:23px;width:6px;height:6px;background:var(--accent);border-radius:50%}.example{margin-top:28px;border-left:2px solid #dcc4b9;padding-left:20px}.example>span{font-size:14px;font-weight:600}.example p{font-size:15px;margin:8px 0}.example strong{font-weight:500;color:var(--ink)}.closing{text-align:center;padding-top:95px;padding-bottom:100px}.closing img{border-radius:22px}.closing h2{margin-top:23px;margin-bottom:12px}.closing p{margin-top:0}.text-button{border:0;background:none;border-bottom:1px solid #c89a8d;padding:8px 0;color:var(--accent);font-size:15px}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding-top:26px;padding-bottom:30px;font-size:14px}.footer-sub,footer a{color:var(--muted)}dialog{border:1px solid #eee3dd;border-radius:24px;padding:0;width:min(520px,calc(100% - 36px));max-height:85vh;color:var(--ink);background:var(--paper);box-shadow:0 30px 100px #20110f35}dialog::backdrop{background:#24202666;backdrop-filter:blur(5px)}.dialog-inner{padding:44px;position:relative}.close{position:absolute;right:16px;top:12px;border:0;background:none;font-size:30px;color:#736b66;width:40px;height:40px}.timeline{border-left:1px solid #e4c8be;padding-left:25px;margin:32px 0 6px}.timeline article{position:relative;margin-bottom:32px}.timeline article:last-child{margin-bottom:0}.timeline article:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);position:absolute;left:-30px;top:6px}.timeline time{font-size:14px;color:var(--accent);font-weight:600}.timeline h3{font-size:20px;margin:10px 0 0}.timeline p{font-size:16px;margin:8px 0}@media(min-width:1500px){.hero{min-height:820px}}@media(max-width:1000px){.header-note{display:none}.header{grid-template-columns:1fr auto 1fr}.header nav{grid-column:2}.hero{gap:12px}.hero-visual:before{width:340px;height:340px}.orbit-label{font-size:12px;padding:10px}.label-one{left:0}.label-two{right:0}.feature{gap:35px}.screen-pair{gap:12px;padding:25px 16px}.phone{border-width:4px;border-radius:20px}.hero-phone{border-radius:32px}.feature h3{font-size:30px}h2{font-size:34px}}@media(max-width:700px){.wrap{padding-left:24px;padding-right:24px}.header{height:76px;padding:0 20px;grid-template-columns:auto 1fr}.header nav{justify-self:center;gap:26px;margin-left:24px;font-size:14px}.brand{font-size:21px;gap:5px}.brand img{width:42px;height:42px}.hero{grid-template-columns:1fr;text-align:center;padding-top:57px;padding-bottom:38px;gap:10px}.hero h1{font-size:45px;margin:20px 0}.hero p{font-size:16px}.hero-foot{justify-content:center;margin-top:26px}.hero-visual{min-height:605px;max-width:390px;width:100%;margin:auto}.hero-phone{width:235px}.hero-visual:before{width:310px;height:310px}.label-one{top:155px;left:-3px}.label-two{bottom:110px;right:-4px}.intro{padding-top:65px;padding-bottom:70px}.intro h2{font-size:28px}.intro p{font-size:16px}.desktop{display:none}.topics{gap:7px}.topics span{font-size:13px;padding:8px 12px}.section-heading{padding-top:65px;padding-bottom:0}.section-heading h2{font-size:34px}.feature,.reverse{grid-template-columns:1fr;gap:24px;padding-top:42px;padding-bottom:35px}.feature h3{font-size:30px}.feature-copy>p{font-size:16px}.reverse .feature-copy,.single-screen{grid-column:auto;grid-row:auto}.screen-pair{margin-left:-8px;margin-right:-8px;padding:25px 16px;border-radius:23px}.screen-pair figure:nth-child(2){padding-top:45px}figcaption{font-size:12px}.single-screen{padding:28px}.single-screen .phone{width:235px}.closing{padding-top:70px;padding-bottom:65px}.closing h2{font-size:29px}footer{font-size:12px;gap:15px}.dialog-inner{padding:38px 27px}.dialog-inner h2{font-size:31px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}
/* Mobile screenshots stay large enough to inspect; navigation is touch friendly. */
@media(max-width:700px){
  .header nav a,.header nav button{display:flex;align-items:center;min-height:44px}
  .screen-pair{flex-direction:column;gap:32px;padding:30px 24px}
  .screen-pair figure{width:min(100%,280px);flex:none}
  .screen-pair figure:nth-child(2){padding-top:0}
  figcaption{font-size:14px}
  .close{width:44px;height:44px}
}

.store-links{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:26px 0 16px}.store-links a{display:block;border-radius:7px;transition:transform .2s}.store-links a:hover{transform:translateY(-2px)}.store-links img{display:block;width:162px;height:48px;border-radius:0}.discover-link{display:inline-block}.closing .store-links{justify-content:center;margin-bottom:24px}.developer-credit{border-top:1px solid var(--line);padding-top:20px;margin:28px 0 0;font-size:14px}.developer-credit span{display:block;color:var(--muted)}.developer-credit strong{font-size:16px;font-weight:500;color:var(--ink)}@media(max-width:700px){.store-links{justify-content:center}}