/* The upcoming app: an illustrative preview, with the web experience available now. */
.app-preview-page { color:#2b2536; background:#f7f5ef; }
.app-preview-shell { width:min(1160px,calc(100% - 64px)); margin-inline:auto; }
.app-preview-hero { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:64px; padding-block:70px 50px; }
.app-preview-copy { min-width:0; }
.app-preview-eyebrow { display:flex; align-items:center; gap:14px; margin:0 0 26px; color:#716579; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
.app-preview-eyebrow span { padding:7px 12px; border-radius:30px; color:#6843aa; background:#eae2f5; font-size:10px; letter-spacing:.08em; }
.app-preview-page h1 { margin:0; font-size:clamp(44px,4.7vw,66px); font-weight:550; line-height:1.06; letter-spacing:-.055em; }
.app-preview-page h1 em { color:#7952bb; font-style:normal; }
.app-preview-page .app-preview-intro { max-width:440px; margin:25px 0 0; color:#736b7c; font-size:18px; line-height:1.65; }
.app-preview-web { display:flex; align-items:flex-start; gap:16px; margin-top:36px; padding-top:25px; border-top:1px solid #2b25361c; }
.app-preview-web > svg { flex:none; width:25px; height:25px; margin-top:2px; color:#7952bb; }
.app-preview-web h2 { margin:0 0 9px; font-size:18px; font-weight:600; letter-spacing:-.025em; }
.app-preview-web p { max-width:370px; margin:0; color:#736b7c; font-size:14px; line-height:1.75; }
.app-preview-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; margin-top:28px; }
.app-preview-button { display:inline-flex; gap:24px; align-items:center; justify-content:center; min-height:50px; padding:13px 20px; border:0; border-radius:12px; background:#7650b4; color:#fff; font:inherit; font-size:14px; font-weight:550; cursor:pointer; box-shadow:0 2px 3px #48305e10,0 8px 18px #48305e12; transition:background-color .18s,scale .18s; }
.app-preview-button:hover { background:#634198; }
.app-preview-button:active { scale:.96; }
.app-preview-actions a { display:inline-flex; align-items:center; gap:14px; min-height:44px; color:#655b72; font-size:13px; font-weight:550; text-decoration:none; }
.app-preview-actions a:hover { color:#7650b4; text-decoration:underline; text-underline-offset:4px; }
.app-preview-figure { margin:0; min-width:0; }
.app-preview-stage { position:relative; display:grid; place-items:center; min-height:600px; isolation:isolate; }
.app-preview-stage::before { content:""; position:absolute; z-index:-1; inset:35px -15px; background:radial-gradient(ellipse,#d9c6ef80 0%,#e7dfee50 45%,transparent 70%); }
.app-preview-orbit { position:absolute; z-index:-1; width:440px; height:440px; border:1px solid #9576b923; border-radius:50%; }
.app-preview-orbit--two { width:520px; height:520px; border-style:dashed; border-color:#9576b91a; }
.app-preview-phone { width:292px; padding:7px; border-radius:43px; background:#29242f; box-shadow:inset 0 0 0 1px #5e5767,0 2px 3px #34294430,0 22px 44px #34294426,0 45px 75px #34294412; transform:rotate(-5deg); }
.app-preview-phone-screen { overflow:hidden; padding:13px 16px 8px; border-radius:36px; background:#faf9f6; }
.app-preview-phone-top { display:flex; align-items:center; justify-content:space-between; height:20px; font-size:10px; font-weight:650; }
.app-preview-island { width:78px; height:21px; margin-top:-7px; border-radius:20px; background:#29242f; }
.app-preview-phone-brand { display:flex; align-items:center; gap:6px; margin-top:19px; font-size:14px; }
.app-preview-phone-brand img { width:27px; height:27px; object-fit:contain; }
.app-preview-phone-brand > span { display:grid; place-items:center; width:27px; height:27px; margin-left:auto; border-radius:50%; color:#7b579f; background:#eae3f1; font-size:9px; }
.app-preview-phone-title { display:grid; gap:5px; margin-top:23px; }
.app-preview-phone-title > small { color:#83758c; font-size:7px; letter-spacing:.13em; }
.app-preview-phone-title > strong { font-size:24px; font-weight:550; letter-spacing:-.04em; }
.app-preview-phone-title > span { color:#8a8190; font-size:10px; }
.app-preview-phone-search { display:flex; align-items:center; gap:7px; margin-top:17px; padding:11px; border-radius:9px; color:#89808f; background:#eeebf0; font-size:9px; }
.app-preview-phone-search svg { width:13px; height:13px; }
.app-preview-phone-tabs { display:flex; gap:16px; align-items:center; margin:15px 0; color:#8c828f; font-size:9px; }
.app-preview-phone-tabs span:first-child { padding:7px 10px; border-radius:7px; color:#fff; background:#805ab7; }
.app-preview-card-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.app-preview-card-grid > div { min-width:0; }
.app-preview-card-photo { display:grid; grid-template-rows:minmax(0,1fr); place-items:center; height:153px; padding:10px; border-radius:10px; background:#ece7f0; }
.app-preview-card-photo img { min-height:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 3px #00000020); }
.app-preview-card-grid strong,.app-preview-card-grid small { display:block; }
.app-preview-card-grid strong { margin-top:8px; font-size:10px; font-weight:550; }
.app-preview-card-grid small { margin-top:3px; color:#8c828f; font-size:8px; }
.app-preview-phone-note { display:flex; align-items:center; gap:10px; margin-top:18px; padding:12px 10px; border-radius:9px; color:#7d5ba5; background:#f0eaf6; }
.app-preview-phone-note > span { font-size:21px; }
.app-preview-phone-note strong,.app-preview-phone-note small { display:block; }
.app-preview-phone-note strong { font-size:10px; font-weight:550; }
.app-preview-phone-note small { margin-top:4px; font-size:8px; color:#8b789a; }
.app-preview-phone-nav { display:flex; justify-content:space-around; padding-top:17px; color:#908596; font-size:7px; }
.app-preview-phone-nav span { display:grid; justify-items:center; gap:5px; }
.app-preview-phone-nav span:first-child { color:#7c54b2; }
.app-preview-phone-nav svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; }
.app-preview-home-indicator { width:90px; height:4px; margin:15px auto 0; border-radius:5px; background:#39303e; }
.app-preview-stamp { position:absolute; right:-6px; bottom:60px; display:grid; gap:7px; padding:20px 23px; border-radius:15px; background:#fffcf6; box-shadow:0 1px 2px #39234608,0 15px 35px #39234614; transform:rotate(5deg); }
.app-preview-stamp span { color:#877792; font-size:9px; letter-spacing:.05em; }
.app-preview-stamp span:first-child { font-size:8px; letter-spacing:.13em; }
.app-preview-stamp strong { font-size:20px; font-weight:550; letter-spacing:-.025em; }
.app-preview-figure figcaption { margin-top:18px; color:#807486; text-align:center; font-size:11px; line-height:1.7; }
.app-preview-availability { display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-bottom:72px; padding-top:35px; border-top:1px solid #2b25361c; }
.app-preview-availability > div + div { padding-left:40px; border-left:1px solid #2b25361c; }
.app-preview-status { display:flex; gap:8px; align-items:center; color:#7952bb; font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.app-preview-status::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.app-preview-status--live { color:#477363; }
.app-preview-availability h2 { margin:10px 0 8px; font-size:23px; font-weight:550; letter-spacing:-.03em; }
.app-preview-availability p { margin:0; color:#736b7c; font-size:14px; line-height:1.65; }
@media(max-width:1000px) {
  .app-preview-hero { gap:25px; padding-top:45px; }
  .app-preview-phone { width:270px; }
  .app-preview-card-photo { height:137px; }
  .app-preview-orbit { width:340px; height:340px; }
  .app-preview-orbit--two { width:400px; height:400px; }
  .app-preview-stamp { right:-15px; padding:17px; }
}
@media(max-width:760px) {
  .app-preview-shell { width:calc(100% - 40px); }
  .app-preview-hero { grid-template-columns:1fr; gap:24px; padding-block:45px 40px; }
  .app-preview-copy { max-width:530px; margin-inline:auto; }
  .app-preview-page h1 { font-size:clamp(42px,8vw,60px); }
  .app-preview-page .app-preview-intro { font-size:16px; }
  .app-preview-web { margin-top:28px; }
  .app-preview-stage { max-width:440px; margin:auto; min-height:570px; }
  .app-preview-stamp { right:0; bottom:35px; }
  .app-preview-orbit { width:100%; height:auto; aspect-ratio:1; }
  .app-preview-orbit--two { width:110%; }
  .app-preview-availability { gap:22px; margin-bottom:45px; }
  .app-preview-availability > div + div { padding-left:22px; }
}
@media(max-width:380px) {
  .app-preview-page h1 { font-size:39px; }
  .app-preview-phone { width:248px; transform:rotate(-3deg); }
  .app-preview-card-photo { height:120px; }
  .app-preview-stamp { bottom:18px; }
  .app-preview-stage { min-height:560px; }
  .app-preview-availability { grid-template-columns:1fr; }
  .app-preview-availability > div + div { padding:22px 0 0; border-left:0; border-top:1px solid #2b25361c; }
}
@media(prefers-reduced-motion:reduce) { .app-preview-button { transition:none; } .app-preview-button:active { scale:1; } }