/* gush. — Onboarding & accounts (prefix ob-). Tokens only; rgb() literals appear solely inside photographic surfaces
   (camera feed, ID/card mocks, membership card), which stay dark in both themes like every photo card. */

/* ───────── frame ───────── */
.screen:has(> .ob){display:flex;flex-direction:column;padding-bottom:0}
.ob{flex:1;display:flex;flex-direction:column;position:relative;min-height:100%}
.ob [hidden]{display:none!important}
.ob-body{flex:1;margin-top:28px}
.ob-foot{position:sticky;bottom:0;z-index:20;margin-top:auto;padding:34px var(--gut) 34px;display:flex;flex-direction:column;gap:10px;
  background:linear-gradient(180deg,rgba(var(--scrim),0) 0,rgba(var(--scrim),.94) 22px,var(--bg) 34px)}
.ob-foot>div[data-show]{display:flex;flex-direction:column;gap:10px}
.ob-foot-p{text-align:center;font-size:13.5px;color:var(--ink-2);margin-top:4px}
.ob-minor{align-self:center;font-size:13.5px;min-height:40px}
.ob-proto{margin:22px auto 0;width:fit-content;max-width:100%;padding:7px 12px;border:1px dashed var(--line-2);border-radius:999px;font-size:11.5px;line-height:1.35;color:var(--ink-3);text-align:center}
.ob-fine{display:flex;gap:10px;align-items:flex-start;margin-top:22px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.ob-fine svg.ic{width:16px;height:16px;color:var(--accent);margin-top:1px}
.ob-banner-slot:not(:empty){margin-bottom:18px}
.ob-or-line{display:flex;align-items:center;gap:14px;margin:26px 0 22px;color:var(--ink-3);font-size:12.5px;letter-spacing:.02em}
.ob-or-line::before,.ob-or-line::after{content:"";flex:1;height:1px;background:var(--line)}
.ob-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* top bar with journey steps */
.ob-bar{gap:16px}
.ob-bar-c{flex:1;min-width:0;display:flex;justify-content:center}
.ob-bar-r{min-width:40px;display:flex;justify-content:flex-end}
.ob-bar-t{font:500 17px/1.2 var(--serif);font-variation-settings:"opsz" 30,"SOFT" 100}
.ob-sp{display:block;width:40px;height:40px}
.ob-steps{display:flex;gap:5px;width:100%;max-width:170px}
.ob-steps i{flex:1;height:3px;border-radius:2px;background:var(--line-2);position:relative;overflow:hidden}
.ob-steps i.done{background:var(--accent)}
.ob-steps i.on::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left;animation:ob-grow 1s var(--ease) .25s both}
.ob-bar.over-img .ob-steps i:not(.done){background:color-mix(in srgb,var(--on-img) 28%,transparent)}
.ob-skip{display:inline-flex;align-items:center;height:40px;padding:0 4px;font:600 13.5px/1 var(--sans);color:var(--ink-2);transition:color .4s var(--ease)}
.ob-skip:hover{color:var(--ink)}
.ob-bar.over-img .ob-skip{color:var(--on-img-2)}
.ob-bar.over-img.is-stuck .ob-skip{color:var(--ink-2)}
@keyframes ob-grow{from{transform:scaleX(0)}}

/* page heads */
.ob-head{padding:4px var(--gut) 0}
.ob-head .eyebrow{display:block;margin-bottom:14px}
.ob-head h1{font-size:40px;line-height:1.03}
.ob-head p{margin-top:14px;color:var(--ink-2);max-width:330px;font-size:15.5px}
.ob-head p b{color:var(--ink);font-weight:600}
.ob-head-sm h1{font-size:34px}

/* shared motion */
@keyframes ob-rise{from{opacity:0;transform:translate3d(0,16px,0)}}
@keyframes ob-fade{from{opacity:0}}
@keyframes ob-draw{to{stroke-dashoffset:0}}
@keyframes ob-breathe{from{opacity:.5}to{opacity:1}}
@keyframes ob-glow{0%{opacity:0;transform:scale(.6)}45%{opacity:1}100%{opacity:.5;transform:scale(1)}}
@keyframes ob-ripple{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
@keyframes ob-pulse{0%{transform:scale(.88);opacity:0}40%{opacity:1}100%{transform:scale(1.22);opacity:0}}
[data-show]:not([hidden]){animation:ob-rise .7s var(--ease) both}

/* ═════ welcome ═════ */
.ob-welcome{justify-content:flex-end;overflow:hidden;background:var(--bg)}
.ob-welcome .ob-w-ph{position:absolute;inset:0}
.ob-w-ph img{object-position:50% 18%}
.ob-w-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(20,10,16,.62) 0%,rgba(20,10,16,0) 20%,rgba(var(--scrim),0) 38%,rgba(var(--scrim),.88) 55%,rgba(var(--scrim),.98) 63%,rgb(var(--scrim)) 100%)}
.ob-w-top{position:absolute;z-index:3;top:76px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--on-img);animation:ob-fade 1.6s var(--ease) .15s both}
.ob-w-top .monogram{width:40px;height:40px;font-size:22px;border-color:color-mix(in srgb,var(--on-img) 50%,transparent)}
.ob-w-top .wordmark{font-size:31px}
.ob-w-top .wordmark .dot{color:var(--img-btn)}
.ob-w-b{position:relative;z-index:3;padding:0 28px 46px}
.ob-w-b h1{font-size:46px;line-height:1;margin-bottom:16px}
.ob-w-b>p:first-of-type{color:var(--ink-2);font-size:15.5px;max-width:310px;margin-bottom:30px}
.ob-w-cta{display:flex;flex-direction:column;gap:12px}
.ob-w-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;color:var(--ink-3)}
.ob-w-foot svg.ic{width:13px;height:13px}
.ob-w-b>*{animation:ob-rise 1s var(--ease) both}
.ob-w-b>:nth-child(1){animation-delay:.35s}.ob-w-b>:nth-child(2){animation-delay:.47s}.ob-w-b>:nth-child(3){animation-delay:.6s}.ob-w-b>:nth-child(4){animation-delay:.8s}

/* ═════ intro stories ═════ */
.ob-intro{overflow:hidden;background:var(--surface);color:var(--on-img)}
.ob-intro .ob-bar{position:absolute;top:0;left:0;right:0;margin:0;z-index:10;background:none;box-shadow:none}
.ob-story{display:flex;gap:5px;width:100%;max-width:180px}
.ob-story i{flex:1;height:3px;border-radius:2px;background:color-mix(in srgb,var(--on-img) 26%,transparent);overflow:hidden}
.ob-story b{display:block;height:100%;background:var(--on-img);transform:scaleX(0);transform-origin:left}
.ob-story i.done b{transform:none}
.ob-story i.on b{animation:ob-fill 7s linear forwards}
.ob-intro.is-held .ob-story i.on b{animation-play-state:paused}
@keyframes ob-fill{to{transform:none}}
.ob-track{position:absolute;inset:0;display:flex;transition:transform .85s var(--ease);touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.ob-track:active{cursor:grabbing}
.ob-slide{flex:0 0 100%;position:relative;height:100%;overflow:hidden}
.ob-slide .ph img{transform:scale(1.04);-webkit-user-drag:none;pointer-events:none}
.ob-slide.is-on .ph img{animation:kb 14s var(--ease) infinite alternate}
.ob-slide-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,10,16,.55) 0%,rgba(20,10,16,0) 22%,rgba(30,14,24,.08) 40%,rgba(30,14,24,.84) 68%,rgba(20,10,16,.97) 100%)}
.ob-slide-tx{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:0 28px 136px}
.ob-slide-tx .eyebrow{display:block;margin-bottom:14px;color:var(--on-img-2)}
.ob-slide-tx h2{font-size:42px;line-height:1.02;margin-bottom:14px;max-width:330px}
.ob-slide-tx h2 em{color:#F5D0D9}
.ob-slide-tx p{color:var(--on-img-2);font-size:15.5px;max-width:320px}
.ob-slide-tx>*{opacity:0;transform:translate3d(0,16px,0);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.ob-slide.is-on .ob-slide-tx>*{opacity:1;transform:none}
.ob-slide.is-on .ob-slide-tx>:nth-child(1){transition-delay:.25s}.ob-slide.is-on .ob-slide-tx>:nth-child(2){transition-delay:.35s}.ob-slide.is-on .ob-slide-tx>:nth-child(3){transition-delay:.47s}
.ob-intro-f{position:absolute;z-index:10;left:0;right:0;bottom:0;padding:0 28px 42px;display:flex;gap:12px;align-items:center}
.ob-intro .ob-prev{width:52px;height:52px;background:var(--glass);border-color:var(--glass-line);color:var(--on-img);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity .5s var(--ease)}
.ob-intro .ob-prev.is-off{opacity:.3;pointer-events:none}
.ob-next{flex:1}

/* ═════ age ═════ */
.ob-method{align-items:center}
.ob-m-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--chip-2);color:var(--ink);flex:none;transition:background-color .5s var(--ease),color .5s var(--ease)}
.ob-m-ic svg.ic{width:23px;height:23px}
.ob-method[aria-pressed="true"] .ob-m-ic{background:var(--accent);color:var(--btn-ink)}
:root[data-theme="light"] .ob-method[aria-pressed="true"] .ob-m-ic{color:var(--bg)}
.ob-method .oc-tx b{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ob-method .tag{height:20px;padding:0 8px;font-size:8.5px}
.ob-assure{display:flex;gap:14px;margin-top:22px;padding:16px;border-radius:18px;border:1px dashed var(--line-2)}
.ob-assure>svg.ic{color:var(--accent);margin-top:1px}
.ob-assure b{display:block;font:500 17px/1.25 var(--serif);font-variation-settings:"opsz" 48,"SOFT" 100}
.ob-assure span{display:block;color:var(--ink-2);font-size:13.5px;line-height:1.5;margin-top:5px}
.ob-why{display:inline-flex;align-items:center;gap:8px;margin-top:14px;min-height:40px;color:var(--ink-2);font-weight:500;font-size:14px;transition:color .4s var(--ease)}
.ob-why:hover{color:var(--ink)}
.ob-why svg.ic{width:18px;height:18px}

/* ═════ age check: face ═════ */
.ob-fc{display:flex;flex-direction:column;align-items:center;margin-top:26px}
.ob-oval-wrap{position:relative;width:244px;height:304px;flex:none}
.ob-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ob-ring ellipse{fill:none;stroke-width:3}
.ob-ring .tr{stroke:var(--line-2);transition:stroke .6s var(--ease)}
.ob-ring .pg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:122px 152px;filter:drop-shadow(0 0 6px var(--btn-glow))}
.ob-face[data-stage="scan"] .ob-ring .pg{stroke-dashoffset:0;transition:stroke-dashoffset 5.1s cubic-bezier(.45,.05,.4,1)}
.ob-face[data-stage="check"] .ob-ring .pg{stroke-dashoffset:0;animation:ob-breathe .9s ease-in-out infinite alternate}
.ob-face[data-stage="fail"] .ob-ring .tr{stroke:color-mix(in srgb,var(--warn) 55%,transparent);stroke-dasharray:2 4}
.ob-oval{position:absolute;inset:12px;border-radius:50%;overflow:hidden;
  background:radial-gradient(70% 55% at 50% 30%,rgba(232,105,123,.2),rgba(232,105,123,0) 70%),linear-gradient(180deg,rgb(52,20,41),rgb(20,10,16));
  box-shadow:inset 0 0 0 1px rgba(246,238,225,.08),0 30px 70px -30px rgba(0,0,0,.65)}
.ob-feed svg{position:absolute;left:50%;bottom:-8px;width:86%;transform:translateX(-50%);fill:rgba(246,238,225,.1);filter:blur(1.5px);transition:fill .9s var(--ease),transform 1.2s var(--ease)}
.ob-face[data-stage="scan"] .ob-feed svg,.ob-face[data-stage="check"] .ob-feed svg{fill:rgba(246,238,225,.16);transform:translateX(-50%) scale(1.04)}
.ob-face[data-stage="fail"] .ob-oval{filter:saturate(.4)}
.ob-mesh{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease);
  background-image:radial-gradient(circle,rgba(245,208,217,.8) .9px,transparent 1.5px);background-size:11px 11px;
  -webkit-mask-image:radial-gradient(ellipse 36% 31% at 50% 40%,black 50%,transparent 100%);mask-image:radial-gradient(ellipse 36% 31% at 50% 40%,black 50%,transparent 100%)}
.ob-face[data-stage="scan"] .ob-mesh{opacity:.85;animation:ob-breathe 1.6s ease-in-out infinite alternate}
.ob-face[data-stage="check"] .ob-mesh{opacity:.5}
.ob-sweep{position:absolute;left:0;right:0;top:0;height:34%;opacity:0;background:linear-gradient(180deg,rgba(232,105,123,0),rgba(232,105,123,.3) 50%,rgba(232,105,123,0));transition:opacity .6s}
.ob-face[data-stage="scan"] .ob-sweep{opacity:1;animation:ob-sweep 2.3s ease-in-out infinite alternate}
@keyframes ob-sweep{from{transform:translateY(-70%)}to{transform:translateY(260%)}}
.ob-guide{margin-top:22px;min-height:28px;font:italic 300 21px/1.3 var(--serif);font-variation-settings:"opsz" 72,"SOFT" 100;color:var(--em);text-align:center;padding:0 var(--gut)}
.ob-tips,.ob-checks{list-style:none;padding:0;margin:20px 0 0}
.ob-tips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0 var(--gut)}
.ob-tips li{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.ob-tips svg.ic{width:15px;height:15px}

/* the success moment (shared by every method) */
.ob-done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px 28px 0}
.ob-done>*{animation:ob-rise .9s var(--ease) both}
.ob-done>:nth-child(2){animation-delay:.55s}.ob-done>:nth-child(3){animation-delay:.65s}.ob-done>:nth-child(4){animation-delay:.75s}.ob-done>:nth-child(5){animation-delay:.9s}
.ob-done .eyebrow{color:var(--accent)}
.ob-done h1{font-size:40px;margin-top:12px}
.ob-done>p{margin-top:12px;color:var(--ink-2);max-width:310px}
.ob-seal{position:relative;width:132px;height:132px;margin:6px 0 26px;display:grid;place-items:center;animation:none!important}
.ob-seal::before,.ob-seal::after{content:"";position:absolute;inset:8px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:ob-ripple 2.4s var(--ease) 1.1s 2}
.ob-seal::after{animation-delay:1.9s}
.ob-seal svg{position:relative;z-index:1;width:120px;height:120px}
.ob-seal .c{fill:none;stroke:var(--accent);stroke-width:1.5;stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:60px 60px;animation:ob-draw 1.2s var(--ease) .15s forwards}
.ob-seal .k{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;animation:ob-draw .7s var(--ease) .95s forwards}
.ob-seal-glow{position:absolute;inset:-46px;border-radius:50%;background:radial-gradient(closest-side,var(--btn-glow),rgba(232,105,123,0));opacity:0;animation:ob-glow 2.6s var(--ease) .7s both}
.ob-receipt{list-style:none;margin:28px 0 0;padding:4px 16px;width:100%;border-radius:18px;background:var(--surface);border:1px solid var(--line);text-align:left}
.ob-receipt li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.ob-receipt li:last-child{border-bottom:0}
.ob-receipt svg.ic{width:17px;height:17px;color:var(--accent)}
.ob-receipt span{flex:1}
.ob-receipt b{color:var(--ink);font-weight:600}

/* ═════ age check: photo ID ═════ */
.ob-idb{display:flex;flex-direction:column;align-items:center;margin-top:24px;padding:0 var(--gut)}
.ob-doc{width:100%;margin-bottom:22px}
.ob-doc button{font-size:12.5px;padding:0 6px}
.ob-idframe{position:relative;width:100%;max-width:340px;aspect-ratio:1.45;border-radius:22px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(80% 70% at 50% 40%,rgb(52,20,41),rgb(20,10,16));box-shadow:inset 0 0 0 1px rgba(246,238,225,.08),0 30px 70px -30px rgba(0,0,0,.6)}
.ob-idframe .cn{position:absolute;z-index:2;width:30px;height:30px;border:2.5px solid var(--on-img);opacity:.9;transition:all .8s var(--ease)}
.ob-idframe .tl{top:14px;left:14px;border-right:0;border-bottom:0;border-radius:12px 0 0 0}
.ob-idframe .tr{top:14px;right:14px;border-left:0;border-bottom:0;border-radius:0 12px 0 0}
.ob-idframe .bl{bottom:14px;left:14px;border-right:0;border-top:0;border-radius:0 0 0 12px}
.ob-idframe .br{bottom:14px;right:14px;border-left:0;border-top:0;border-radius:0 0 12px 0}
.ob-id[data-stage="cap"] .cn{border-color:var(--img-btn);animation:ob-breathe .6s ease-in-out infinite alternate}
.ob-id[data-stage="review"] .cn,.ob-id[data-stage="check"] .cn{border-color:var(--ok);opacity:.8}
.ob-idcard{width:80%;aspect-ratio:1.586;border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;justify-content:space-between;color:rgb(42,15,35);
  background:linear-gradient(135deg,var(--on-img) 0%,rgb(232,217,198) 100%);box-shadow:0 18px 30px -14px rgba(0,0,0,.6);
  transform:rotate(-3deg) scale(.94);opacity:.22;filter:blur(2px);transition:transform 1s var(--ease),opacity 1s var(--ease),filter 1s var(--ease)}
.ob-id[data-stage="cap"] .ob-idcard{transform:rotate(-1deg) scale(.97);opacity:.55;filter:blur(.8px)}
.ob-id[data-stage="review"] .ob-idcard,.ob-id[data-stage="check"] .ob-idcard{transform:none;opacity:1;filter:none}
.ob-id[data-stage="check"] .ob-idcard{animation:ob-breathe .9s ease-in-out infinite alternate}
.ob-idc-h{display:flex;justify-content:space-between;align-items:center}
.ob-idc-t{font:700 7.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase}
.ob-idc-crest{width:15px;height:15px;border-radius:50%;border:1.5px solid rgba(42,15,35,.45)}
.ob-idc-b{display:flex;gap:10px;align-items:center;flex:1;margin:8px 0}
.ob-idc-ph{width:26%;aspect-ratio:.78;border-radius:6px;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(42,15,35,.16),rgba(42,15,35,.34))}
.ob-idc-ph::after{content:"";position:absolute;left:50%;top:22%;width:38%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:rgba(42,15,35,.28);box-shadow:0 26px 0 10px rgba(42,15,35,.28)}
.ob-idc-ln{flex:1;display:flex;flex-direction:column;gap:6px}
.ob-idc-ln i{display:block;height:5px;border-radius:3px;background:rgba(42,15,35,.2)}
.ob-idc-mrz{font:500 7.5px/1.3 ui-monospace,Menlo,monospace;letter-spacing:.06em;opacity:.55;white-space:nowrap;overflow:hidden}
.ob-flash{position:absolute;inset:0;z-index:3;background:var(--on-img);opacity:0;pointer-events:none}
.ob-id.is-flash .ob-flash{animation:ob-flash .5s ease-out}
@keyframes ob-flash{0%{opacity:.85}100%{opacity:0}}
.ob-checks{width:100%;margin-top:18px;padding:2px 16px;border-radius:18px;background:var(--surface);border:1px solid var(--line)}
.ob-checks li{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.ob-checks li:last-child{border-bottom:0}
.ob-checks svg.ic{width:17px;height:17px;color:var(--ok)}
.ob-checks li{animation:ob-rise .7s var(--ease) both}
.ob-checks li:nth-child(2){animation-delay:.12s}.ob-checks li:nth-child(3){animation-delay:.24s}

/* ═════ age check: bank card ═════ */
.ob-cardf{display:block}
.ob-cc{position:relative;height:186px;border-radius:20px;padding:20px 22px;margin-bottom:24px;color:var(--on-img);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  background:radial-gradient(90% 120% at 100% 0%,rgba(232,105,123,.42) 0%,rgba(232,105,123,0) 55%),linear-gradient(135deg,rgb(58,20,48),rgb(42,15,35) 55%,rgb(28,10,22));
  box-shadow:inset 0 0 0 1px rgba(246,238,225,.1),0 30px 60px -30px rgba(0,0,0,.6)}
.ob-cc::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.07) 48%,rgba(255,255,255,0) 60%);background-size:250% 100%;animation:ob-sheen 9s var(--ease) infinite}
@keyframes ob-sheen{0%,60%{background-position:120% 0}100%{background-position:-60% 0}}
.ob-cc-chip{width:40px;height:30px;border-radius:7px;background:linear-gradient(135deg,rgba(245,208,217,.85),rgba(201,162,126,.75));box-shadow:inset 0 0 0 1px rgba(42,15,35,.25)}
.ob-cc-n{font:500 21px/1 var(--serif);font-variation-settings:"opsz" 48,"SOFT" 100;letter-spacing:.08em;font-variant-numeric:tabular-nums;white-space:nowrap}
.ob-cc-f{display:flex;justify-content:space-between;gap:12px}
.ob-cc-f small{display:block;font:600 8.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--on-img-3);margin-bottom:6px}
.ob-cc-f b{font-weight:600;font-size:13px;max-width:190px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ═════ sign-up & passwords ═════ */
.ob-social{display:flex;flex-direction:column;gap:10px}
.ob-apple{background:var(--ink);color:var(--bg)}
.ob-apple:hover{box-shadow:0 10px 30px -12px var(--btn-glow)}
.ob-apple.is-busy::after{border-color:var(--bg);border-right-color:transparent}
.ob-pw{display:flex;align-items:center;gap:12px;margin-top:12px}
.ob-meter{display:flex;gap:4px;width:120px;flex:none}
.ob-meter i{flex:1;height:4px;border-radius:2px;background:var(--line-2);transition:background-color .6s var(--ease)}
.ob-meter[data-score="1"] i:nth-child(-n+1){background:var(--danger)}
.ob-meter[data-score="2"] i:nth-child(-n+2){background:var(--warn)}
.ob-meter[data-score="3"] i:nth-child(-n+3){background:var(--ok)}
.ob-meter[data-score="4"] i{background:var(--ok)}
.ob-pw-l{font-size:12.5px;color:var(--ink-2)}
.ob-rules{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:6px}
.ob-rules li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);transition:color .5s var(--ease)}
.ob-rules svg.ic{width:15px;height:15px;opacity:.35;transition:opacity .5s var(--ease),color .5s var(--ease)}
.ob-rules li.ok{color:var(--ink-2)}
.ob-rules li.ok svg.ic{opacity:1;color:var(--ok)}
.ob-consents{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.ob-chk .check{color:var(--ink-2)}
.ob-chk .check small{display:block;margin-top:5px;font-size:12.5px;color:var(--ink-3)}
.ob-chk .check .link{font-size:inherit;padding:0}
.ob-chk.has-err .check input{border-color:var(--danger)}
.ob-chk .err{margin-left:34px}

/* ═════ verify ═════ */
.ob-otp{gap:9px}
.ob-otp input{transition:border-color .5s var(--ease),background-color .5s var(--ease),opacity .4s}
.ob-otp input::placeholder{color:var(--ink-3)}
.ob-otp input:not(:placeholder-shown){border-color:var(--ink-3)}
.ob-otp[data-state="checking"] input{opacity:.55}
.ob-otp[data-state="error"] input{border-color:var(--danger);animation:ob-nudge .5s var(--ease)}
@keyframes ob-nudge{0%{transform:translateX(7px)}100%{transform:none}}
.ob-otp[data-state="ok"] input{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.ob-otp[data-state="ok"] input:nth-child(2){transition-delay:.05s}.ob-otp[data-state="ok"] input:nth-child(3){transition-delay:.1s}.ob-otp[data-state="ok"] input:nth-child(4){transition-delay:.15s}.ob-otp[data-state="ok"] input:nth-child(5){transition-delay:.2s}.ob-otp[data-state="ok"] input:nth-child(6){transition-delay:.25s}
.ob-otp-st{min-height:22px;margin-top:16px;display:flex;justify-content:center;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2);text-align:center}
.ob-otp-st svg.ic{width:16px;height:16px}
.ob-otp-st[data-state="error"]{color:var(--danger)}
.ob-otp-st[data-state="ok"]{color:var(--ok)}
.ob-otp-meta{margin-top:30px;display:flex;flex-direction:column;gap:12px;text-align:center;font-size:14px;color:var(--ink-2)}
.ob-otp-meta .link:disabled{color:var(--ink-3);font-weight:500;cursor:default;font-variant-numeric:tabular-nums}

/* ═════ sign in ═════ */
.ob-lg-hero{position:absolute;top:0;left:0;right:0;height:300px;overflow:hidden}
.ob-lg-hero .ph img{object-position:50% 42%}
.ob-lg-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,10,16,.5) 0%,rgba(20,10,16,.08) 34%,rgba(var(--scrim),.72) 72%,rgb(var(--scrim)) 100%)}
.ob-lg-in{position:relative;z-index:2;padding-top:118px}
.ob-lg-mark{padding:0 var(--gut);margin-bottom:22px}
.ob-lg-mark .monogram{width:44px;height:44px;font-size:24px;color:var(--on-img);border-color:color-mix(in srgb,var(--on-img) 45%,transparent);background:rgba(20,10,16,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ob-faceid{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:18px;background:var(--surface);border:1px solid var(--line-2);text-align:left;transition:border-color .5s var(--ease),box-shadow .6s var(--ease)}
.ob-faceid:hover{border-color:var(--ink-2)}
.ob-faceid:active{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 14%,transparent)}
.ob-faceid>svg.ic:first-child{width:30px;height:30px;color:var(--accent)}
.ob-faceid>span{flex:1;min-width:0}
.ob-faceid b{display:block;font:500 18px/1.2 var(--serif);font-variation-settings:"opsz" 48,"SOFT" 100}
.ob-faceid span span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob-faceid>svg.ic:last-child{width:16px;height:16px;color:var(--ink-3)}
.ob-forgot-link{align-self:flex-end;font-size:13.5px;min-height:32px;display:inline-flex;align-items:center;margin-top:-4px}
.ob-login .ob-proto{margin-top:6px}
.ob-fid{display:flex;flex-direction:column;align-items:center;gap:18px;padding:22px 0 18px}
.ob-fid-ic{position:relative;width:96px;height:96px;display:grid;place-items:center;color:var(--accent)}
.ob-fid-ic>svg.ic{width:72px;height:72px;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.ob-fid[data-s="scan"] .ob-fid-ic>svg.ic{animation:ob-breathe .8s ease-in-out infinite alternate}
.ob-fid-ok{position:absolute;inset:12px;width:72px;height:72px;fill:none;stroke:var(--ok);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}
.ob-fid[data-s="ok"] .ob-fid-ic>svg.ic{opacity:0;transform:scale(.85)}
.ob-fid[data-s="ok"] .ob-fid-ok{animation:ob-draw .6s var(--ease) .1s forwards}
.ob-fid-t{font:500 21px/1.2 var(--serif);font-variation-settings:"opsz" 72,"SOFT" 100}

/* ═════ forgotten · sent · reset ═════ */
.ob-center{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:6px}
.ob-center h1{font-size:40px;margin-top:12px}
.ob-center>p{margin-top:12px;color:var(--ink-2);max-width:310px}
.ob-center>p b{color:var(--ink);font-weight:600}
.ob-env{position:relative;width:184px;height:128px;margin:44px 0 30px}
.ob-env>span{position:absolute}
.ob-env-back{z-index:0;inset:0;border-radius:12px;background:var(--raised)}
.ob-env-flap{z-index:0;left:0;right:0;bottom:100%;height:56px;background:var(--raised);clip-path:polygon(0 100%,100% 100%,50% 6%);border-radius:12px 12px 0 0}
.ob-env-letter{z-index:1;left:16px;right:16px;top:12px;height:104px;border-radius:8px;background:var(--on-img);padding:18px 16px;display:flex;flex-direction:column;gap:8px;box-shadow:0 10px 20px -12px rgba(0,0,0,.5);animation:ob-letter 1.4s var(--ease) .3s both}
.ob-env-letter i{display:block;height:4px;border-radius:2px;background:rgba(42,15,35,.16)}
.ob-env-letter i:nth-child(1){width:46%}.ob-env-letter i:nth-child(2){width:82%}.ob-env-letter i:nth-child(3){width:64%}
@keyframes ob-letter{from{transform:translateY(34px)}to{transform:translateY(-38px)}}
.ob-env-front{z-index:2;inset:0;border-radius:12px;background:var(--raised-2);clip-path:polygon(0 30%,50% 66%,100% 30%,100% 100%,0 100%);box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.ob-env-seal{left:50%;top:66%;transform:translate(-50%,-50%);z-index:3}
.ob-env-seal .monogram{width:42px;height:42px;font-size:21px;border:0;background:var(--accent);color:var(--bg);box-shadow:0 6px 16px -6px var(--btn-glow)}
.ob-env-seal .monogram .dot{color:var(--bg)}
.ob-sender,.ob-preview{display:flex;gap:12px;align-items:center;width:100%;padding:14px;border-radius:18px;background:var(--surface);border:1px solid var(--line);text-align:left}
.ob-sender{margin-top:26px}
.ob-sender>span:nth-child(2),.ob-preview>span:nth-child(2){flex:1;min-width:0}
.ob-sender b,.ob-preview b{display:block;font-size:14.5px;font-weight:600}
.ob-sender span span,.ob-preview span span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.ob-sender-av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--raised-2);font:500 18px/1 var(--serif);color:var(--ink)}
.ob-sent .ob-fine{justify-content:center;text-align:left}
.ob-reset .ob-done{padding-top:40px}

/* ═════ pathway ═════ */
.ob-paths{display:flex;flex-direction:column;gap:14px}
.ob-pcard{width:100%;height:238px;display:flex;flex-direction:column;justify-content:space-between;padding:16px 18px 20px;text-align:left;
  box-shadow:inset 0 0 0 1px rgba(246,238,225,.08);transition:box-shadow .7s var(--ease),opacity .7s var(--ease),filter .7s var(--ease)}
.ob-pcard .ph img{object-position:50% 32%}
.ob-pcard[data-v="solo"] .ph img{object-position:50% 22%}
.ob-pcard[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--accent),0 24px 50px -26px var(--btn-glow)}
.ob-paths:has([aria-pressed="true"]) .ob-pcard[aria-pressed="false"]{opacity:.78;filter:saturate(.6) brightness(.8)}
.ob-pcard .scrim{background:linear-gradient(180deg,rgba(20,10,16,.4) 0%,rgba(20,10,16,0) 30%,rgba(30,14,24,.35) 50%,rgba(30,14,24,.94) 92%)}
.ob-pc-t{display:flex;justify-content:space-between;align-items:center}
.ob-pc-dot{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1.5px solid color-mix(in srgb,var(--on-img) 60%,transparent);color:transparent;transition:background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}
.ob-pc-dot svg.ic{width:16px;height:16px}
.ob-pcard[aria-pressed="true"] .ob-pc-dot{background:var(--img-btn);border-color:var(--img-btn);color:var(--img-btn-ink)}
.ob-pc-b .display{display:block;font-size:30px;line-height:1.05}
.ob-pc-s{display:block;margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--on-img-2);max-width:290px}

/* ═════ interests · goals · comfort ═════ */
.ob-grp{margin-bottom:26px}
.ob-grp .eyebrow{display:block;margin-bottom:12px}
.ob-chip{height:44px;padding:0 16px 0 5px;gap:10px}
.ob-chip-im{width:34px;height:34px;border-radius:50%;overflow:hidden;flex:none}
.ob-chip-im img{width:100%;height:100%;object-fit:cover}
.ob-chip-ck{display:inline-grid;width:0;overflow:hidden;margin-left:-6px;transition:width .45s var(--ease),margin .45s var(--ease)}
.ob-chip-ck svg.ic{width:15px;height:15px}
.ob-chip[aria-pressed="true"] .ob-chip-ck{width:15px;margin-left:0}
.ob-tray-foot{gap:12px}
.ob-tray{display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.ob-tray-im{display:flex;min-width:30px}
.ob-tray-im img{width:30px;height:30px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--surface);animation:ob-fade .5s var(--ease)}
.ob-tray-im img+img{margin-left:-10px}
.ob-tray-im:empty::before{content:"";width:30px;height:30px;border-radius:50%;border:1px dashed var(--line-2)}
.ob-tray-t{flex:1;font-size:13.5px;color:var(--ink-2)}
.ob-tray-t b{font:500 20px/1 var(--serif);color:var(--ink);margin-right:3px}
.ob-tray.pulse .ob-tray-t b{animation:ob-tick .8s var(--ease)}
@keyframes ob-tick{from{color:var(--accent)}}
.ob-tray-h{font-size:12px;color:var(--ink-3)}
.ob-goals{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.ob-goal{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:12px 2px;border-bottom:1px solid var(--line);text-align:left;
  font:400 19px/1.25 var(--serif);font-variation-settings:"opsz" 48,"SOFT" 100;color:var(--ink);transition:color .5s var(--ease)}
.ob-goal>span{flex:1}
.ob-goal[aria-pressed="true"]{font-style:italic;font-weight:300;color:var(--em)}
.ob-goal-ck{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:transparent;flex:none;transition:background-color .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}
.ob-goal-ck svg.ic{width:15px;height:15px}
.ob-goal[aria-pressed="true"] .ob-goal-ck{background:var(--accent);border-color:var(--accent);color:var(--btn-ink)}
:root[data-theme="light"] .ob-goal[aria-pressed="true"] .ob-goal-ck{color:var(--bg)}
.ob-int.is-full .ob-goal[aria-pressed="false"]{color:var(--ink-3)}
.ob-count{text-align:center;font-size:13px;color:var(--ink-2)}
.ob-count b{font:500 17px/1 var(--serif);color:var(--ink)}
.ob-cf{align-items:flex-start}
.ob-heat{display:flex;align-items:flex-end;gap:3px;width:24px;height:24px;flex:none;margin-top:2px}
.ob-heat i{flex:1;border-radius:2px;background:var(--line-2);transition:background-color .5s var(--ease)}
.ob-heat i:nth-child(1){height:40%}.ob-heat i:nth-child(2){height:70%}.ob-heat i:nth-child(3){height:100%}
.ob-heat i.on{background:var(--accent)}
.ob-cf .oc-dot{margin-top:2px}
.ob-mood{margin-top:32px}
.ob-mood .eyebrow{display:block;margin-bottom:12px}
.ob-mood .hint{display:block;margin-top:12px}

/* ═════ privacy ═════ */
.ob-pv-hero{position:absolute;top:0;left:0;right:0;height:380px;overflow:hidden}
.ob-pv-hero .ph img{object-position:50% 38%}
.ob-pv-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(20,10,16,.55) 0%,rgba(20,10,16,0) 24%,rgba(var(--scrim),.55) 44%,rgba(var(--scrim),.94) 64%,rgb(var(--scrim)) 82%)}
.ob-pv-h{position:relative;z-index:2;padding:222px var(--gut) 0}
.ob-pv-h .eyebrow{display:block;margin-bottom:12px}
.ob-pv-h h1{font-size:46px;line-height:1}
.ob-pv-h p{margin-top:14px;color:var(--ink-2);max-width:320px;font-size:15.5px}
.ob-promises{position:relative;z-index:2;list-style:none;margin:30px 0 0;display:flex;flex-direction:column}
.ob-promises li{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line);font:400 18px/1.4 var(--serif);font-variation-settings:"opsz" 48,"SOFT" 100}
.ob-promises li:last-child{border-bottom:1px solid var(--line)}
.ob-rn{flex:none;width:30px;font:italic 300 19px/1.35 var(--serif);font-variation-settings:"opsz" 72,"SOFT" 100;color:var(--em)}
.ob-sec-p{color:var(--ink-2);font-size:14px;margin:-6px 0 16px}
.ob-icons{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ob-ico{display:flex;flex-direction:column;align-items:center;gap:3px;padding:22px 12px 18px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--chip);text-align:center;transition:border-color .5s var(--ease),background-color .5s var(--ease),box-shadow .6s var(--ease)}
.ob-ico:hover{border-color:var(--ink-2)}
.ob-ico[aria-pressed="true"]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);box-shadow:0 0 0 1px var(--accent) inset}
.ob-ico-a{width:64px;height:64px;border-radius:17px;display:grid;place-items:center;margin-bottom:12px;box-shadow:0 14px 26px -14px rgba(0,0,0,.55)}
.ob-ico-a.is-gush{background:radial-gradient(90% 90% at 100% 0%,rgba(232,105,123,.5),rgba(232,105,123,0) 60%),linear-gradient(135deg,rgb(58,20,48),rgb(30,14,24));color:var(--on-img)}
.ob-ico-a.is-gush .monogram{border:0;width:auto;height:auto;font-size:30px}
.ob-ico-a.is-plain{background:linear-gradient(180deg,var(--on-img),rgb(225,214,200));color:rgb(104,116,98)}
.ob-ico-a.is-plain svg.ic{width:30px;height:30px}
.ob-ico b{font:500 17px/1.2 var(--serif);font-variation-settings:"opsz" 48,"SOFT" 100}
.ob-ico>span:last-child{font-size:12px;color:var(--ink-2)}

/* ═════ invite ═════ */
.ob-split{display:flex;flex-direction:column;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
.ob-split-a,.ob-split-b{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:24px 20px}
.ob-split-a{border-radius:var(--r) var(--r) 0 0;background:radial-gradient(80% 90% at 50% 0%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%)}
.ob-split-b{border-top:1px solid var(--line);padding-top:28px}
.ob-or{align-self:center;position:relative;z-index:2;margin:-17px 0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line-2);font:italic 300 15px/1 var(--serif);color:var(--em)}
.ob-code{display:flex;gap:6px;padding:4px;border-radius:16px}
.ob-code span{width:40px;height:54px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--bg);font:500 26px/1 var(--serif);font-variation-settings:"opsz" 72,"SOFT" 100;color:var(--ink);transition:border-color .5s var(--ease),color .5s var(--ease);animation:ob-rise .7s var(--ease) both;animation-delay:calc(var(--d) + 150ms)}
.ob-code.is-copied span{border-color:var(--accent);color:var(--accent)}
.ob-code-h{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.ob-code-h svg.ic{width:14px;height:14px}
.ob-split-a .btn-row{width:100%;margin-top:4px}
.ob-split-a .btn-row .btn{padding:0 12px}
.ob-split-b .field{width:100%;text-align:left}
.ob-split-b .field>label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ob-split-b .input{text-align:center;font:500 22px/1 var(--serif);letter-spacing:.3em;text-transform:uppercase}
.ob-split-b .input::placeholder{font:400 15px/1 var(--sans);letter-spacing:.06em;text-transform:none}
.ob-split-b .err{justify-content:center}
.ob-wait-h{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px var(--gut) 0}
.ob-wait-h h1{font-size:40px;margin-top:12px}
.ob-wait-h p{margin-top:12px;color:var(--ink-2);max-width:320px}
.ob-wait-h p b{color:var(--ink);font-weight:600;white-space:nowrap}
.ob-wait-av{position:relative;display:flex;margin-bottom:24px}
.ob-wait-av .av{box-shadow:0 0 0 3px var(--bg)}
.ob-wait-av .av+.av{margin-left:-14px}
.ob-av-ghost{background:var(--bg);color:var(--ink-2);border:1.5px dashed var(--line-2)}
.ob-pulse{position:absolute;left:68px;top:-6px;width:100px;height:100px;border-radius:50%;border:1px solid var(--accent);animation:ob-pulse 3.2s var(--ease) infinite}
.ob-tl{list-style:none;padding:0;margin:0 0 26px}
.ob-tl li{display:flex;gap:14px;padding-bottom:18px;position:relative}
.ob-tl li::before{content:"";position:absolute;left:6.5px;top:18px;bottom:0;border-left:1px dashed var(--line-2)}
.ob-tl li:last-child{padding-bottom:0}.ob-tl li:last-child::before{display:none}
.ob-tl li>i{position:relative;z-index:1;width:14px;height:14px;margin-top:4px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--bg);flex:none}
.ob-tl li.done>i{background:var(--accent);border-color:var(--accent)}
.ob-tl li.now>i{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent);animation:ob-breathe 1.6s ease-in-out infinite alternate}
.ob-tl b{display:block;font:500 17px/1.3 var(--serif);font-variation-settings:"opsz" 48,"SOFT" 100}
.ob-tl li:not(.done):not(.now) b{color:var(--ink-2)}
.ob-tl span span{display:block;font-size:12.5px;color:var(--ink-2);margin-top:2px}
.ob-wait .row-item[disabled]{opacity:.6;cursor:default}
.ob-sheet-f{margin-top:18px}
.ob-sheet-f .ob-preview{margin-top:4px}

/* ═════ pairing ═════ */
.ob-pair-hero{position:absolute;top:0;left:0;right:0;height:440px;overflow:hidden}
.ob-pair-hero .ph img{object-position:50% 50%}
.ob-pair-scrim{position:absolute;inset:0;z-index:1;background:radial-gradient(50% 30% at 50% 58%,rgba(232,105,123,.28),rgba(232,105,123,0) 70%),linear-gradient(180deg,rgba(20,10,16,.55) 0%,rgba(20,10,16,.15) 28%,rgba(var(--scrim),.62) 50%,rgba(var(--scrim),.95) 64%,rgb(var(--scrim)) 80%)}
.ob-meet{position:relative;z-index:2;height:130px;margin-top:130px;display:flex;justify-content:center;align-items:center}
.ob-meet .av{position:relative;z-index:2;box-shadow:0 0 0 3px rgba(20,10,16,.55),0 20px 40px -14px rgba(0,0,0,.6)}
.ob-m{animation:ob-meet-l 1.6s var(--ease) .25s both}
.ob-s{animation:ob-meet-r 1.6s var(--ease) .25s both}
@keyframes ob-meet-l{from{transform:translateX(-96px);opacity:0}to{transform:translateX(9px)}}
@keyframes ob-meet-r{from{transform:translateX(96px);opacity:0}to{transform:translateX(-9px)}}
.ob-meet-glow{position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(closest-side,var(--btn-glow),rgba(232,105,123,0));animation:ob-glow 2.6s var(--ease) 1.1s both}
.ob-pair-h{position:relative;z-index:2;text-align:center;padding:24px var(--gut) 0}
.ob-pair-h>*{animation:ob-rise 1s var(--ease) both}
.ob-pair-h>:nth-child(1){animation-delay:1.25s}.ob-pair-h>:nth-child(2){animation-delay:1.38s}.ob-pair-h>:nth-child(3){animation-delay:1.5s}
.ob-pair-h .eyebrow{display:block;color:var(--accent)}
.ob-pair-h h1{font-size:46px;margin-top:12px;line-height:1}
.ob-pair-h p{margin-top:12px;color:var(--ink-2)}
.ob-pair .ob-body{position:relative;z-index:2;animation:ob-rise 1s var(--ease) 1.65s both}
.ob-shares{padding:4px 16px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.ob-shares h2{padding:16px 0 8px}
.ob-sh{display:flex;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.ob-sh-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--chip-2);flex:none}
.ob-sh-ic svg.ic{width:19px;height:19px}
.ob-sh>span:nth-child(2){flex:1;min-width:0}
.ob-sh b{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-weight:600;font-size:15px}
.ob-sh b .tag{height:20px;padding:0 8px;font-size:8.5px}
.ob-sh>span>span{display:block;color:var(--ink-2);font-size:13px;margin-top:2px}

/* ═════ how it works ═════ */
.ob-how-l{list-style:none;padding:0;margin:0 0 30px}
.ob-how-l li{display:flex;gap:16px;padding-bottom:26px;position:relative}
.ob-how-l li::before{content:"";position:absolute;left:21.5px;top:50px;bottom:6px;border-left:1px dashed var(--line-2)}
.ob-how-l li:last-child{padding-bottom:0}.ob-how-l li:last-child::before{display:none}
.ob-how-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--accent);background:var(--bg);flex:none}
.ob-how-ic svg.ic{width:20px;height:20px}
.ob-how-tx{flex:1;min-width:0}
.ob-how-n{display:block;margin:3px 0 7px;font:600 10.5px/1 var(--sans);letter-spacing:.22em;color:var(--ink-3)}
.ob-how-tx b{display:block;font:500 21px/1.2 var(--serif);font-variation-settings:"opsz" 72,"SOFT" 100;letter-spacing:-.01em}
.ob-how-tx>span:last-child{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.ob-mcard{position:relative;isolation:isolate;overflow:hidden;height:200px;border-radius:var(--r);padding:20px 22px;color:var(--on-img);display:flex;flex-direction:column;justify-content:space-between;
  background:radial-gradient(90% 120% at 100% 0%,rgba(232,105,123,.42) 0%,rgba(232,105,123,0) 55%),radial-gradient(80% 90% at 0% 100%,rgba(20,10,16,.9),rgba(20,10,16,0) 70%),linear-gradient(135deg,rgb(58,20,48),rgb(42,15,35) 55%,rgb(28,10,22));
  box-shadow:inset 0 0 0 1px rgba(246,238,225,.1),0 30px 60px -30px rgba(0,0,0,.6)}
.ob-mcard::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.07) 48%,rgba(255,255,255,0) 60%);background-size:250% 100%;animation:ob-sheen 9s var(--ease) infinite}
.ob-mc-silk{position:absolute;inset:0;z-index:0;opacity:.38;mix-blend-mode:screen}
.ob-mc-silk img{width:100%;height:100%;object-fit:cover;object-position:70% 40%}
.ob-mc-r{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:12px}
.ob-mc-r .wordmark{font-size:22px}
.ob-mc-r .eyebrow{color:var(--on-img-2)}
.ob-mc-b{align-items:flex-end}
.ob-mc-b b{display:block;font-size:27px;line-height:1;margin-bottom:7px}
.ob-mc-b b em{color:#F5D0D9}
.ob-mc-b div>span{font-size:12.5px;letter-spacing:.02em;color:var(--on-img-2)}
.ob-mcard .pair{border-color:rgba(246,238,225,.2)}
.ob-mcard .pair .av{box-shadow:0 0 0 2px rgb(42,15,35)}
.ob-enter{letter-spacing:.06em}

/* ═════ sheets ═════ */
.ob-sheet-tx{margin:6px 0 22px}
.ob-sheet-tx p{color:var(--ink-2);font-size:15px;line-height:1.6;margin-bottom:12px}
.ob-sheet-tx b{color:var(--ink)}
.ob-sheet-list{list-style:none;padding:0;margin:4px 0 22px}
.ob-sheet-list li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.ob-sheet-list li:last-child{border-bottom:0}
.ob-sheet-list svg.ic{width:17px;height:17px;color:var(--accent);margin-top:2px}

/* ═════ mobile & small screens ═════ */
@media (max-width:599px){
  .ob-w-top{top:calc(env(safe-area-inset-top,0px) + 30px)}
  .ob-w-b{padding-bottom:max(30px,calc(env(safe-area-inset-bottom,0px) + 16px))}
  .ob-foot{padding-bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 12px))}
  .ob-intro-f{padding-bottom:max(26px,calc(env(safe-area-inset-bottom,0px) + 14px))}
  .ob-slide-tx{padding-bottom:120px}
  .ob-lg-in{padding-top:calc(env(safe-area-inset-top,0px) + 76px)}
  .ob-pv-h{padding-top:calc(env(safe-area-inset-top,0px) + 186px)}
  .ob-meet{margin-top:calc(env(safe-area-inset-top,0px) + 90px)}
}
@media (max-width:374px){
  .ob-head h1,.ob-center h1,.ob-done h1,.ob-wait-h h1{font-size:34px}
  .ob-w-b h1,.ob-pv-h h1,.ob-pair-h h1{font-size:38px}
  .ob-otp{gap:6px}.ob-otp input{width:42px;height:54px}
  .ob-code span{width:34px;height:48px;font-size:22px}
  .ob-2col{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .ob-story i.on b,.ob-seal .c,.ob-seal .k{transform:none;stroke-dashoffset:0}
  .ob-seal .c{transform:rotate(-90deg)}
  .ob-fid[data-s="ok"] .ob-fid-ok{stroke-dashoffset:0}
  .ob-slide-tx>*{opacity:1;transform:none}
  .ob-seal-glow{opacity:.5}
  .ob-env-letter{transform:translateY(-38px)}
}
.ob-method .oc-tx b .tag{display:inline-flex;margin-top:0;color:var(--accent);font-size:8.5px}