*{box-sizing:border-box}
body{margin:0;background:var(--ova-background);color:var(--ova-ink);font-family:var(--ova-font);line-height:1.5}
.top{display:flex;justify-content:space-between;align-items:center;max-width:1040px;margin:0 auto;padding:16px}
.brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font:700 1.5rem/1 var(--ova-display)}
.brand img{border-radius:10px;border:2px solid var(--ova-ink)}
.brand b span{color:var(--ova-accent)}
main{max-width:1040px;margin:0 auto;padding:0 16px 48px}
.hero{display:grid;gap:32px;align-items:start;padding:8px 0 40px}
@media(min-width:860px){.hero{grid-template-columns:1.15fr 1fr;padding-top:32px}}
h1{font:700 clamp(2.4rem,7vw,3.8rem)/1 var(--ova-display);margin:0 0 16px;letter-spacing:-.01em}
h1 .hl{color:var(--ova-accent);text-shadow:0 3px 0 var(--ova-ink)}
h2{margin:0 0 4px;font:700 1.7rem/1.1 var(--ova-display)}
.lead{font-size:1.1rem;color:var(--ova-text-muted);max-width:34rem}
/* the hero is the cards */
.stack{position:relative;height:290px;max-width:440px;margin:26px 0 22px}
.mini{position:absolute;top:0;left:var(--x);width:46%;height:100%;transform:rotate(var(--r));background:#fffaee;background-image:radial-gradient(rgba(38,52,74,.055) 1px,transparent 1.2px);background-size:7px 7px;
  border:4px solid var(--lvb);border-radius:20px;box-shadow:0 5px 0 #1d2840,0 16px 24px rgba(29,40,64,.25);display:flex;flex-direction:column;overflow:hidden;color:#26344a;transition:transform .25s}
.mini:hover{transform:rotate(calc(var(--r)*.4)) translateY(-8px)}
.mh{background:var(--lvb);color:var(--lvt);font:600 12px/1 var(--ova-display);letter-spacing:.16em;text-transform:uppercase;padding:8px 10px}
.me{margin:10px 10px 6px;height:76px;border:3px solid var(--lvb);border-radius:14px;background:var(--lv);display:flex;align-items:center;justify-content:center;font-size:44px}
.mt{margin:0 10px;font:700 19px/1.05 var(--ova-display)}
.mq{margin:8px 10px 0;font-size:12px;font-weight:700;background:var(--lv);border:2px dashed var(--lvb);border-radius:10px;padding:4px 7px;transform:rotate(-1deg)}
.lvl-sweet{--lvb:var(--ova-sweet);--lvt:#26344a;--lv:#d9f2ec}.lvl-flirty{--lvb:var(--ova-cheeky);--lvt:#26344a;--lv:#ffefc2}.lvl-spicy{--lvb:var(--ova-spicy);--lvt:#fff;--lv:#f1e1fa}
.steps{list-style:none;counter-reset:s;padding:0;margin:18px 0 0;display:grid;gap:10px;max-width:34rem}
.steps li{counter-increment:s;position:relative;padding-left:46px;min-height:36px;color:var(--ova-ink)}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--ova-accent);color:#26344a;border:3px solid var(--ova-ink);font:700 16px/26px var(--ova-display);text-align:center}
.panel{background:var(--ova-surface);border:2px solid var(--ova-ink);border-radius:var(--ova-radius-panel);padding:20px;box-shadow:var(--ova-shadow-card)}
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tabs button{flex:1;min-height:46px;border-radius:var(--ova-radius-control);border:3px solid var(--ova-ink);background:var(--ova-surface);font:600 1rem var(--ova-display);color:var(--ova-ink);cursor:pointer;box-shadow:0 3px 0 var(--ova-ink)}
.tabs button[aria-selected=true]{background:var(--ova-accent);color:#26344a;box-shadow:0 1px 0 var(--ova-ink);transform:translateY(2px)}
label{display:block;font-weight:700;margin:12px 0 4px}
input{width:100%;min-height:48px;padding:10px 12px;border:3px solid var(--ova-control-border);border-radius:var(--ova-radius-control);font:inherit;background:var(--ova-surface);color:var(--ova-ink)}
input:focus{outline:3px solid var(--ova-accent);outline-offset:1px}
[hidden]{display:none!important}
button.primary,button.ghost,a.primary{width:100%;min-height:50px;margin-top:14px;border-radius:var(--ova-radius-control);font:600 1.05rem var(--ova-display);cursor:pointer}
button.primary,a.primary{background:var(--ova-accent);color:#26344a;border:3px solid var(--ova-ink)}
button.ghost{background:var(--ova-surface);border:3px solid var(--ova-ink);color:var(--ova-ink)}
a.primary{display:block;text-align:center;text-decoration:none;line-height:44px}
button.link{background:none;border:0;color:var(--ova-ink);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;min-height:44px;padding:0 4px;box-shadow:none}
#a-forgot{display:block;margin:6px auto 0}
.err{color:var(--ova-error);font-weight:700;margin:10px 0 0}
.ok{color:var(--ova-success)}
.or{display:flex;align-items:center;gap:10px;color:var(--ova-text-muted);margin-top:14px}
.or::before,.or::after{content:"";flex:1;height:2px;background:var(--ova-border)}
.fine{font-size:.85rem;color:var(--ova-text-muted);margin:14px 0 0}
.testnote{background:var(--ova-cheeky-surface);color:var(--ova-cheeky-ink);border:2px solid var(--ova-cheeky);border-radius:var(--ova-radius-control);padding:8px 12px;margin:0 0 10px}
.packs{padding:8px 0 32px}
.packs .sub{color:var(--ova-text-muted);margin:0 0 16px}
footer{text-align:center;color:var(--ova-text-muted);padding:24px 16px 40px;font-size:.9rem}
.tg{font-weight:800;margin:18px 0 0;grid-column:1/-1}

/* how it works: a looping animation of a card going from one phone to the other */
.how{text-align:center;padding:16px 0 8px}
.how .sub{margin:0 0 20px;color:var(--ova-text-muted)}
.scene{--d:10s;position:relative;display:flex;justify-content:space-between;align-items:center;max-width:520px;height:330px;margin:0 auto;padding:0 6px}
.ph{position:relative;width:min(40%,172px);height:310px;background:#fff4df;border:7px solid #1d2840;border-radius:30px;box-shadow:0 7px 0 #1d2840;overflow:hidden;padding:26px 8px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;color:#26344a}
.notch{position:absolute;top:6px;left:50%;width:44px;height:7px;margin-left:-22px;background:#1d2840;border-radius:6px}
.who{font:700 12px/1 var(--ova-display);letter-spacing:.06em;text-transform:uppercase;color:#5a6578;margin-top:2px}
.pc{position:relative;width:100%;background:#fffaee;border:3px solid var(--ova-sweet);border-radius:14px;overflow:hidden;box-shadow:0 3px 0 #1d2840;text-align:left}
.pch{background:var(--ova-sweet);color:#26344a;font:600 10px/1 var(--ova-display);letter-spacing:.14em;text-transform:uppercase;padding:6px 8px}
.pce{margin:7px 8px 4px;height:52px;border:2px solid var(--ova-sweet);border-radius:10px;background:#d9f2ec;display:flex;align-items:center;justify-content:center;font-size:30px}
.pct{margin:0 8px 8px;font:700 15px/1.05 var(--ova-display)}
.over{margin-top:auto;width:62px;height:62px;border-radius:50%;background:var(--ova-accent);border:3px solid #1d2840;box-shadow:0 4px 0 #1d2840;display:flex;flex-direction:column;align-items:center;justify-content:center;font:600 12px/1 var(--ova-display)}
.over span{font-size:16px}
.acts{margin-top:auto;display:flex;gap:6px;width:100%}
.bt{flex:1;border:3px solid #1d2840;border-radius:12px;padding:8px 0;font:600 13px/1 var(--ova-display);background:#fff;box-shadow:0 3px 0 #1d2840;text-align:center}
.bt.acc{background:var(--ova-accent)}
.newb{position:absolute;top:30px;right:8px;z-index:3;background:var(--ova-spicy);color:#fff;font:600 11px/1 var(--ova-display);padding:5px 9px;border-radius:999px;border:2px solid #fff;opacity:0}
.stampok{position:absolute;inset:auto 8px 8px auto;transform:rotate(-8deg);background:#fffaee;border:3px solid var(--ova-success);color:var(--ova-success);font:700 14px/1 var(--ova-display);padding:5px 8px;border-radius:10px;opacity:0}
.toast2{position:absolute;left:8px;right:8px;bottom:78px;background:#1d2840;color:#fff;border-radius:12px;padding:8px;font:600 12px/1.2 var(--ova-display);text-align:center;opacity:0;transform:translateY(10px)}
.fly{position:absolute;left:50%;top:44%;font-size:46px;line-height:1;margin-left:-23px;opacity:0;z-index:4;filter:drop-shadow(0 6px 4px rgba(29,40,64,.3))}
.cf{position:absolute;right:20%;top:30%;font-size:26px;opacity:0;z-index:4}
.cf2{right:30%}.cf3{right:12%}
.caps{list-style:none;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:0;margin:14px 0 0}
.caps li{font:600 14px/1 var(--ova-display);padding:8px 12px;border-radius:999px;border:2px solid var(--ova-border);color:var(--ova-text-muted)}
/* timeline (10s loop): 0-14 rest, 14-34 card flies over, 34-44 lands, 52-60 accept pressed, 60-86 accepted + cheer */
.c-a{animation:cardA var(--d) infinite ease-in-out}
@keyframes cardA{0%,10%{transform:none;opacity:1}16%{transform:translate(-4px,-6px) rotate(-3deg) scale(1.03)}28%{transform:translate(120%,-30px) rotate(24deg) scale(.7);opacity:0}30%,94%{transform:translate(120%,-30px);opacity:0}100%{transform:none;opacity:1}}
.fly{animation:fly var(--d) infinite ease-in-out}
@keyframes fly{0%,14%{opacity:0;transform:translate(-120%,0) scale(.6)}18%{opacity:1;transform:translate(-110%,-10px) rotate(-12deg)}26%{transform:translate(0,-60px) rotate(8deg) scale(1.15);opacity:1}35%{opacity:1;transform:translate(110%,-8px) rotate(-6deg) scale(1)}38%,100%{opacity:0;transform:translate(120%,0) scale(.6)}}
.c-b{animation:cardB var(--d) infinite cubic-bezier(.2,.9,.25,1.2)}
@keyframes cardB{0%,34%{transform:translateY(-14px) scale(.6) rotate(-6deg);opacity:0}42%{transform:none;opacity:1}88%{transform:none;opacity:1}94%,100%{transform:translateY(8px) scale(.9);opacity:0}}
.pb{animation:buzz var(--d) infinite}
@keyframes buzz{0%,35%{transform:none}37%{transform:translateX(-4px) rotate(-1.5deg)}39%{transform:translateX(4px) rotate(1.5deg)}41%{transform:translateX(-3px)}43%,100%{transform:none}}
.newb{animation:newb var(--d) infinite}
@keyframes newb{0%,35%{opacity:0;transform:scale(.6)}38%{opacity:1;transform:scale(1.1)}42%{transform:scale(1)}50%{opacity:1}54%,100%{opacity:0}}
.acc{animation:press var(--d) infinite}
@keyframes press{0%,52%{transform:none;box-shadow:0 3px 0 #1d2840;background:var(--ova-accent)}55%{transform:translateY(3px);box-shadow:0 0 0 #1d2840;background:#ffa488}58%,100%{transform:none;box-shadow:0 3px 0 #1d2840;background:var(--ova-accent)}}
.stampok{animation:stamp2 var(--d) infinite}
@keyframes stamp2{0%,57%{opacity:0;transform:rotate(-8deg) scale(1.8)}61%{opacity:1;transform:rotate(-8deg) scale(1)}86%{opacity:1}92%,100%{opacity:0}}
.toast2{animation:toast2 var(--d) infinite}
@keyframes toast2{0%,62%{opacity:0;transform:translateY(10px)}68%,86%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(10px)}}
.cf{animation:cf var(--d) infinite ease-out}
.cf2{animation-delay:.25s}.cf3{animation-delay:.5s}
@keyframes cf{0%,64%{opacity:0;transform:translateY(20px) scale(.6)}68%{opacity:1}86%{opacity:0;transform:translateY(-110px) rotate(30deg) scale(1.1)}100%{opacity:0}}
.caps .s1{animation:cap1 var(--d) infinite}.caps .s2{animation:cap2 var(--d) infinite}.caps .s3{animation:cap3 var(--d) infinite}
@keyframes cap1{0%,30%{background:var(--ova-accent);color:#26344a;border-color:var(--ova-ink)}34%,100%{background:none;color:var(--ova-text-muted);border-color:var(--ova-border)}}
@keyframes cap2{0%,30%{background:none;color:var(--ova-text-muted);border-color:var(--ova-border)}34%,52%{background:var(--ova-accent);color:#26344a;border-color:var(--ova-ink)}56%,100%{background:none;color:var(--ova-text-muted);border-color:var(--ova-border)}}
@keyframes cap3{0%,52%{background:none;color:var(--ova-text-muted);border-color:var(--ova-border)}56%,90%{background:var(--ova-accent);color:#26344a;border-color:var(--ova-ink)}94%,100%{background:none;color:var(--ova-text-muted);border-color:var(--ova-border)}}
@media (prefers-reduced-motion:reduce){
  .scene *,.caps li{animation:none!important}
  .c-a{opacity:.3}.stampok,.toast2{opacity:1}.newb{opacity:0}
}

/* conversion: price line, big start button, FAQ */
.priceline{margin:10px 0 0;font-size:1.05rem}
a.cta{display:inline-block;width:auto;padding:0 34px;margin:16px 0 4px;font-size:1.25rem;line-height:56px;min-height:56px}
.sub.center{text-align:center;margin-top:8px}
.faq{max-width:760px;margin:0 auto;padding:12px 0 32px}
.faq h2{margin-bottom:12px}
.faq details{background:var(--ova-surface);border:2px solid var(--ova-ink);border-radius:16px;padding:0;margin:0 0 10px;box-shadow:0 3px 0 var(--ova-ink)}
.faq summary{cursor:pointer;font:600 1.05rem var(--ova-display);padding:14px 16px;list-style:none;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;font-size:1.4rem;line-height:1;color:var(--ova-accent-ink)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 16px 16px;color:var(--ova-text-muted)}
body.invitedmode .tabs{display:none}

.brand .wm{height:48px;margin:-6px 0 -6px -8px}
.brand img.wm{border:0;border-radius:0}