@font-face{font-family:Manrope;src:url('/assets/fonts/manrope.e310b55a7f.woff2') format('woff2');font-weight:400 800;font-display:swap}
:root{--paper:#fff;--ink:#1d1d1f;--secondary:#6e6e73;--chrome:#fff;--foreground:#1d1d1f;--rule:#d2d2d7;color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,Manrope,'Helvetica Neue',sans-serif;color:var(--ink);background:var(--chrome);font-synthesis:none;-webkit-font-smoothing:antialiased}
@media(prefers-color-scheme:dark){:root{--paper:#000;--ink:#f5f5f7;--secondary:#a1a1a6;--chrome:#000;--foreground:#f5f5f7;--rule:#333336;color-scheme:dark}}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:var(--chrome)}body{overflow-x:clip}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}[hidden]{display:none!important}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #e84052;outline-offset:5px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-action{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;width:min(calc(100% - 24px),600px);text-align:center}.description{margin:0;font-size:clamp(16px,1.35vw,18px);font-weight:500;line-height:1.5;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}.release-note{margin:0;font-size:13px;font-weight:500;line-height:1.4;color:var(--secondary)}
.site-footer{position:relative;width:100%;color:var(--secondary);font-size:12px;line-height:1.3}.footer-row{display:flex;justify-content:center;align-items:center;gap:12px;min-height:44px;white-space:nowrap}.services{display:flex;align-items:center;margin-inline:-6px}.service-button{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;border-radius:50%;color:var(--ink)}.service-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--ink) 5%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 6%,transparent);transition:background .15s ease}.service-mark img{display:block;object-fit:contain;max-width:30px;max-height:30px}.service-button:hover .service-mark,.service-button[aria-expanded=true] .service-mark{background:color-mix(in srgb,var(--ink) 10%,transparent)}.footer-divider{opacity:.55}.privacy-link{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;text-decoration:none;text-underline-offset:3px}.privacy-link:hover{text-decoration:underline}.service-note{position:absolute;bottom:54px;left:50%;transform:translateX(-50%);width:208px;max-width:calc(100vw - 32px);padding:12px 16px;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:14px;background:var(--paper);box-shadow:0 8px 32px #00000014;text-align:center;pointer-events:none;white-space:normal}.service-note strong,.service-note span{display:block}.service-note strong{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:3px}.service-note span{font-size:12px;line-height:1.4}
body:not(.keyboard-navigation):not(.privacy-page) :is(a,button,summary):focus-visible{outline:none}

/* Hero: unchanged composition, now in normal page flow. */
.intro{flex:none;display:flex;flex-direction:column;align-items:center;gap:16px;padding:max(calc(env(safe-area-inset-top) + 16px),4.5svh) 20px 0}
.hero-copy{text-align:center}
/* The app icon beside a brushed-metal wordmark. */
.hero-title{display:flex;align-items:center;justify-content:center;gap:.2em;margin:0;font-family:Manrope,-apple-system,BlinkMacSystemFont,sans-serif;font-size:clamp(52px,min(13vw,12svh),120px);font-weight:800;line-height:1.05;letter-spacing:-.035em}
.title-text{padding:0 .04em .06em;color:var(--ink);background:linear-gradient(100deg,#474b53 0%,#5d626b 38%,#7d828c 62%,#a6abb4 82%,#71767f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media(prefers-color-scheme:dark){.title-text{background-image:linear-gradient(100deg,#b9b9bd 0%,#c9c9cd 40%,#e6e6e9 70%,#f7f7f9 86%,#c4c4c8 100%)}}
/* The app's tilt-reactive icon: 72 frames (every 5°), each with its own rounded alpha edge, drawn to a Display P3 canvas. */
.title-icon{position:relative;display:block;flex:none;width:.9em;height:.9em;background:url('/assets/images/app-icon.12a5630eed.webp') center/100% 100% no-repeat}
.title-icon canvas{position:absolute;inset:0;width:100%;height:100%}
.title-icon.is-ready{background:none}

@media(min-width:760px){.intro{padding-inline:36px}}

/* One screen: the hero, then the features filling the rest, with the phone standing on the window's bottom edge.
   The phone is cut 812/1000 down its frame, where each clip ends just above the app's tab bar. */
/* Like the original teaser: the page never scrolls, the phone is sized from the window height and the window's bottom edge crops it.
   It's never placed so high that the app's tab bar (below 812/1000 of the frame) shows. */
/* As in the original teaser: the document is as tall as the phone's full frame (set by main.js), so Safari paints it under its floating toolbar. Root scrolling stays locked. */
html:not(.document-page),html:not(.document-page) body{height:100%;min-height:var(--composition-height,100lvh);overflow:hidden;overscroll-behavior:none}
/* 100lvh: on phones the page runs under Safari's floating toolbar, so the phone continues behind it. */
main{display:flex;flex-direction:column;height:100lvh}
:root{--pw:min(calc(100vw - 32px),max(255px,51.94svh))}
.features{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:28px}
.feature-picker{flex:none;display:flex;gap:6px;max-width:100%;padding:2px 20px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
.feature-picker::-webkit-scrollbar{display:none}
.feature{position:relative;flex:none;display:block;margin:0;padding:0;border:0;background:none;color:var(--secondary);text-align:left;scroll-snap-align:center;border-radius:999px;overflow:hidden;isolation:isolate;transition:color .2s ease}
.feature:hover,.feature[aria-selected=true]{color:var(--ink)}
.feature-name{display:block;padding:9px 15px;font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.2;white-space:nowrap}
.feature-title,.feature-text{display:none}
.feature-progress{position:absolute;inset:0;z-index:-1;background:color-mix(in srgb,var(--ink) 7%,transparent);opacity:0}
.feature-progress::after{content:'';position:absolute;inset:0;background:color-mix(in srgb,var(--ink) 7%,transparent);transform-origin:left;transform:scaleX(var(--progress,0))}
.feature[aria-selected=true] .feature-progress{opacity:1}
/* Every caption sits in one grid cell, so the cell is always as tall as the longest at any text size. */
.feature-caption{flex:none;display:grid;width:min(calc(100% - 48px),420px);text-align:center;font-size:15px;font-weight:500;line-height:1.5;letter-spacing:-.012em;color:var(--secondary);text-wrap:balance}
.feature-caption>span{grid-area:1/1;visibility:hidden}.feature-caption>span.is-active{visibility:visible}

.stage-wrap{position:relative;flex:1;min-height:0;width:100%;container-type:size}
.stage{position:absolute;left:50%;top:max(14px,calc(100cqh - var(--pw) * 812 / 490));translate:-50% 0;width:var(--pw);aspect-ratio:490/812}
.phone{position:absolute;left:0;top:0;width:100%;aspect-ratio:490/1000}
.phone::before{content:'';position:absolute;inset:3% 4% 0;border-radius:15% / 7%;box-shadow:0 24px 72px -15px #0003}
/* Black glass under the screen, so no page colour shows between the screen and the frame's bezel. */
.phone::after{content:'';position:absolute;inset:1.6% 4.2% 0;border-radius:15% / 6.8%;background:#000}
.phone-screen,.device-frame{z-index:1}
.phone-screen{position:absolute;left:5.102%;top:2.2%;width:89.796%;height:95.6%;border-radius:14.09% / 6.485%;overflow:hidden;background:#000;mask-image:linear-gradient(#000,#000)}
.device-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.clip,.screen-poster{position:absolute;left:0;top:0;width:100%;aspect-ratio:440/790;object-fit:cover}
.clip{opacity:0}
/* Cross-fade only between features; the first clip appears at once so iOS sees it as visible when it starts playing. */
.stage.is-ready .clip{transition:opacity .45s ease}
/* Kept barely visible (not 0) so iOS still treats the active clip as on screen and lets it autoplay. */
.clip.is-active{opacity:.01}
.clip.is-active.has-frame{opacity:1}
@media(prefers-color-scheme:dark){.phone::before{box-shadow:none}}

/* Phones: a tighter hero and no caption, so the phone gets the room. */
@media(max-width:600px){
  .intro{gap:10px;padding-top:max(calc(env(safe-area-inset-top) + 10px),3svh)}
  .hero-title{font-size:clamp(38px,10.5vw,52px)}
  .hero-action{gap:2px}.description{font-size:15px}.release-note{font-size:13px}
  .footer-row{min-height:40px;gap:6px}.services{margin-inline:-8px}.service-button{width:42px}
  .features{gap:10px;padding-top:14px}
  .feature-caption{display:none}
}

/* Wide screens: the list beside the phone. It's pinned to the top, so a longer description only moves the items below it. */
@media(min-width:960px){
  .features{display:grid;grid-template-columns:minmax(260px,340px) calc(var(--pw) + 64px);grid-template-rows:minmax(0,1fr);justify-content:center;column-gap:clamp(40px,6vw,96px);padding-top:clamp(12px,2.5svh,32px)}
  .feature-picker{flex-direction:column;align-self:start;gap:2px;padding:min(calc(var(--pw) * .12),5svh) 0 0;overflow:visible;-webkit-mask-image:none}
  .feature{width:100%;padding:clamp(5px,1.2svh,12px) 0 clamp(7px,1.45svh,14px);border-radius:0;overflow:visible;color:color-mix(in srgb,var(--secondary) 70%,transparent)}
  .feature-name{display:none}
  .feature-title{display:block;font-size:clamp(15px,2.2svh,19px);font-weight:650;letter-spacing:-.022em;line-height:1.25}
  .feature-text{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)}
  .feature-text>span{overflow:hidden;font-size:clamp(13px,1.75svh,15px);font-weight:500;line-height:1.5;letter-spacing:-.012em;color:var(--secondary);padding-right:12px}
  .feature[aria-selected=true] .feature-text{grid-template-rows:1fr}
  .feature[aria-selected=true] .feature-text>span{padding-top:6px}
  .feature-progress{inset:auto 0 0;height:2px;z-index:0;border-radius:2px;background:color-mix(in srgb,var(--ink) 9%,transparent)}
  .feature-progress::after{background:var(--ink)}
  .feature-caption{display:none}
  .stage-wrap{height:100%}
  .stage{left:0;translate:none}
}
.addon-mark svg{width:19px;height:19px;fill:var(--ink);stroke:none}

@media(prefers-reduced-motion:reduce){.clip,.feature-text,.feature-title{transition:none!important}}
.privacy-page{height:auto;min-height:100svh;overflow:auto}.privacy-page main{height:auto;width:min(640px,calc(100% - 48px));margin:0 auto;padding:max(32px,env(safe-area-inset-top)) 0 max(48px,env(safe-area-inset-bottom))}.privacy-back{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:15px;text-decoration:none}.privacy-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.privacy-copy{margin-top:42px}.privacy-copy h1{font-size:clamp(40px,8vw,56px);line-height:1.05;letter-spacing:-.05em;font-weight:600;margin:0 0 24px}.privacy-copy .policy-lead{font-size:23px;line-height:1.3;letter-spacing:-.025em;color:var(--ink)}.privacy-copy h2{font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.35;margin:30px 0 8px}.privacy-copy p{font-size:16px;line-height:1.6;color:var(--secondary);margin:0 0 16px}.privacy-copy .policy-date{margin-top:32px;font-size:13px}
@media(max-width:340px){.footer-row{flex-wrap:wrap;row-gap:0}.privacy-link{flex-basis:100%;min-height:32px}.footer-divider{display:none}}
html.document-page{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:auto}html.document-page body{height:auto;min-height:100svh;overflow:visible;overscroll-behavior-y:auto}
.service-note strong:last-child{margin-bottom:0}

/* Never show Safari's own play/loading button or controls on the clips: a clip shows its poster frame until it plays. */
.clip{pointer-events:none}
.clip::-webkit-media-controls,.clip::-webkit-media-controls-panel,.clip::-webkit-media-controls-start-playback-button,.clip::-webkit-media-controls-overlay-play-button,.clip::-webkit-media-controls-play-button{display:none!important;-webkit-appearance:none;opacity:0}
html:not(.document-page),html:not(.document-page) body{touch-action:manipulation}
.moved-note{position:fixed;z-index:20;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 16px);display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 32px);margin-inline:auto;padding:8px 8px 8px 16px;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:999px;background:color-mix(in srgb,var(--paper) 82%,transparent);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:0 8px 32px #00000014;font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;animation:moved-in .45s cubic-bezier(.2,.8,.2,1) both;transition:opacity .35s ease,transform .35s ease}
@keyframes moved-in{from{opacity:0;transform:translateY(16px)}}
.moved-note.is-hidden{opacity:0;transform:translateY(16px);pointer-events:none}
.moved-note button{display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--secondary)}
.moved-note button svg{width:12px;height:12px;stroke-width:2.2}
@media(prefers-reduced-motion:reduce){.moved-note{animation-name:moved-fade}.moved-note.is-hidden{transform:none}@keyframes moved-fade{from{opacity:0}}}
.footer-links{display:flex;align-items:center;gap:inherit}
.discord-link{min-width:0;color:var(--ink)}.discord-link svg{display:block;width:17px;height:17px;fill:currentColor}
.discord-link:hover .service-mark{background:color-mix(in srgb,var(--ink) 10%,transparent)}
/* Phones: everything stays on one row, with the same 5px space between every item, icons included. */
@media(max-width:430px){.footer-row,.footer-links{gap:5px}.services{gap:5px;margin-inline:0}.service-button{width:30px}.service-mark{width:30px;height:30px}.service-mark img{max-width:28px;max-height:28px}.discord-link svg{width:16px;height:16px}}