:root{--ink:#272333;--muted:#696274;--paper:#fff8fc;--pink:#ff5c9d;--purple:#7468ff;--yellow:#ffd965;--line:#eadfe8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
img{max-width:100%;height:auto}
a{color:inherit}
.skip{position:fixed;top:-5rem;left:1rem;background:white;padding:.8rem;z-index:20}
.skip:focus{top:1rem}
header,footer{max-width:1180px;margin:auto;padding:1.25rem 2rem;display:flex;justify-content:space-between;align-items:center}
header nav,footer nav{display:flex;gap:1.4rem;align-items:center}
header nav a,footer nav a{text-decoration:none}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-size:1.15rem}
.logo img{border-radius:13px}
.pill{border:1px solid var(--ink);border-radius:999px;padding:.65rem 1rem;font-weight:750;text-decoration:none}
.primary{background:var(--ink);color:#fff;padding:.9rem 1.25rem}
.hero{max-width:1180px;margin:auto;min-height:730px;padding:5rem 2rem;display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:center;overflow:hidden}
.tag{text-transform:uppercase;letter-spacing:.12em;color:var(--pink);font-size:.78rem;font-weight:850}
h1,h2,h3{line-height:1.05;letter-spacing:-.035em}
h1{font-size:clamp(3.2rem,7vw,6.6rem);margin:.25em 0}
h1 em{font-style:normal;color:var(--purple)}
h2{font-size:clamp(2.2rem,4.4vw,4.3rem);max-width:820px}
.intro{font-size:1.2rem;color:var(--muted);max-width:600px}
.actions{display:flex;align-items:center;gap:1.5rem;margin:2rem 0}
.note,.section p,footer p{color:var(--muted)}
.art{position:relative;text-align:center}
.art img,.art video{width:min(350px,78vw);height:auto;border-radius:35px;box-shadow:0 30px 80px rgba(116,104,255,.2);transform:rotate(3deg);position:relative}
.art video{display:inline-block;aspect-ratio:59/120;object-fit:cover;background:#fff}
.bubble{position:absolute;border-radius:50%;filter:blur(.2px)}
.b1{width:180px;height:180px;background:var(--pink);left:-4%;top:9%}
.b2{width:130px;height:130px;background:var(--yellow);right:-2%;bottom:5%}
.b3{width:80px;height:80px;background:var(--purple);right:5%;top:0}
.section{max-width:1180px;margin:auto;padding:7rem 2rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3rem}
.cards article{background:#fff;border:1px solid var(--line);border-radius:35px;padding:2rem;box-shadow:0 14px 35px rgba(39,35,51,.05)}
.cards b{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:#ffe2ef;color:#b11c59}
.cards article:nth-child(2) b{background:#e5e2ff;color:#4f43d5}
.cards article:nth-child(3) b{background:#fff0b9;color:#7b6200}
.screens-intro{max-width:780px}
.showcase{margin-top:4rem}
.showcase-heading{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.2rem}
.showcase-heading h3{font-size:clamp(1.45rem,2.5vw,2rem);margin:0}
.showcase-heading span{color:var(--muted);font-size:.86rem;font-weight:700}
.screenshot-track{display:flex;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none;cursor:grab;touch-action:pan-y pinch-zoom;outline:none;margin-inline:calc(50% - 50vw);padding:0 max(2rem,calc((100vw - 1180px)/2));-webkit-overflow-scrolling:touch}
.screenshot-track::-webkit-scrollbar{display:none}
.screenshot-track:active{cursor:grabbing}
.screenshot-track:focus-visible{box-shadow:inset 0 0 0 3px var(--purple)}
.screenshot-set{display:flex;width:max-content;flex:none;gap:1.15rem;padding:.5rem 1.15rem 2.2rem 0}
.screenshot-set img{display:block;width:clamp(190px,22vw,270px);height:auto;border-radius:25px;box-shadow:0 16px 38px rgba(27,44,145,.14);flex:none}
.ipad-showcase{margin-top:2.5rem}
.ipad-showcase .screenshot-set img{width:clamp(310px,47vw,570px);border-radius:22px}
.marquee{padding:1.4rem;display:flex;gap:4rem;justify-content:center;flex-wrap:wrap;background:var(--purple);color:#fff;font-weight:800}
.support{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:40px;background:#fff;margin-top:7rem;margin-bottom:7rem}
.support>div{max-width:650px}
.download{max-width:720px;margin:10vh auto;text-align:center;padding:3rem 2rem}
.download>img{border-radius:28px}
.copy{border:0;background:none;text-decoration:underline;font:inherit;cursor:pointer}
.legal{max-width:850px;margin:auto;padding:3rem 2rem}.legal h1{font-size:clamp(2.5rem,7vw,4.5rem)}.legal h2{font-size:1.8rem;margin-top:2.2rem}.legal h3{font-size:1.25rem}.legal p,.legal li{color:var(--muted)}
@media(max-width:800px){header nav>a:not(.pill){display:none}
.hero{grid-template-columns:1fr;text-align:center;padding-top:3rem}
.art{order:-1}
.art img,.art video{width:220px}
.actions{justify-content:center;flex-wrap:wrap}
.cards{grid-template-columns:1fr}
.showcase{margin-top:3rem}
.showcase-heading span{display:none}
.screenshot-track{margin-inline:-2rem;padding-inline:2rem}
.screenshot-set{gap:.8rem}
.screenshot-set img{width:210px;border-radius:19px}
.ipad-showcase .screenshot-set img{width:330px;border-radius:17px}
.support,footer{flex-direction:column;align-items:flex-start;gap:1rem}
.section{padding-block:4.5rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
.art img,.art video{transform:none}
.screenshot-track{scroll-behavior:auto}
}
.usecase-hero{min-height:640px}.faq-list{max-width:860px;margin:2.5rem 0}.faq-list details{background:#fff;border:1px solid var(--line);border-radius:22px;padding:1.1rem 1.3rem;margin:.8rem 0}.faq-list summary{font-weight:800;cursor:pointer}.faq-list details p{margin-bottom:.2rem}
:root{--ink:#1b2c91;--muted:#4b5278;--pink:#e986a2;--purple:#3850e0;--yellow:#ffcb77;--line:#cfd4f1}.primary,.marquee{background:#1b2c91}.cards article,.support{border-color:#1b2c91}
.cards b{box-shadow:inset 8px 10px 16px rgba(255,255,255,.55),inset -8px -10px 18px rgba(50,44,90,.1),0 7px 14px rgba(27,44,145,.18)}.bubble{border:1px solid rgba(27,44,145,.18);box-shadow:inset 18px 22px 28px rgba(255,255,255,.65),inset -18px -22px 30px rgba(56,80,224,.16),0 12px 28px rgba(27,44,145,.2)}
.b1{background:linear-gradient(145deg,rgba(255,174,208,.78),rgba(233,134,162,.52))}.b2{background:linear-gradient(145deg,rgba(255,239,187,.9),rgba(255,203,119,.58))}.b3{background:linear-gradient(145deg,rgba(183,232,255,.88),rgba(56,80,224,.56))}.art img,.art video{border:3px solid #1b2c91}
