@font-face{font-family:Unbounded;src:url(fonts/Unbounded.ttf) format("truetype");font-weight:200 900;font-display:swap}
@font-face{font-family:"DM Sans";src:url(fonts/DMSans.ttf) format("truetype");font-weight:100 1000;font-display:swap}
:root{--pink:#FF5CAA;--lav:#BCA0E6;--ink:#131217}
*{box-sizing:border-box}body{margin:0;background:var(--ink);color:#f4eefa;font:16px/1.55 "DM Sans",system-ui,sans-serif}
main,header,footer{max-width:760px;margin:0 auto;padding:0 20px}
a{color:var(--pink)}.wm{font-family:Unbounded;font-weight:800;text-transform:lowercase;letter-spacing:-.02em}
header{display:flex;align-items:center;justify-content:space-between;padding-top:18px}header .wm{font-size:1.5rem;color:var(--pink);text-decoration:none}
nav a{color:var(--lav);margin-left:14px;font-size:.9rem}
.hero{text-align:center;padding:36px 0 20px}.hero img{width:160px;height:160px;object-fit:cover;border-radius:50%;border:3px solid var(--lav)}
.hero h1{font-size:3.2rem;margin:14px 0 0;color:var(--pink)}.tag{font-size:1.3rem;color:var(--lav);margin:4px 0 14px}
.btn{display:inline-block;background:var(--pink);color:var(--ink);font-weight:700;padding:13px 22px;border-radius:999px;text-decoration:none;margin:6px 0}
.btn.alt{background:transparent;color:var(--pink);border:2px solid var(--pink)}
h2{font-family:Unbounded;font-weight:800;color:var(--lav);font-size:1.4rem;margin:40px 0 12px}
.cards{display:grid;gap:14px}.card{background:#1d1924;border:1px solid #2e2738;border-radius:16px;padding:18px}
.card h3{margin:0 0 6px;color:var(--pink)}.price{font-size:1.8rem;font-weight:700}.small{font-size:.85rem;color:#b9b0c6}
.notice{border-left:3px solid var(--pink);padding:10px 14px;background:#1d1924;border-radius:8px;font-size:.92rem}
ul{padding-left:20px}footer{padding:40px 20px;font-size:.85rem;color:#b9b0c6}
@media(min-width:640px){.cards.c3{grid-template-columns:repeat(3,1fr)}.cards.c2{grid-template-columns:1fr 1fr}.hero h1{font-size:4.2rem}}

.desktop-only{display:none}
@media (hover:hover) and (pointer:fine){.desktop-only{display:block}}
.consent a{color:inherit;text-decoration:underline}

/* example-text marquee (pure CSS, pauses on hover, static for reduced motion) */
.marquee{overflow:hidden;display:grid;gap:10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:10px;width:max-content;animation:scroll 40s linear infinite}
.marquee .rev .track{animation-direction:reverse;animation-duration:46s}
.marquee:hover .track{animation-play-state:paused}
.bubble{background:#2a6df4;color:#fff;padding:9px 14px;border-radius:18px 18px 4px 18px;white-space:nowrap;font-size:.95rem}
.rev .bubble{background:#1d1924;color:#f4eefa;border:1px solid #2e2738;border-radius:18px 18px 18px 4px}
@keyframes scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee{-webkit-mask-image:none;mask-image:none}.marquee .track{animation:none;flex-wrap:wrap;width:auto}.bubble[aria-hidden]{display:none}}

/* ===== landing page (index) ===== */
html{scroll-behavior:smooth}
.home header.over{position:absolute;top:0;left:0;right:0;z-index:5;max-width:none;padding:calc(14px + env(safe-area-inset-top)) 20px 0}
.hero2{--mh:min(78svh,176vw);position:relative;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;background:#151419}
.hero-media{position:absolute;left:50%;top:20px;height:var(--mh);aspect-ratio:9/16;transform:translateX(-50%);-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 96%);mask-image:linear-gradient(to bottom,#000 70%,transparent 96%)}
.hero-media::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#151419,transparent 14%,transparent 86%,#151419);pointer-events:none}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-media video[hidden]{display:none}
.hero2::after{content:"";position:absolute;inset:auto 0 0 0;height:42%;background:linear-gradient(to top,var(--ink) 30%,rgba(19,18,23,.7) 65%,transparent);pointer-events:none}
.hero-copy{position:relative;z-index:2;text-align:center;max-width:560px;margin:0 auto;padding:calc(20px + var(--mh)*.57) 20px calc(22px + env(safe-area-inset-bottom))}
.hero-copy h1{font-size:clamp(2.6rem,12vw,5rem);line-height:1;margin:0;color:var(--pink);text-shadow:0 4px 30px rgba(0,0,0,.6)}
.hero-copy h1 .meet{color:#f4eefa}
.hero-copy .tag{margin:10px 0 18px;font-size:1.15rem}
.btn.big{display:inline-flex;align-items:center;gap:10px;font-size:1.15rem;padding:16px 34px;box-shadow:0 8px 30px rgba(255,92,170,.35);transition:transform .15s,box-shadow .15s}
.btn.big:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(255,92,170,.5)}
.btn.big:active{transform:scale(.97)}
.hero-copy .small{margin:10px auto 0;max-width:440px;line-height:1.45}
main.wide{max-width:1080px}
.big-h{font-family:Unbounded;font-weight:800;color:#f4eefa;font-size:clamp(1.8rem,7vw,3rem);letter-spacing:-.02em;text-align:center;margin:72px 0 24px}
.say .marquee{margin:0 -20px}
.say .big-h{margin-top:44px}
.track.slow{animation-duration:52s}
.uses-grid{display:grid;gap:28px;align-items:center}
.tabs{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.tabs button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:14px;width:100%;padding:14px 16px;border-radius:16px;border:1px solid transparent;color:#b9b0c6}
.tabs button:focus-visible{outline:2px solid var(--pink)}
.tabs .n{font-family:Unbounded;font-weight:700;font-size:.8rem;color:#6d6478;padding-top:4px}
.tabs b{display:block;font-family:Unbounded;font-weight:700;font-size:1.05rem;color:inherit;letter-spacing:-.01em}
.tabs small{display:none;font-size:.92rem;margin-top:4px;color:#d9d1e4}
.tabs [aria-selected=true]{background:#1d1924;border-color:#2e2738;color:#f4eefa}
.tabs [aria-selected=true] .n{color:var(--pink)}
.tabs [aria-selected=true] small{display:block}
.phone{width:min(340px,100%);margin:0 auto;background:#000;border:8px solid #26212e;border-radius:44px;overflow:hidden;box-shadow:0 30px 80px rgba(188,160,230,.15)}
.ph-top{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 0 10px;background:#141216;border-bottom:1px solid #222;font-size:.78rem;color:#ddd}
.ph-top img{border-radius:50%;object-fit:cover}
.ph-body{height:380px;padding:14px 12px;display:flex;flex-direction:column;justify-content:flex-end;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","DM Sans",sans-serif}
.chat{display:flex;flex-direction:column;gap:6px}
.chat[hidden]{display:none}
.chat p{margin:0;max-width:78%;padding:8px 13px;border-radius:19px;font-size:.93rem;line-height:1.35;animation:pop .35s ease both}
.chat .me{align-self:flex-end;background:#2a6df4;color:#fff;border-bottom-right-radius:5px}
.chat .her{align-self:flex-start;background:#26252a;color:#f2f2f2;border-bottom-left-radius:5px}
.chat p:nth-child(2){animation-delay:.25s}.chat p:nth-child(3){animation-delay:.5s}.chat p:nth-child(4){animation-delay:.75s}.chat p:nth-child(5){animation-delay:1s}.chat p:nth-child(6){animation-delay:1.25s}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.ph-bar{margin:0 12px 14px;padding:8px 14px;border:1px solid #333;border-radius:20px;color:#666;font-size:.85rem}
.fine{max-width:620px;margin:56px auto 0;text-align:center}
.fine p{color:#8f879b;font-size:.82rem;line-height:1.55;margin:0}
footer.foot{max-width:1080px;border-top:1px solid #2e2738;margin-top:32px;padding:22px 20px calc(26px + env(safe-area-inset-bottom));text-align:center}
footer.foot nav a{margin:0 9px}
@media(min-width:900px){
  .home header.over{padding-left:max(40px,calc(50% - 560px));padding-right:max(40px,calc(50% - 560px))}
  .hero2{--mh:min(80svh,680px)}
  .hero-copy{max-width:640px}
  .hero-copy h1{font-size:clamp(3.4rem,6vw,5rem)}
  .uses-grid{grid-template-columns:1.1fr 1fr;gap:56px}
  .tabs small{display:block}
  .tabs button{padding:18px 20px}
  .say .marquee{margin:0}
}
@media (prefers-reduced-motion:reduce){.chat p{animation:none}html{scroll-behavior:auto}}

/* header logo: silhouette mark + wordmark (tomo-style lockup) */
header .wm.logo{display:inline-flex;align-items:center;gap:8px;line-height:1}
header .wm.logo img{height:32px;width:auto;display:block}

/* ---- alive bits ---- */
/* logo: the eye blinks on its own (js adds .blink), hover = little double blink + heart beat */
header .wm.logo .mark{height:32px;width:auto;display:block;overflow:visible}
.mark .eye,.mark .heart{transform-box:fill-box;transform-origin:50% 50%}
.mark.blink .eye{animation:blink .16s ease-in-out}
.mark.blink2 .eye{animation:blink .16s ease-in-out 2}
header .wm.logo:hover .mark .heart{animation:beat .7s ease-out}
@keyframes blink{50%{transform:scaleY(.08)}}
@keyframes beat{30%{transform:scale(1.35)}60%{transform:scale(.95)}}

/* glance clip sits over the loop, faded in only while it plays */
.hero-media video.hi{opacity:0;transition:opacity .22s ease;z-index:0}
.hero-media video.hi.on{opacity:1}
.hero-media #introvid{z-index:0}
.hero2.poke{cursor:pointer}

/* her little speech bubble (easter egg) */
.ysay{position:absolute;z-index:3;left:calc(50% + var(--mh)*.12);top:calc(20px + var(--mh)*.1);max-width:min(240px,44vw);background:#f4eefa;color:#131217;font-size:.88rem;line-height:1.3;padding:8px 12px;border-radius:16px 16px 16px 4px;box-shadow:0 6px 24px rgba(0,0,0,.35);opacity:0;transform:translateY(6px) scale(.92);transform-origin:0 100%;transition:opacity .2s,transform .25s cubic-bezier(.3,1.4,.5,1);pointer-events:none}
.ysay.on{opacity:1;transform:none}

/* send whoosh on the button */
.btn.big{position:relative}
.whoosh{position:absolute;left:50%;top:50%;width:46px;height:30px;margin:-15px 0 0 -23px;border-radius:15px 15px 4px 15px;background:#2a6df4;pointer-events:none;animation:whoosh .42s cubic-bezier(.4,0,.7,.4) forwards;z-index:3}
@keyframes whoosh{0%{transform:translate(0,0) scale(.6);opacity:.95}100%{transform:translate(60px,-120px) scale(.35);opacity:0}}

/* bubbles: seamless marquee + iOS Messages tapbacks */
/* spacing is margin, not flex gap, so one copy of the row is exactly half the track and the loop has no jump */
.marquee{gap:16px}
.marquee .track{gap:0;will-change:transform}
.marquee .bubble{margin-right:10px}
.marquee:hover .track{animation-play-state:running}
@media (hover:hover) and (pointer:fine){.marquee:hover .track{animation-play-state:paused}}
.say .marquee{padding-top:20px;margin-top:-20px}
.bubble{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.tb{position:absolute;z-index:2;top:-18px;width:30px;height:30px;border-radius:50%;box-sizing:border-box;border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:-apple-system,"SF Pro Rounded","DM Sans",system-ui,sans-serif;line-height:1;animation:tbin .3s cubic-bezier(.2,.9,.3,1.25) both;transition:opacity .25s,transform .25s}
.tb i{position:absolute;border-radius:50%;background:inherit;box-sizing:border-box;border:2px solid var(--ink)}
.tb i:nth-of-type(1){width:10px;height:10px;bottom:-3px;z-index:-1}
.tb i:nth-of-type(2){width:7px;height:7px;bottom:-9px;z-index:-1}
/* yvette's reaction on your (blue) message: gray, top-left, tail toward the message */
.tb.theirs{left:-13px;background:#3a3a3c;color:#e5e5ea;transform-origin:55% 100%}
.tb.theirs i:nth-of-type(1){left:15px}.tb.theirs i:nth-of-type(2){left:13px}
/* your reaction on her (gray) message: blue, top-right */
.tb.mine{right:-13px;background:#2a6df4;color:#fff;transform-origin:45% 100%}
.tb.mine i:nth-of-type(1){right:15px}.tb.mine i:nth-of-type(2){right:13px}
.tb svg{width:15px;height:15px;fill:currentColor;display:block}
.tb .g-ha{font-size:7.5px;font-weight:900;line-height:.82;letter-spacing:-.2px;text-align:center;transform:rotate(-14deg) translateY(.5px)}
.tb .g-bang{font-size:14px;font-weight:900;letter-spacing:-1.5px;transform:skewX(-8deg)}
.tb .g-q{font-size:16px;font-weight:900}
.tb .g-emo{font-size:15px;line-height:1;font-family:"Apple Color Emoji","Noto Color Emoji","Segoe UI Emoji",sans-serif}
.tb.out{opacity:0;transform:scale(.6)}
@keyframes tbin{0%{transform:scale(.3);opacity:0}55%{transform:scale(1.1);opacity:1}100%{transform:scale(1)}}

@media (prefers-reduced-motion:reduce){.mark .eye,.mark .heart,.whoosh,.tb{animation:none!important}.ysay,.tb{transition:none}.marquee .track{gap:10px 0}}

/* no visible heading: keep an h1 for screen readers, drop the button below her feet */
.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-copy{padding-top:calc(20px + var(--mh)*.66)}
.fine p+p{margin-top:10px}

/* early access sheet (bottom sheet on phones, card on desktop) */
html.ap-open,html.ap-open body{overflow:hidden}
button.btn{border:0;cursor:pointer;font:inherit;font-weight:700}
dialog.apply{padding:0;border:0;background:transparent;color:#f4eefa;max-width:none;max-height:none;width:100%;height:100%;margin:0;inset:0;overflow:hidden}
dialog.apply::backdrop{background:rgba(10,9,13,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ap-in{position:absolute;left:0;right:0;bottom:0;margin:0 auto;max-width:480px;max-height:92svh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:#1b1820;border:1px solid #2e2738;border-bottom:0;border-radius:24px 24px 0 0;padding:26px 22px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -20px 60px rgba(0,0,0,.5);animation:apUp .32s cubic-bezier(.2,.9,.3,1)}
@keyframes apUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:640px){.ap-in{bottom:auto;top:50%;transform:translateY(-50%);border-radius:24px;border-bottom:1px solid #2e2738;max-height:88vh;animation:apIn .25s ease}
  @keyframes apIn{from{opacity:0;transform:translateY(-46%)}to{opacity:1;transform:translateY(-50%)}}}
.apply h2{font-family:Unbounded;font-weight:800;color:var(--pink);font-size:1.5rem;margin:0 0 4px;letter-spacing:-.01em}
.ap-sub{color:#b9b0c6;margin:0 0 16px;font-size:.95rem}
.ap-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:#2a2531;color:#cfc6db;font-size:22px;line-height:1;cursor:pointer}
#apf label{display:block;font-size:.88rem;color:#d9d1e4;margin:0 0 12px;font-weight:600}
#apf .opt{font-weight:400;color:#8f879b;font-size:.8rem}
#apf input:not([type=checkbox]),#apf textarea{display:block;width:100%;box-sizing:border-box;margin-top:6px;background:#131217;border:1px solid #3a3346;border-radius:14px;color:#f4eefa;font:16px/1.3 "DM Sans",sans-serif;padding:12px 14px;outline:0;-webkit-appearance:none;appearance:none}
#apf textarea{resize:none}
#apf input:focus,#apf textarea:focus{border-color:var(--lav);box-shadow:0 0 0 3px rgba(188,160,230,.2)}
#apf .chk{display:flex;align-items:center;gap:10px;font-weight:600;margin:4px 0 6px;cursor:pointer}
#apf .chk input{width:22px;height:22px;accent-color:var(--pink);margin:0;flex:none}
#apf .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ap-err{min-height:1.3em;color:#ff8fc5;font-size:.88rem;margin:4px 0 6px}
.ap-go{width:100%;justify-content:center;margin:0}
.ap-go:disabled{opacity:.7}
.ap-legal{color:#8f879b;font-size:.78rem;text-align:center;margin:12px 0 0}
.ap-legal a{color:inherit}
.ap-done{text-align:center;padding:22px 4px 6px}
.ap-done p{color:#b9b0c6;margin:6px 0 22px}
.ap-ok{min-width:140px;justify-content:center}
@media (prefers-reduced-motion:reduce){.ap-in{animation:none}}