@charset "UTF-8";
:root {
  --paper: #f8f7f9;
  --ink: #38343e;
  --muted: #747474;
  --serif: "Songti SC", "Noto Serif CJK SC", "STSong", Georgia, serif;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", sans-serif;
  color: var(--ink);
  background: #191919;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  scroll-padding-top: 32px;
}
* { box-sizing: border-box; }
body { margin: 0; }
h1, h2, h3, p { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { border: 0; color: inherit; font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #8b75be; outline-offset: 5px; }
[hidden] { display: none !important; }
.symbols { position: absolute; width: 0; height: 0; }
.shell { width: min(1440px, calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 16px; background: #333; color: #fff; padding: 12px 20px; z-index: 100; }
.skip-link:focus { top: 10px; }
.site-header { height: 86px; background: var(--paper); position: relative; z-index: 20; }
.nav { height: 100%; display: flex; align-items: center; gap: 36px; position: relative; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 600; letter-spacing: -1.2px; }
.brand img { border-radius: 8px; flex: 0 0 auto; }
.nav-links { display: flex; gap: 30px; align-items: center; font-size: 15px; color: #646464; }
.nav-links a:hover { color: #222; }
.button { display: inline-flex; justify-content: center; align-items: center; padding: 0 30px; min-height: 44px; min-width: 119px; border-radius: 999px; font-size: 15px; transition: background .2s, transform .2s; }
.button:active { transform: scale(.96); }
.button-dark { background: #363635; color: #fff; }
.button-dark:hover { background: #202020; }
.button-light { background: #fff; color: #333; }
.button-light:hover { background: #e7e7e7; }
.nav-cta { margin-left: auto; }
.menu-button, .mobile-menu { display: none; }
main { background: var(--paper); border-radius: 0 0 48px 48px; overflow: clip; position: relative; z-index: 1; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
.hero { padding: 64px 24px 80px; text-align: center; }
.hero-copy { position: relative; z-index: 3; }
.status-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 2px solid transparent; border-radius: 999px; background: linear-gradient(var(--paper),var(--paper)) padding-box, linear-gradient(120deg,#f2eddc,#e5def1,#dee5ef) border-box; font-size: 14px; }
.hero h1 { font-size: 80px; line-height: 1.1; letter-spacing: -.045em; margin: 24px auto 28px; }
.hero-copy > p { font-size: 20px; line-height: 1.4; color: var(--muted); }
.hero-copy > .button { margin-top: 40px; }
.hero-visual { height: 850px; width: min(950px,100%); margin: 58px auto 0; position: relative; isolation: isolate; }
.hero-halo { position: absolute; width: 780px; height: 790px; left: 50%; top: -20px; transform: translateX(-50%); background: radial-gradient(ellipse at 40% 40%,#d8caec80,transparent 56%),radial-gradient(ellipse at 65% 66%,#d5e4db80,transparent 52%); mask-image: radial-gradient(ellipse,#000 25%,transparent 70%); pointer-events: none; z-index: -1; }
.device { --radius: 43px; padding: 6px; border-radius: var(--radius); background: linear-gradient(125deg,#929694,#ebedeb 20%,#555c58 45%,#c5cbc7 75%,#646b67); box-shadow: 0 0 0 1px #a9adaa,0 17px 24px -12px #38454855; position: relative; }
.device > img { width: 100%; height: auto; border: 4px solid #252a27; border-radius: calc(var(--radius) - 5px); aspect-ratio: 1206 / 2622; background: #fff; }
.device::before { content: ""; width: 3px; height: 54px; border-radius: 3px; background: #767c77; position: absolute; right: -2px; top: 24%; }
.phone-place { position: absolute; width: 290px; top: 94px; left: 50%; }
.phone-place-front { margin-left: -235px; z-index: 3; transform: rotate(-6deg); }
.phone-place-back { margin-left: -13px; top: 138px; z-index: 2; transform: rotate(8deg); }
.cloud { position: absolute; pointer-events: none; height: auto; }
.hero-cloud-left { width: 340px; left: -15px; top: 67px; z-index: 4; }
.hero-cloud-right { width: 355px; right: -14px; top: 565px; z-index: 5; }
.benefit-row { max-width: 910px; display: grid; grid-template-columns: repeat(3,1fr); margin: 12px auto 0; gap: 44px; }
.benefit-row > div { display: flex; flex-direction: column; align-items: center; }
.icon-bubble { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(#f0f0f0,#ededed); display: inline-grid; place-items: center; }
.icon-bubble svg { width: 23px; height: 23px; fill: none; stroke: #737373; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.benefit-row p { font-family: var(--serif); font-size: 25px; line-height: 1.22; margin-top: 18px; }
.device-note { color: #929292; font-size: 11px; margin-top: 46px; }
.section { padding: 64px 0; }
.section-heading { text-align: center; padding-inline: 20px; position: relative; z-index: 2; }
.section-heading h2 { font-size: 58px; line-height: 1.12; letter-spacing: -.045em; }
.section-heading > p { color: var(--muted); font-size: 20px; line-height: 1.4; margin-top: 26px; }
.principle-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 80px; }
.principle-card { background: linear-gradient(160deg,#eee9f4,#f5f3f8); border-radius: 24px; padding: 54px 24px 48px; text-align: center; }
.mini-square { width: 204px; height: 204px; margin: 0 auto 38px; background: #fff; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.mini-categories { gap: 19px; }
.mini-categories span { display: flex; align-items: center; gap: 12px; font-size: 13px; width: 144px; text-align: left; }
.mini-categories i { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dot-pink { background: #dfa2ae; }.dot-green { background: #8cb59c; }.dot-peach { background: #dfb98b; }
.mini-date small { font-size: 14px; color: #666; }
.mini-date strong { font-size: 76px; font-weight: 400; line-height: 1.12; letter-spacing: -4px; }
.mini-date span { background: #f1f1f3; border-radius: 999px; font-size: 11px; padding: 4px 10px; margin-top: 12px; }
.mini-done svg { width: 65px; height: 65px; fill: none; stroke: #9eacaa; stroke-width: 1; }
.mini-done > span { font-size: 15px; margin-top: 16px; color: #777; text-decoration: line-through; }
.mini-done small { font-size: 11px; color: #a1a1a1; margin-top: 6px; }
.principle-card h3 { font-size: 30px; line-height: 1.35; }
.principle-card > p { font-size: 19px; line-height: 1.55; color: var(--muted); margin-top: 16px; }
.product-section { padding-bottom: 128px; }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 96px; }
.product-card { height: 612px; text-align: center; background: linear-gradient(150deg,#eee8f5,#f5f3f8); border-radius: 32px; position: relative; overflow: hidden; padding: 35px 20px 0; }
.product-card:nth-child(2) { background: linear-gradient(150deg,#e7efe9,#f3f7f4); }
.product-card h3 { font-size: 46px; letter-spacing: -.02em; }
.product-card > p { font-size: 18px; color: var(--muted); margin-top: 10px; }
.more-link { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; }
.more-link span { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #383a3a; color: #fff; font-family: Arial,sans-serif; font-size: 15px; line-height: 1; }
.more-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.product-card > a { margin-top: 18px; }
.product-phone { width: 260px; margin: 55px auto 0; }
.privacy-section { background: #fff; padding: 128px 24px 75px; text-align: center; }
.privacy-scene { position: relative; max-width: 1140px; height: 490px; margin: 55px auto 0; display: grid; grid-template-columns: 1fr 420px 1fr; grid-template-rows: 1fr 1fr; align-items: center; gap: 20px 32px; }
.privacy-point h3 { font-family: inherit; font-size: 16px; font-weight: 600; margin: 14px 0 9px; }
.privacy-point p { font-size: 14px; line-height: 1.4; color: var(--muted); }
.privacy-point:nth-child(1) { grid-area: 1/1; }.privacy-point:nth-child(2) { grid-area: 1/3; }.privacy-point:nth-child(4) { grid-area: 2/1; }.privacy-point:nth-child(5) { grid-area: 2/3; }
.privacy-sphere { grid-area: 1/2/3; width: 420px; height: 420px; border-radius: 34%; background: radial-gradient(circle at 30% 25%,#fff,#f4f0f9 60%,#e7dff0); position: relative; display: grid; place-items: center; overflow: hidden; }
.sphere-lines { position: absolute; inset: 30px; border: 1px solid #d9cfe5; border-radius: 28%; transform: rotate(-14deg); }
.sphere-lines::after { content: ""; position: absolute; inset: 24px; border: 1px solid #e0d8e9; border-radius: 25%; transform: rotate(28deg); }
.privacy-sphere img { width: 148px; border-radius: 36px; transform: rotate(-8deg); box-shadow: 14px 26px 36px #64799a24; position: relative; }
.privacy-section > a { margin-top: 30px; }
.widget-section { padding: 125px 24px 70px; position: relative; background: linear-gradient(#ebe5f2, var(--paper) 94%); isolation: isolate; }
.widget-cloud-left { left: -70px; top: 74px; width: 380px; z-index: -1; }.widget-cloud-right { right: -75px; top: 0; width: 420px; z-index: -1; }
.widget-selector { display: flex; justify-content: center; gap: 3px; width: fit-content; margin: 27px auto 35px; padding: 4px; border-radius: 99px; background: #dae3ed; position: relative; z-index: 3; }
.widget-selector button { min-width: 68px; min-height: 36px; border-radius: 99px; background: transparent; color: #627085; font-size: 13px; }
.widget-selector button[aria-selected=true] { background: #fff; color: #363635; box-shadow: 0 2px 5px #6a7b8b12; }
.widget-view { height: 390px; max-width: 800px; margin: 0 auto; position: relative; }
.widget-panel { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.widget-panel img { max-width: 100%; width: auto; max-height: 290px; border-radius: 25px; box-shadow: 0 20px 45px -25px #62708077; }
#widget-panel-medium img { width: 560px; }
.widget-panel p { font-size: 14px; color: #747c84; text-align: center; margin-top: 30px; }
.task-section { padding: 40px 24px 190px; }
.task-demo { max-width: 485px; margin: 70px auto 0; }
.demo-group + .demo-group { margin-top: 24px; margin-left: 40px; }
.task-tag { display: inline-block; padding: 6px 13px; border-radius: 99px; font-size: 12px; margin-bottom: 7px; }
.tag-green { background: #e6eeea; }.tag-peach { background: #f4eadf; }
.demo-task { display: flex; width: 100%; align-items: center; gap: 14px; background: #fff; border-radius: 18px; padding: 24px 22px; text-align: left; box-shadow: 0 12px 28px #3e414006; }
.demo-check { width: 25px; height: 25px; display: grid; place-items: center; border: 1.5px solid #ac9ad1; border-radius: 50%; color: transparent; font-size: 15px; flex: 0 0 auto; transition: background .2s,color .2s; }
.demo-task[aria-pressed=true] .demo-check { color: #fff; background: #ac9ad1; }
.demo-task[aria-pressed=true] .task-label { text-decoration: line-through; color: #999; }
.task-label { font-size: 16px; }.demo-task small { color: #a4a4a4; font-size: 10px; margin-left: auto; }
.demo-status { text-align: center; font-size: 12px; color: #888; margin-top: 27px; }
.demo-reset { display: block; margin: 12px auto 0; background: transparent; color: #888; font-size: 11px; padding: 8px; }
.demo-task { position: relative; overflow: visible; }
.task-confetti { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 5; }
.task-confetti i { position: absolute; left: -3px; top: -4px; width: 6px; height: 9px; border-radius: 1px; pointer-events: none; }
.calendar-banner { height: 790px; padding-top: 90px; position: relative; overflow: hidden; background: linear-gradient(#eee8f5,#f3f1f5 55%,#e6eee8); }
.calendar-banner .more-link { margin-top: 25px; }
.banner-phone { position: absolute; width: 250px; left: 50%; top: 352px; margin-left: -125px; transform: perspective(1000px) rotateY(-18deg) rotate(8deg); }
.cloud-bank { position: absolute; z-index: 3; height: 280px; bottom: -25px; width: 100%; pointer-events: none; }
.cloud-bank img { position: absolute; width: 100%; max-width: none; height: 100%; object-fit: cover; bottom: 0; left: 0; }
.faq-section { padding: 150px 24px 115px; }
.faq-list { width: min(608px,100%); margin: 64px auto 0; }
.faq-list details { background: #fff; border-radius: 8px; margin-bottom: 16px; }
.faq-list summary { list-style: none; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; font-family: var(--serif); font-size: 18px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span { width: 22px; height: 22px; background: #f2f2f2; border-radius: 50%; position: relative; flex: 0 0 auto; }
.faq-list summary > span::before, .faq-list summary > span::after { content: ""; width: 8px; height: 1px; background: #888; position: absolute; top: 10.5px; left: 7px; }
.faq-list summary > span::after { transform: rotate(90deg); transition: transform .2s; }
.faq-list details[open] summary > span::after { transform: rotate(0); }
.faq-list details > p { padding: 0 52px 24px 24px; color: var(--muted); line-height: 1.7; font-size: 14px; }
.download-section { padding: 170px 0 190px; }
.download-card { position: relative; min-height: 355px; display: grid; grid-template-columns: 1fr 1fr; }
.download-steps { background: linear-gradient(140deg,#e5daef,#eef0e8); border-radius: 30px 0 0 30px; padding: 52px 40px 38px; }
.download-steps h3, .download-copy h3 { font-size: 34px; line-height: 1.08; letter-spacing: -.04em; }
.download-steps ol { list-style: none; padding: 0; margin: 22px 0 0; }
.download-steps li { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-top: 12px; }
.download-steps li span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ffffffa6; font-size: 11px; }
.download-steps > p { font-size: 11px; position: absolute; bottom: -27px; }
.download-copy { background: linear-gradient(120deg,#272727,#191919); color: #fff; border-radius: 0 30px 30px 0; padding: 56px 55px 44px 55%; }
.download-copy > p { margin-top: 16px; font-size: 12px; color: #ccc; white-space: nowrap; }
.download-copy .button { margin-top: 24px; min-height: 38px; min-width: 100px; font-size: 13px; padding: 0 22px; }
.download-device { position: absolute; width: 268px; left: 50%; margin-left: -134px; top: -105px; transform: rotate(8deg); }
.site-footer { color: #fff; padding-top: 95px; overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 32px; }
.footer-grid .brand { align-self: start; font-size: 21px; }
.footer-grid h3 { font-size: 14px; line-height: 1.4; font-family: inherit; font-weight: 400; margin-bottom: 20px; }
.footer-grid a:not(.brand),.footer-grid p { display: block; color: #888; font-size: 13px; line-height: 2.05; }
.footer-grid a:hover { color: #fff; }
.footer-wordmark { font-family: "Helvetica Neue",Arial,sans-serif; font-weight: 400; font-size: 24.2vw; letter-spacing: -.065em; line-height: .78; margin: 125px 0 -12px; text-align: center; }
dialog { width: min(390px,calc(100% - 32px)); padding: 42px 30px 30px; border: 0; border-radius: 24px; text-align: center; color: var(--ink); }
dialog::backdrop { background: #25252577; }
dialog > img { margin: 0 auto 20px; border-radius: 18px; }
dialog h2 { font-size: 32px; }dialog p { margin: 16px 0 24px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.dialog-close { position: absolute; top: 12px; right: 16px; width: 32px; height: 32px; background: #f5f5f5; border-radius: 50%; font-size: 22px; }
@media (min-width: 1600px) { .hero h1 { font-size: 88px; }.section-heading h2 { font-size: 64px; } }
@media (max-width: 960px) {
  .privacy-scene { grid-template-columns: 1fr 300px 1fr; gap: 12px; }.privacy-sphere { width: 300px; height: 300px; }
  .principle-card { padding-inline: 14px; }.mini-square { width: 174px; height: 174px; }.principle-card > p { font-size: 16px; }
  .download-copy { padding-left: 45%; padding-right: 24px; }.download-device { width: 230px; top: -64px; }.download-steps h3,.download-copy h3 { font-size: 28px; }
}
@media (max-width: 700px) {
  .shell { width: calc(100% - 32px); }.site-header { height: 76px; }.nav { gap: 14px; }.brand { font-size: 23px; }.brand img { width: 29px; height: 29px; }
  .nav-links { display: none; }.nav-cta { min-height: 38px; min-width: 89px; padding: 0 17px; font-size: 13px; }
  .menu-button { display: block; width: 32px; height: 36px; background: transparent; position: relative; }.menu-button span { position: absolute; width: 17px; height: 1px; background: #555; left: 7px; top: 14px; }.menu-button span + span { top: 21px; }
  .mobile-menu:not([hidden]) { display: grid; position: absolute; top: 64px; right: 0; padding: 12px; width: 200px; background: #fff; border: 1px solid #eee; border-radius: 16px; box-shadow: 0 15px 40px #0001; }.mobile-menu a { padding: 13px; font-size: 14px; }
  .hero { padding: 38px 16px 58px; }.status-pill { min-height: 38px; font-size: 12px; padding: 0 17px; }
  .hero h1 { font-size: clamp(45px,12.3vw,67px); line-height: 1.12; margin-top: 24px; margin-bottom: 22px; }.hero-copy > p { font-size: 15px; line-height: 1.6; }.hero-copy > .button { margin-top: 26px; }
  .hero-visual { width: 100%; height: 555px; margin-top: 38px; }.hero-halo { width: 550px; height: 570px; top: -32px; }
  .phone-place { width: 198px; top: 55px; }.phone-place-front { margin-left: -168px; }.phone-place-back { margin-left: -12px; top: 65px; }
  .device { --radius: 32px; padding: 4px; }.device > img { border-width: 3px; }.device::before { width: 2px; }
  .hero-cloud-left { width: 195px; top: 20px; left: -64px; }.hero-cloud-right { width: 217px; right: -55px; top: 374px; }
  .benefit-row { gap: 8px; margin-top: 10px; }.benefit-row p { font-size: 17px; line-height: 1.3; margin-top: 15px; }.icon-bubble { width: 38px; height: 38px; }.icon-bubble svg { width: 20px; height: 20px; }.device-note { font-size: 9px; margin-top: 32px; }
  .section { padding: 55px 0; }.section-heading h2 { font-size: clamp(35px,9.5vw,48px); line-height: 1.16; }.section-heading > p { font-size: 16px; margin-top: 20px; }
  .principle-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 42px; }.principle-card { padding: 32px 20px; border-radius: 24px; }.mini-square { width: 184px; height: 184px; margin-bottom: 25px; }.principle-card h3 { font-size: 28px; }.principle-card > p { margin-top: 12px; }
  .product-grid { grid-template-columns: 1fr; margin-top: 45px; gap: 18px; }.product-card { height: 530px; border-radius: 30px; padding-top: 32px; }.product-card h3 { font-size: 37px; }.product-card > p { font-size: 16px; }.product-phone { width: 235px; margin-top: 36px; }.product-section { padding-bottom: 75px; }
  .privacy-section { padding: 75px 16px 60px; }.privacy-scene { grid-template-columns: 1fr 1fr; grid-template-rows: 270px 1fr 1fr; height: auto; row-gap: 32px; margin-top: 35px; }.privacy-sphere { grid-area: 1/1/2/3; justify-self: center; width: 270px; height: 270px; }.privacy-sphere img { width: 110px; border-radius: 28px; }
  .privacy-point:nth-child(1) { grid-area: 2/1; }.privacy-point:nth-child(2) { grid-area: 2/2; }.privacy-point:nth-child(4) { grid-area: 3/1; }.privacy-point:nth-child(5) { grid-area: 3/2; }.privacy-point p { font-size: 12px; }.privacy-point h3 { font-size: 14px; }.privacy-section > a { margin-top: 44px; }
  .widget-section { padding: 85px 16px 30px; }.widget-cloud-left { width: 215px; left: -100px; top: 120px; }.widget-cloud-right { width: 235px; right: -100px; top: 0; }.widget-view { height: 335px; }.widget-panel img { max-height: 240px; }.widget-panel p { font-size: 12px; margin-top: 24px; }
  .task-section { padding: 42px 20px 95px; }.task-demo { margin-top: 42px; }.demo-group + .demo-group { margin-left: 18px; }.demo-task { padding: 20px 16px; }.task-label { font-size: 14px; }
  .calendar-banner { height: 610px; padding-top: 66px; }.banner-phone { width: 210px; margin-left: -105px; top: 276px; }.cloud-bank { bottom: -18px; height: 180px; }.cloud-bank img { width: 100%; bottom: 0; left: 0; }
  .faq-section { padding: 85px 16px 60px; }.faq-list { margin-top: 40px; }.faq-list summary { padding: 19px 18px; font-size: 16px; }.faq-list details { margin-bottom: 10px; }.faq-list details > p { font-size: 13px; padding-inline: 18px; }
  .download-section { padding: 55px 0 75px; }.download-card { grid-template-columns: 1fr 1fr; min-height: 560px; }.download-steps { border-radius: 24px 0 0 24px; padding: 28px 0 30px 20px; }.download-copy { border-radius: 0 24px 24px 0; padding: 28px 14px; text-align: right; }
  .download-steps h3,.download-copy h3 { font-size: 24px; }.download-steps li { font-size: 10px; gap: 6px; }.download-steps li span { width: 22px; height: 22px; }.download-copy > p { font-size: 10px; }.download-copy .button { min-width: 82px; padding-inline: 12px; font-size: 12px; }
  .download-device { width: 180px; top: 240px; margin-left: -90px; }.download-steps > p { bottom: -25px; font-size: 10px; }
  main { border-radius: 0 0 30px 30px; }.site-footer { padding-top: 60px; }.footer-grid { grid-template-columns: repeat(3,1fr); gap: 28px 14px; }.footer-grid > .brand { grid-column: 1/-1; }.footer-grid h3 { font-size: 12px; }.footer-grid a:not(.brand), .footer-grid p { font-size: 10px; }.footer-wordmark { margin-top: 80px; }
}
@media (max-width: 360px) { .phone-place { width: 176px; }.phone-place-front { margin-left: -147px; }.hero-visual { height: 505px; }.hero-cloud-right { top: 335px; }.hero-copy > p { font-size: 13px; }.download-copy h3,.download-steps h3 { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto!important; transition: none!important; } }