/* The site follows the watercolor MY and GO characters: soft paper, round shapes,
   blue/lilac for MY, blue/apricot for GO, and small lively scroll movements. */
:root{--cream:#fffaf4;--coral:#ffa775;--dark:#2f3156;--line:#6873a626;--blue:#78a6f8;--purple:#ae92ed;--peach:#ffa775;--ink:#2f3156}
html{scroll-padding-top:12px}
body{background:#fffaf4;color:var(--ink);font-family:"Trebuchet MS","Arial Rounded MT Bold","PingFang SC","Microsoft YaHei",sans-serif;overflow-x:hidden}
a,button,select{transition:transform .25s ease,background-color .25s ease,box-shadow .25s ease}
a:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid #7c91ee;outline-offset:4px}
.scroll-progress{height:5px;background:linear-gradient(90deg,#89b5ff,#b997ef,#ffae88);border-radius:0 10px 10px 0}
.nav{height:89px;padding:0 5vw;background:#fffaf5e8;color:var(--ink);border-bottom:1px solid #6f79a218;backdrop-filter:blur(18px);position:absolute}
.nav .wordmark{width:auto;flex:0 0 auto;letter-spacing:0}
.playful-brand{display:flex;align-items:center;gap:8px;white-space:nowrap}
.playful-brand img{display:block;width:84px;height:55px;object-fit:contain;transform:rotate(-7deg)}
.playful-brand span{font-size:21px;font-weight:900;letter-spacing:-1.4px;color:#576cc7}
.nav nav{gap:11px;margin-right:13px}
.nav nav a{color:#555b86;font-size:12px;letter-spacing:0;font-weight:750;padding:11px 15px;border-radius:99px}
.nav nav a:hover{background:#e9e5ff;transform:translateY(-2px)}
.language-control{color:#565b81;margin-right:16px;gap:3px}
.language-control>span{font-size:17px;color:#a28be6}
.language-control select{color:#565b81;border:1px solid #d9d8ed;border-radius:99px;padding:8px 12px;background:#fff;max-width:136px;font-weight:700;box-shadow:0 3px 0 #e8e7f4}
.nav-cta{border:0;background:#ffae83;color:#49344a;border-radius:99px;box-shadow:0 5px 0 #df8f6d;font-weight:800;white-space:nowrap;padding:12px 20px}
.nav-cta span{padding-left:12px}
.nav-cta:hover,.pill:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 8px 0 #df8f6d}
.hero{height:100svh;min-height:850px;max-height:1150px;padding:150px 6vw 90px;background:radial-gradient(circle at 75% 24%,#e7e2ff 0,transparent 32%),radial-gradient(circle at 24% 83%,#dceaff 0,transparent 34%),#fffaf4;color:var(--ink)}
.hero:before{content:"";position:absolute;width:210px;height:210px;right:-70px;top:120px;border:3px dashed #ffb899;border-radius:45% 55% 48% 52%;transform:rotate(22deg);opacity:.7}
.hero-photo{background:none!important;animation:none!important;transform:none!important}
.hero-shade{background:radial-gradient(circle at 80% 79%,#ffdbcba0,transparent 23%);z-index:-1}
.hero-topline{color:#7d7aab;font-weight:800;font-size:10px;letter-spacing:.08em;opacity:.8}
.hero-topline>span:first-child{background:#fff;border:1px solid #c8c6ef;border-radius:99px;padding:9px 14px;box-shadow:0 4px 0 #e7e5fa}
.hero-topline>span:last-child{font-size:11px;letter-spacing:0}
.live-dot{background:#ffa672;box-shadow:0 0 0 4px #ffeadf}
.hero-copy{width:52%;max-width:675px;margin-top:74px;transform:translateY(calc(var(--hero-progress,0)*-44px));opacity:calc(1 - var(--hero-progress,0)*.65)}
.eyebrow{display:inline-block;background:#eae7ff;border-radius:99px;color:#7d67b8;padding:9px 15px;font-size:11px;font-weight:900;letter-spacing:.06em;margin-bottom:23px}
.hero h1{font-size:clamp(53px,6.1vw,100px);font-weight:900;letter-spacing:-.07em;line-height:1.14;color:#363767;max-width:690px;text-wrap:balance}
.hero h1 em{color:#7c9be6;text-shadow:3px 4px 0 #d7e4ff}
.hero .intro{color:#696a91;font-size:16px;line-height:1.85;max-width:470px;font-weight:600}
.hero-actions{margin-top:34px}
.pill{background:#ffad7e;color:#493753;border:0;border-radius:99px;box-shadow:0 6px 0 #e79570;font-size:15px;font-weight:900;padding:17px 24px;gap:30px}
.pill span{font-size:20px;line-height:1}
.hero-doodle{position:absolute;pointer-events:none;z-index:1;font-weight:900;line-height:1}
.hero-doodle-sun{top:145px;left:46%;font-size:76px;color:#ffb277;transform:rotate(-17deg);opacity:.8}
.hero-doodle-heart{bottom:130px;left:42%;font-size:96px;color:#ae99e8;transform:rotate(12deg);opacity:.65}
.hero-devices{width:285px;top:23%;right:12%;transform:translateY(calc(var(--hero-progress,0)*65px)) rotate(calc(var(--hero-progress,0)*-5deg))}
.hero-device{border:8px solid #fff;border-radius:48px;box-shadow:0 18px 0 #d4cdf3,0 25px 60px #7b79a447;outline:2px solid #626285;transform:rotate(6deg)}
.hero-snapshot{padding:7px 7px 11px;border:2px solid #fff;border-radius:24px;background:#fff;box-shadow:0 12px 0 #d8e4ff,0 20px 35px #67689129}
.hero-snapshot img{border-radius:16px;object-fit:cover}
.hero-snapshot span{font-family:inherit;color:#7c78a0;font-size:8px;font-weight:800;letter-spacing:0}
.snapshot-a{left:-105px;top:60px}
.snapshot-b{right:-110px;bottom:100px;box-shadow:0 12px 0 #ffdecb,0 20px 35px #67689129}
.hero-character{position:absolute;z-index:5;pointer-events:none;filter:drop-shadow(0 14px 10px #656a9b25);animation:character-bob 4.5s ease-in-out infinite}
.hero-character-my{width:210px;right:28%;top:15%;z-index:0;transform:rotate(-14deg)}
.hero-character-go{width:190px;right:0;bottom:8%;animation-delay:-1.5s;transform:rotate(12deg)}
.hero-foot{color:#7f80a4;font-size:10px;font-weight:800;letter-spacing:0;bottom:24px;left:6%;right:6%}
.hero-foot b{font-weight:800}
.film-line{background:#b6b4d9;height:2px;border-radius:3px}
.hero-foot a{color:#6a71bd}
.ticker{background:#8baef5;color:#fff;border-block:5px solid #fff;padding:14px 0;font-size:15px;font-weight:900;letter-spacing:.04em;box-shadow:0 8px 0 #c9dbff}
.ticker span{color:#ffe3a6;margin:0 28px}
.gallery-scroll{background:#e9f2ff;color:#363767}
.gallery-pin{background:radial-gradient(circle at 88% 17%,#ffdcd0,transparent 24%),#e9f2ff}
.gallery-pin .section-heading h2{font-weight:900;letter-spacing:-.055em;line-height:1.2}
.gallery-pin .section-heading h2 .muted{color:#8d7cd5}
.gallery-pin .section-heading>p:last-child{color:#727799;font-weight:650}
.gallery-character{position:absolute;width:160px;right:5%;top:10%;z-index:2;transform:rotate(12deg);pointer-events:none;filter:drop-shadow(0 12px 12px #5f67a12b)}
.scene-card{background:#fff;color:#fff;border:9px solid #fff;border-radius:34px;box-shadow:0 15px 0 #ceddf8,0 22px 42px #7985af33}
.scene-card img{border-radius:24px}
.scene-card:after{inset:9px;border-radius:24px;background:linear-gradient(transparent 40%,#242d5a9c)}
.scene-card>div{bottom:33px;left:32px;z-index:2}
.scene-card small{letter-spacing:.06em;font-family:inherit;font-weight:850}
.scene-card h3{font-weight:900;letter-spacing:-.04em}
.scene-card p{color:#fff;font-weight:650}
.scene-number{top:23px;left:23px;background:#fff;color:#6f79c5;border:0;font-weight:900;width:40px;height:40px;box-shadow:0 4px 0 #cdd9f6}
.gallery-meter{font-family:inherit;color:#686c9d;font-weight:900}
.gallery-meter>div{height:7px;background:#cad8f1;border-radius:99px;overflow:hidden}
.gallery-meter i{background:linear-gradient(90deg,#8daaf3,#ffad88);border-radius:99px}
.dual-section{background:radial-gradient(circle at 17% 28%,#ffe2d0,transparent 28%),#fff8ef;color:#39375f}
.dual-pin{gap:7vw}
.dual-copy h2{font-weight:900;line-height:1.18;letter-spacing:-.055em}
.dual-copy h2 em{color:#f39a7c}
.dual-copy>p:last-child{color:#6e708f;font-size:16px;font-weight:650}
.dual-visual{border:9px solid #fff;border-radius:38px;box-shadow:0 15px 0 #f4cfcb,0 22px 50px #a5717d38}
.dual-world{border-radius:28px}
.dual-visual:after{border-radius:28px}
.dual-self{border:7px solid #fff;border-radius:28px;box-shadow:0 9px 0 #d7c7f0,0 15px 30px #5e4d7933}
.dual-self span,.dual-rear{background:#fff;color:#565481;border:0;border-radius:99px;box-shadow:0 4px 0 #d7d9ed;font-weight:900;backdrop-filter:none}
.dual-self span{border-radius:13px}
.dual-rec{background:#fff;color:#ec7d79;box-shadow:0 4px 0 #ead4d4;font-family:inherit;font-weight:900}
.dual-character{position:absolute;width:125px;top:9%;left:49%;z-index:3;transform:rotate(-15deg);pointer-events:none}
.app-journey{background:#eeeaff;color:#37345c}
.journey-pin,.app-journey[data-view=my] .journey-pin{background:radial-gradient(circle at 88% 45%,#d9eaff 0,transparent 48%),#eeeaff}
.app-journey[data-view=record] .journey-pin{background:radial-gradient(circle at 83% 45%,#ffdfcc 0,transparent 48%),#fff0e7}
.app-journey[data-view=us] .journey-pin{background:radial-gradient(circle at 83% 45%,#e2d2ff 0,transparent 48%),#f4ebff}
.journey-copy{position:relative;z-index:4}
.journey-copy h2{font-weight:900;letter-spacing:-.055em;line-height:1.2}
.journey-copy em,.app-journey[data-view=my] .journey-copy em{color:#7fa5e8}
.app-journey[data-view=record] .journey-copy em{color:#f39675}
.app-journey[data-view=us] .journey-copy em{color:#a98adc}
.journey-copy>p:not(.eyebrow){color:#666989;font-weight:650;font-size:15px}
.journey-step{font-family:inherit;font-weight:900;color:#8d8cad}
.journey-step>span:first-child{color:#8583cc}
.journey-tabs{background:#fff;border:2px solid #d5cff5;padding:6px;box-shadow:0 6px 0 #d7d4f0}
.journey-tabs button{font-weight:900;color:#77769d}
.journey-tabs button.active{background:#c8d9ff;color:#444778;box-shadow:0 3px 0 #adbee8}
.app-journey[data-view=record] .journey-tabs button.active{background:#ffd6be;box-shadow:0 3px 0 #efb79c}
.app-journey[data-view=us] .journey-tabs button.active{background:#e0cefa;box-shadow:0 3px 0 #c8b2eb}
.journey-device{border:8px solid #fff;border-radius:46px;outline:2px solid #747295;box-shadow:0 16px 0 #c8c5e8,0 32px 64px #7772a53a}
.journey-character{position:absolute;width:180px;left:2%;bottom:7%;z-index:1;transform:rotate(-12deg);pointer-events:none;filter:drop-shadow(0 12px 12px #6862a32b)}
.tag-bottom{display:none}
.journey-timeline{height:6px;background:#d5c9ee}
.journey-timeline i{background:linear-gradient(90deg,#91b6f6,#ffae89)}
.manifesto{background:#dcecff;color:#37345c;min-height:730px;padding-block:100px}
.manifesto h2{background:none!important;color:#37345c!important;font-weight:900;letter-spacing:-.055em;line-height:1.28}
.manifesto h2 span:first-child{color:#819fe7}
.manifesto h2 span:last-child{color:#ee9d85}
.manifesto h2 span:after{border-color:#ffb98e;border-width:4px;bottom:-8px}
.values{border:0;gap:18px;max-width:1100px;margin:55px auto 0;padding:0;text-align:left}
.values>div{background:#fff;border:3px solid #fff;border-radius:28px;padding:28px;box-shadow:0 9px 0 #bfd3fa;transform:rotate(-1deg)}
.values>div:nth-child(2){box-shadow:0 9px 0 #d8c5f2;transform:rotate(1deg)}
.values>div:nth-child(3){box-shadow:0 9px 0 #ffd4bd}
.values>div>span{display:grid;place-items:center;width:46px;height:46px;border-radius:16px;background:#e4edff;color:#819fec;font-size:29px}
.values>div:nth-child(2)>span{background:#eee5ff;color:#aa8cde}
.values>div:nth-child(3)>span{background:#fff0e4;color:#f39c79}
.values h3{font-size:18px;font-weight:900;margin:20px 0 7px}
.values p{font-size:13px;color:#666b89;line-height:1.7;font-weight:650}
.closing{background:radial-gradient(circle at 22% 19%,#d9e9ff,transparent 29%),radial-gradient(circle at 78% 76%,#ffdbcb,transparent 30%),#fff9f0;color:#38345f;min-height:750px}
.closing-photo{background:none!important;transform:none!important}
.closing:before,.closing:after{content:"✳";position:absolute;font-size:110px;color:#b8a5ea;opacity:.5;pointer-events:none;transform:rotate(-15deg)}
.closing:before{left:11%;top:17%}
.closing:after{right:10%;bottom:13%;color:#ffb58c;font-size:90px;transform:rotate(24deg)}
.closing-mark{display:block;width:min(340px,55vw);height:auto;border-radius:0!important;box-shadow:none!important;margin:0 auto 15px!important;filter:drop-shadow(0 14px 12px #a9a2d729)}
.closing h2{color:#37345c;font-weight:900;letter-spacing:-.06em;line-height:1.14}
.closing h2 em{color:#ee987d}
.closing-content>p:not(.eyebrow){color:#696a8d;font-size:16px;font-weight:700}
.closing-content>small{color:#8b89aa;font-weight:700;font-size:11px}
footer{background:#dedfff;color:#4e507e;padding:40px 6vw 32px}
.footer-top{border-color:#a9a9d05c}
.footer-mark{display:flex;align-items:center;gap:6px}
.footer-mark img{width:68px;height:52px;object-fit:contain}
.footer-mark img:last-child{width:74px}
.footer-top>p,.footer-bottom,.footer-bottom nav a{color:#61628c;font-weight:800;letter-spacing:0}
.footer-bottom{font-size:11px}
.footer-bottom nav a{font-size:11px}
@keyframes character-bob{0%,100%{translate:0 0}50%{translate:0 -11px}}

@media(max-width:1100px){.hero-copy{width:50%}.hero-character-my{right:28%;width:160px}.hero-character-go{width:150px}.hero h1{font-size:clamp(50px,6.1vw,80px)}.nav nav{display:none}.dual-character{left:auto;right:5%;top:4%}}
@media(max-width:760px){
  .nav{height:73px;padding:0 5vw;gap:5px}.playful-brand img{width:56px;height:45px}.playful-brand span{font-size:17px}.language-control{margin-left:auto;margin-right:0}.language-control>span{display:none}.language-control select{max-width:108px;font-size:11px;padding:7px 8px}.nav-cta{display:none}
  .hero{height:auto;min-height:1090px;max-height:none;padding:104px 6vw 86px;background:radial-gradient(circle at 68% 65%,#e6e2ff 0,transparent 36%),radial-gradient(circle at 10% 9%,#f5e9ff 0,transparent 35%),#fffaf4}
  .hero-topline>span:last-child{display:none}.hero-topline>span:first-child{font-size:7px;padding:8px 11px}
  .hero-copy{width:100%;margin-top:30px;transform:translateY(calc(var(--hero-progress,0)*-22px))}.hero h1{font-size:clamp(43px,11.5vw,70px);letter-spacing:-.055em;line-height:1.18;max-width:100%}.hero .intro{font-size:13px;line-height:1.8;max-width:95%}.hero .eyebrow{font-size:9px;margin-bottom:17px}.hero-actions{margin-top:22px}.pill{font-size:12px;padding:14px 18px;gap:20px}
  .hero-doodle-sun{left:auto;right:4%;top:170px;font-size:45px}.hero-doodle-heart{left:3%;bottom:130px;font-size:56px}
  .hero-devices{top:auto;right:auto;width:224px;margin:80px auto 72px;transform:translateY(calc(var(--hero-progress,0)*25px))}.hero-device{width:224px;height:487px;border:6px solid #fff;border-radius:37px}.hero-snapshot{width:110px}.snapshot-a{left:-48px;top:65px}.snapshot-b{right:-37px;bottom:45px}.hero-character-my{width:90px;right:74%;top:43%;z-index:4}.hero-character-go{width:120px;right:2%;bottom:8%}.hero-foot{bottom:18px;font-size:8px;gap:10px}.hero-foot b{display:none}
  .ticker{font-size:11px;padding:11px 0}.gallery-character{display:none}.gallery-pin .section-heading{margin-top:8px}.gallery-pin .section-heading h2{font-size:29px;line-height:1.22}.gallery-pin .section-heading>p:last-child{font-size:11px}.scene-card{border-width:6px;border-radius:24px;box-shadow:0 9px 0 #ceddf8,0 15px 30px #7985af33}.scene-card img,.scene-card:after{border-radius:17px}.scene-card>div{left:21px;bottom:24px}.scene-card h3{font-size:24px}
  .dual-section{height:155vh}.dual-pin{padding:42px 7vw 55px;min-height:700px;gap:20px}.dual-copy h2{font-size:32px}.dual-copy>p:last-child{font-size:12px}.dual-character{width:82px;right:5%;top:5%}.dual-visual{border-width:6px;border-radius:27px;width:95%;box-shadow:0 8px 0 #f4cfcb,0 16px 32px #a5717d38}.dual-world,.dual-visual:after{border-radius:20px}.dual-self{border-width:4px;border-radius:18px;right:-15px}.dual-self span,.dual-rear{font-size:8px}
  .journey-pin{min-height:700px}.journey-copy h2{font-size:31px;max-width:88%}.journey-copy>p:not(.eyebrow){font-size:11px}.journey-character{width:95px;left:3%;bottom:5%;z-index:4}.journey-device{border-width:5px;border-radius:33px;box-shadow:0 9px 0 #c8c5e8,0 18px 36px #7772a53a}.journey-tabs button{font-size:11px;padding:8px 20px}
  .manifesto{min-height:0;padding:90px 6vw}.manifesto h2{font-size:29px;line-height:1.35}.values{display:grid;grid-template-columns:1fr;gap:19px;margin-top:40px}.values>div{padding:21px 22px;transform:none!important}.values>div>span{position:static;width:39px;height:39px;font-size:23px}.values h3{margin:12px 0 5px;font-size:17px}.values p{font-size:11px}
  .closing{min-height:650px;padding:70px 6vw}.closing-mark{width:210px}.closing h2{font-size:clamp(37px,10vw,54px);letter-spacing:-.05em}.closing-content>p:not(.eyebrow){font-size:13px}.closing:before{font-size:55px;left:3%;top:13%}.closing:after{font-size:55px;right:3%;bottom:10%}
  footer{padding:26px 6vw}.footer-mark img{width:50px;height:40px}.footer-mark img:last-child{width:57px}.footer-bottom{gap:16px;flex-wrap:wrap}.footer-bottom nav{gap:16px}
}
@media(max-width:380px){.hero{min-height:1120px}.hero-character-my{top:44%;right:73%}.hero h1{font-size:41px}.playful-brand span{font-size:15px}.language-control select{max-width:94px}.journey-copy h2{font-size:28px}}
@media(prefers-reduced-motion:reduce){.hero-character{animation:none}.hero,.gallery-pin,.dual-section,.journey-pin,.manifesto,.closing{scroll-behavior:auto}.hero-copy{transform:none;opacity:1}.hero-devices{transform:none}.gallery-character,.dual-character,.journey-character{transform:none}.journey-pin{background:#eeeaff!important}.app-journey[data-view=record] .journey-pin{background:#fff0e7!important}.app-journey[data-view=us] .journey-pin{background:#f4ebff!important}}