/*
 * VETTAR SIGN IN AND ACCOUNT, v3 (founder approved 18 Oct 2026: remy-hq design/vettar-signin-v3.html, the hero band
 * "Paper Sun" from design/vettar-hero-options.html). The phone's own styles are in _ported.css, taken from the mockup
 * as it is (class names prefixed v3-, the mockup's phone is the real screen here). This file holds the two skins, the
 * page root, the band and what a real phone needs that a mockup does not (safe areas, reduced motion).
 *
 * RULES KEPT: no coloured side stripes, no pale green fills, every animation a transform or opacity, everything settles
 * at once under prefers-reduced-motion.
 */
.v3-stage{position:absolute;inset:0}
.v3-scr{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--sheet);animation:v3-inF .34s var(--ease) both;overflow:hidden}
.v3-scr.v3-bk{animation-name:v3-inB}
.v3-scr.v3-out{animation:v3-outA .2s ease both;pointer-events:none;z-index:0}
.v3-scr.v3-plain{background:var(--bg2)}
.v3-scr.v3-white{background:var(--sheet)}
@keyframes v3-inF{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes v3-inB{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
@keyframes v3-outA{to{opacity:0}}

.v3-sb{height:44px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 26px 0 28px;font:600 14px var(--sans);color:var(--tx);position:relative;z-index:5}
.v3-sb.v3-w{color:#fff}
.v3-sb .v3-sbi{display:flex;gap:5px;align-items:center}
.v3-sb svg{height:12px;width:auto;display:block}

/* hero band */
.v3-hero{position:relative;flex:none;min-height:max(150px,calc(var(--ph)*.3));display:flex;flex-direction:column;justify-content:flex-end;padding:60px 24px 50px;overflow:hidden;color:#fff;
  }
.v3-hero.v3-sm{height:auto;min-height:max(132px,calc(var(--ph)*.2));display:flex;flex-direction:column;justify-content:flex-end;padding:98px 24px 46px}
.v3-hero .v3-sb{position:absolute;top:0;left:0;right:0}
.v3-hcon{position:relative;z-index:2}
.v3-wm{display:flex;align-items:center;gap:9px;font:500 15px var(--sans);letter-spacing:-.01em;color:rgba(255,255,255,.86)}
.v3-wm b{font-weight:800;color:#fff}
.v3-hero .v3-orb{box-shadow:0 0 0 1.5px rgba(255,255,255,.22),0 4px 12px rgba(0,0,0,.25)}
.v3-htitle{margin:14px 0 0;font:800 31px/1.08 var(--sans);letter-spacing:-.032em;color:#fff}
.v3-hero.v3-sm .v3-htitle{font-size:27px;margin:0}
.v3-hback{position:absolute;left:14px;top:48px;z-index:3;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.v3-hback svg{width:20px;height:20px}

/* sheet */
.v3-sheet{position:relative;z-index:3;margin-top:-28px;flex:1;min-height:0;background:var(--sheet);border-radius:28px 28px 0 0;
  padding:26px 24px 22px;display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none}
.v3-sheet::-webkit-scrollbar{display:none}
.v3-line{margin:0 0 20px;font-size:16px;line-height:1.45;color:var(--tx2)}
.v3-line b{color:var(--tx);font-weight:700}

/* social */
.v3-soc{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.v3-sbtn{height:54px;border-radius:16px;border:0;cursor:pointer;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1px #dadce0;transition:transform .15s var(--spring)}
.v3-sbtn:active{transform:scale(.97)}
.v3-sbtn svg{width:22px;height:22px;display:block}
.v3-sbtn.v3-ap svg{color:#000;width:20px;height:24px}
.v3[data-app="owners"] .v3-sbtn{background:#131314;box-shadow:inset 0 0 0 1px #8e918f}
.v3[data-app="owners"] .v3-sbtn.v3-ap svg{color:#fff}
.v3-or{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--tx3);font:500 13px var(--sans)}
.v3-or::before,.v3-or::after{content:"";flex:1;height:1px;background:var(--ln)}

/* fields */
.v3-fields{display:flex;flex-direction:column;gap:10px}
.v3-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.v3-fld{position:relative;height:52px;border-radius:15px;background:var(--field);transition:box-shadow .18s,background .18s;min-width:0}
.v3-fld:focus-within{background:var(--fieldF);box-shadow:inset 0 0 0 1.5px var(--ring)}
.v3-fld.v3-err{box-shadow:inset 0 0 0 1.5px var(--danger)}
.v3-fld input{position:absolute;inset:0;width:100%;height:100%;border:0;background:none;outline:none;padding:19px 16px 4px;font:500 16px var(--sans);color:var(--tx);border-radius:15px;letter-spacing:-.005em;text-overflow:ellipsis}
.v3-fld.v3-pw input{padding-right:52px}
.v3-fld label{position:absolute;left:16px;top:26px;transform:translateY(-50%);font:500 16px var(--sans);color:var(--tx3);pointer-events:none;transition:top .16s var(--ease),font-size .16s var(--ease)}
.v3-fld input:focus+label,.v3-fld input:not(:placeholder-shown)+label{top:15px;font-size:12px;font-weight:600}
.v3-fld.v3-mono input{font:600 20px var(--mono);letter-spacing:.14em;text-transform:uppercase;padding-top:5px}
.v3-fld.v3-mono label{display:none}
.v3-fld.v3-mono input::placeholder{color:var(--tx3);letter-spacing:.14em}
.v3-eye{position:absolute;right:4px;top:4px;width:44px;height:44px;border:0;background:none;border-radius:12px;cursor:pointer;display:grid;place-items:center;color:var(--tx2)}
.v3-eye svg{width:22px;height:22px}
.v3-msg{font:500 13.5px/1.35 var(--sans);color:var(--danger);margin:-4px 2px 0;display:flex;gap:8px;align-items:center}
.v3-msg[hidden]{display:none}
.v3-frow{display:flex;justify-content:flex-end;margin:4px 0 0}
.v3-tlink{border:0;background:none;cursor:pointer;font:600 14.5px var(--sans);color:var(--tx2);padding:10px 2px}
.v3-tlink.v3-acc{color:var(--acc);font-weight:700}
.v3[data-app="build"] .v3-tlink.v3-acc{color:var(--forest2)}

/* buttons */
.v3-btn{appearance:none;border:0;width:100%;height:56px;flex:none;border-radius:999px;font:700 17px/1 var(--sans);letter-spacing:-.01em;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;transition:transform .16s var(--spring),opacity .2s,background .2s}
.v3-btn:active{transform:scale(.97)}
.v3-btn:disabled{opacity:.35;cursor:default;transform:none}
.v3-btn svg{width:22px;height:22px;flex:none}
.v3-btn.v3-pri{background:var(--acc);color:var(--accOn)}
.v3-btn.v3-sec{background:var(--card2);color:var(--tx)}
.v3-btn.v3-dan{background:var(--danger);color:var(--dangerOn)}
.v3-btn.v3-ghost{background:none;color:var(--tx2);height:48px;font-weight:600;font-size:15.5px}
.v3-mt{margin-top:18px}
.v3-terms{margin:14px 0 0;text-align:center;font:500 12.5px/1.45 var(--sans);color:var(--tx3)}
.v3-terms a{color:var(--tx2);text-decoration:underline;text-underline-offset:2px}
.v3-bot{margin-top:auto;padding-top:18px;text-align:center;font:500 15px var(--sans);color:var(--tx2)}
.v3-bot button{border:0;background:none;cursor:pointer;font:700 15px var(--sans);color:var(--acc);padding:8px 2px}
.v3[data-app="build"] .v3-bot button{color:var(--forest2)}

/* orb */
.v3-orb{--s:44px;width:var(--s);height:var(--s);border-radius:50%;position:relative;display:inline-block;flex:none;
  background:radial-gradient(circle at 34% 28%,#1c6b51 0%,#0b3d2e 56%,#06281e 100%);
  box-shadow:inset 0 -3px 8px rgba(0,0,0,.25),inset 0 2px 3px rgba(255,255,255,.08),0 4px 14px rgba(11,61,46,.22)}
.v3-orb>i{position:absolute;left:50%;top:50%;width:calc(var(--s)*.3);height:calc(var(--s)*.3);margin:calc(var(--s)*-.15);border-radius:50%;background:#dcef4e;box-shadow:0 0 calc(var(--s)*.22) rgba(220,239,78,.55)}
.v3-orb.v3-breathe{animation:v3-breathe 4s ease-in-out infinite}
@keyframes v3-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.v3[data-app="owners"] .v3-orb{box-shadow:inset 0 -3px 8px rgba(0,0,0,.25),0 0 0 1px rgba(238,243,239,.12)}

/* code boxes */
.v3-otp{position:relative;display:block;cursor:text}
.v3-otp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;font-size:16px;z-index:2;cursor:text;caret-color:transparent;color:transparent;background:none}
.v3-cells{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.v3-cells b{height:60px;border-radius:14px;background:var(--field);display:grid;place-items:center;position:relative;font:700 26px var(--sans);font-variant-numeric:tabular-nums;color:var(--tx);transition:box-shadow .15s,background .15s}
.v3-otp.v3-focus .v3-cells b.v3-on{background:var(--fieldF);box-shadow:inset 0 0 0 1.5px var(--ring)}
.v3-otp.v3-focus .v3-cells b.v3-on::after{content:"";width:2px;height:24px;background:var(--ring);animation:v3-blink 1s steps(2) infinite}
.v3-otp.v3-ok .v3-cells b{box-shadow:inset 0 0 0 1.5px var(--ok);color:var(--ok)}
.v3-otp.v3-bad .v3-cells{animation:v3-shake .4s}
.v3-otp.v3-bad .v3-cells b{box-shadow:inset 0 0 0 1.5px var(--danger)}
@keyframes v3-blink{50%{opacity:0}}
@keyframes v3-shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.v3-rrow{display:flex;justify-content:space-between;align-items:center;margin-top:14px;min-height:40px}
.v3-timer{font:500 14.5px var(--sans);color:var(--tx3);font-variant-numeric:tabular-nums}
.v3-timer b{color:var(--tx2);font-weight:600}

/* invite code */
.v3-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.v3-groups b{height:60px;border-radius:14px;background:var(--field);display:grid;place-items:center;font:600 17px var(--mono);letter-spacing:.08em;color:var(--tx);position:relative}
.v3-groups b i{font-style:normal;color:var(--tx3)}
.v3-otp.v3-focus .v3-groups b.v3-on{background:var(--fieldF);box-shadow:inset 0 0 0 1.5px var(--ring)}
.v3-otp.v3-ok .v3-groups b{box-shadow:inset 0 0 0 1.5px var(--ok)}

/* camera */
.v3-cam{position:relative;overflow:hidden;border-radius:26px;aspect-ratio:1/1;width:100%;max-height:calc(var(--ph)*.42);margin:0 auto;
  background:radial-gradient(circle at 28% 18%,#4b5b52 0%,#26322c 38%,#0e1512 80%)}
.v3-cam .v3-brk{position:absolute;width:36px;height:36px;border:4px solid #dcef4e;transition:all .45s var(--spring)}
.v3-cam .v3-k1{left:14%;top:14%;border-right:0;border-bottom:0;border-radius:14px 0 0 0}
.v3-cam .v3-k2{right:14%;top:14%;border-left:0;border-bottom:0;border-radius:0 14px 0 0}
.v3-cam .v3-k3{left:14%;bottom:14%;border-right:0;border-top:0;border-radius:0 0 0 14px}
.v3-cam .v3-k4{right:14%;bottom:14%;border-left:0;border-top:0;border-radius:0 0 14px 0}
.v3-cam.v3-found .v3-k1{left:22%;top:22%}.v3-cam.v3-found .v3-k2{right:22%;top:22%}.v3-cam.v3-found .v3-k3{left:22%;bottom:22%}.v3-cam.v3-found .v3-k4{right:22%;bottom:22%}
.v3-cam .v3-las{position:absolute;left:18%;right:18%;top:50%;height:2px;background:#dcef4e;box-shadow:0 0 14px #dcef4e;animation:v3-sweep 2s ease-in-out infinite}
.v3-cam.v3-found .v3-las{opacity:0}
.v3-cam .v3-tick{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px;border-radius:50%;background:#dcef4e;color:#0b3d2e;display:grid;place-items:center;transform:scale(0);transition:transform .45s var(--spring) .1s;z-index:2}
.v3-cam .v3-tick svg{width:30px;height:30px}
.v3-cam.v3-found .v3-tick{transform:scale(1)}
@keyframes v3-sweep{0%,100%{transform:translateY(-80px)}50%{transform:translateY(80px)}}
.v3-camfoot{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:16px}

/* plain screens */
.v3-top{display:flex;align-items:center;gap:6px;height:52px;flex:none;padding:0 16px 0 8px}
.v3-ib{width:44px;height:44px;border-radius:50%;border:0;background:none;cursor:pointer;display:grid;place-items:center;color:var(--tx)}
.v3-ib svg{width:22px;height:22px}
.v3-top .v3-tt{font:700 17px var(--sans);letter-spacing:-.01em}
.v3-ptitle{margin:2px 20px 16px;font:800 30px/1.1 var(--sans);letter-spacing:-.03em}
.v3-scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;padding-bottom:20px}
.v3-scroll::-webkit-scrollbar{display:none}
.v3-grp{background:var(--card);border-radius:20px;margin:0 16px 14px;overflow:hidden;box-shadow:var(--cardsh);flex:none}
.v3-grp h4{margin:0;padding:14px 16px 4px;font:700 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--tx3)}
.v3-row{display:flex;align-items:center;gap:14px;min-height:56px;padding:10px 16px;border:0;border-top:1px solid var(--ln);background:none;width:100%;text-align:left;font:500 16px var(--sans);color:var(--tx);cursor:pointer}
.v3-grp>.v3-row:first-child,.v3-grp h4+.v3-row{border-top:0}
.v3-row>svg{width:22px;height:22px;flex:none;color:var(--tx2)}
.v3-row .v3-rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.v3-row .v3-rt small{font-size:13.5px;color:var(--tx3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v3-row .v3-chev{width:18px;height:18px;color:var(--tx3)}
.v3-row.v3-red{color:var(--danger);font-weight:600}
.v3-row.v3-red>svg{color:var(--danger)}
.v3-row.v3-static{cursor:default}
.v3-sw2{width:50px;height:30px;border-radius:999px;background:var(--ln2);position:relative;flex:none;transition:background .2s;border:0;cursor:pointer;padding:0}
.v3-sw2::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s var(--spring)}
.v3-sw2.v3-on{background:var(--ok)}
.v3[data-app="owners"] .v3-sw2.v3-on{background:#2e8b67}
.v3-sw2.v3-on::after{transform:translateX(20px)}

/* centred moments */
.v3-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 28px;gap:14px}
.v3-mid h2{margin:6px 0 0;font:800 28px/1.12 var(--sans);letter-spacing:-.03em}
.v3-mid p{margin:0;font-size:16px;line-height:1.45;color:var(--tx2)}
.v3-pillm{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--card2);font:600 15px var(--sans);color:var(--tx)}
.v3-pillm svg{width:18px;height:18px;color:var(--tx2)}
.v3-prog{width:120px;height:4px;border-radius:9px;background:var(--ln);overflow:hidden;margin-top:6px}
.v3-prog i{display:block;height:100%;width:100%;background:var(--acc);transform-origin:left;animation:v3-fillx 2.4s linear forwards}
.v3[data-app="build"] .v3-prog i{background:var(--forest2)}
@keyframes v3-fillx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.v3-bottoms{padding:0 24px 26px;display:flex;flex-direction:column;gap:8px;flex:none}
.v3-icosq{width:64px;height:64px;border-radius:20px;background:var(--card2);display:grid;place-items:center;color:var(--tx)}
.v3-icosq svg{width:32px;height:32px}
.v3-icosq.v3-warn{color:#b26b07}
.v3[data-app="owners"] .v3-icosq.v3-warn{color:#f0c060}
.v3-icosq.v3-ok{color:var(--ok)}
.v3-icosq.v3-red{color:var(--danger)}
.v3-ask{flex:1;display:flex;flex-direction:column;padding:28px 24px 0}
.v3-ask h2{margin:22px 0 0;font:800 28px/1.12 var(--sans);letter-spacing:-.03em}
.v3-ask p{margin:10px 0 0;font-size:16.5px;line-height:1.45;color:var(--tx2)}
.v3-bio-on{flex:1;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.v3-bio-on h2{margin:0;font:800 26px var(--sans);letter-spacing:-.03em}
.v3-scr.v3-done .v3-ask,.v3-scr.v3-done .v3-bottoms{display:none}
.v3-scr.v3-done .v3-bio-on{display:flex}
.v3-bigtick{width:76px;height:76px;border-radius:50%;background:var(--acc);color:var(--accOn);display:grid;place-items:center;animation:v3-pop .45s var(--spring) both}
.v3-bigtick svg{width:36px;height:36px}
@keyframes v3-pop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}

/* who card on welcome */
.v3-who{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--card2)}
.v3-av{width:44px;height:44px;border-radius:50%;background:var(--forest);color:#dcef4e;display:grid;place-items:center;font:800 15px var(--sans);flex:none;letter-spacing:.02em}
.v3[data-app="owners"] .v3-av{background:#dcef4e;color:#0b3d2e}
.v3-who .v3-rt{display:flex;flex-direction:column;gap:2px;min-width:0}
.v3-who b{font-size:16px}
.v3-who small{font-size:13.5px;color:var(--tx3);font-weight:500}

/* lists in delete */
.v3-lst{display:flex;flex-direction:column}
.v3-li{display:flex;gap:12px;align-items:center;padding:11px 16px;border-top:1px solid var(--ln);font:500 15.5px/1.35 var(--sans)}
.v3-grp h4+.v3-li{border-top:0}
.v3-li svg{width:20px;height:20px;flex:none;color:var(--tx2)}
.v3-li.v3-x svg{color:var(--danger)}
.v3-li .v3-fm{margin-left:auto}
.v3-warnchip{background:#fbf1df!important;color:#9a5f0c!important}
.v3[data-app="owners"] .v3-warnchip{background:rgba(242,180,92,.14)!important;color:#f0c060!important}
.v3-fm{font:700 12px var(--sans);padding:4px 8px;border-radius:999px;background:var(--card2);color:var(--tx2);white-space:nowrap}
.v3-grace{display:flex;gap:14px;align-items:center;padding:16px}
.v3-grace .v3-icosq{width:48px;height:48px;border-radius:14px}
.v3-grace .v3-icosq svg{width:24px;height:24px}
.v3-grace b{display:block;font-size:16px}
.v3-grace small{display:block;font-size:14px;color:var(--tx2);margin-top:2px}

/* segmented */
.v3-segp{display:grid;grid-template-columns:repeat(3,1fr);background:var(--card2);border-radius:14px;padding:4px;gap:4px;margin:0 20px}
.v3-segp button{border:0;background:none;height:40px;border-radius:10px;font:600 14.5px var(--sans);color:var(--tx2);cursor:pointer}
.v3-segp button.v3-on{background:var(--card);color:var(--tx);font-weight:700;box-shadow:var(--lift)}
.v3[data-app="owners"] .v3-segp button.v3-on{background:#25352e}
.v3-confbox{flex:1;display:flex;flex-direction:column;padding:20px 20px 0;min-height:0}

/* choice rows (transfer) */
.v3-pickl{display:flex;flex-direction:column;gap:8px;margin:0 16px}
.v3-pk{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;border:0;background:var(--card2);cursor:pointer;text-align:left;color:var(--tx);font:500 16px var(--sans);transition:box-shadow .2s,background .2s}
.v3[data-app="build"] .v3-pk{background:transparent;box-shadow:inset 0 0 0 1px var(--ln)}
.v3-pk .v3-rt{flex:1;display:flex;flex-direction:column;gap:2px}
.v3-pk small{color:var(--tx3);font-size:13.5px}
.v3-pk .v3-tk{width:22px;height:22px;color:var(--acc);opacity:0}
.v3[data-app="build"] .v3-pk .v3-tk{color:var(--forest)}
.v3-pk.v3-on{background:var(--card);box-shadow:var(--lift);font-weight:700}
.v3-pk.v3-on .v3-tk{opacity:1}
.v3-av.v3-sm{width:40px;height:40px;font-size:13px}
.v3-av.v3-alt{background:var(--card2);color:var(--tx)}

/* option cards (owner blocker) */
.v3-opt{display:flex;align-items:center;gap:14px;padding:16px;border-radius:20px;background:var(--card);box-shadow:var(--cardsh);border:0;width:100%;text-align:left;cursor:pointer;color:var(--tx)}
.v3-opt .v3-icosq{width:46px;height:46px;border-radius:14px}
.v3-opt .v3-icosq svg{width:22px;height:22px}
.v3-opt .v3-rt{flex:1;display:flex;flex-direction:column;gap:3px}
.v3-opt b{font-size:16.5px}
.v3-opt small{font-size:14px;color:var(--tx2)}
.v3-opt.v3-red b{color:var(--danger)}
.v3-opt .v3-chev{width:18px;height:18px;color:var(--tx3)}

/* home */
.v3-hhead{display:flex;align-items:center;gap:10px;padding:6px 16px 0 20px;height:56px;flex:none}
.v3-hhead .v3-wm{color:var(--tx2)}
.v3-hhead .v3-wm b{color:var(--tx)}
.v3-hhead .v3-av{margin-left:auto;width:40px;height:40px;font-size:13px;border:0;cursor:pointer}
.v3-hello{margin:18px 20px 18px;font:800 28px/1.1 var(--sans);letter-spacing:-.03em}
.v3-hello small{display:block;font:500 15px var(--sans);color:var(--tx2);margin-bottom:6px;letter-spacing:0}
.v3-hcard{margin:0 16px 12px;background:var(--card);border-radius:22px;padding:18px;box-shadow:var(--cardsh);flex:none}
.v3-hcard .v3-k{font:600 13px var(--sans);color:var(--tx2)}
.v3-hcard .v3-big{font:800 34px var(--sans);letter-spacing:-.03em;margin-top:6px}
.v3-hcard .v3-big small{font-size:15px;font-weight:600;color:var(--tx2);letter-spacing:0}
.v3-hrow{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--ln);font:500 15px var(--sans)}
.v3-hrow:first-of-type{margin-top:12px}
.v3-hrow .v3-d{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.v3-hrow .v3-d.v3-a{background:#e2a03a}
.v3-hrow span:last-child{margin-left:auto;font-weight:700}

/* pin */
.v3-pin{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--ph)*.05) 24px calc(var(--ph)*.03)}
.v3-pin .v3-pt{text-align:center}
.v3-pin h2{margin:0;font:800 25px/1.15 var(--sans);letter-spacing:-.03em}
.v3-pin .v3-pt p{margin:6px 0 0;font:500 15.5px var(--sans);color:var(--tx2)}
.v3-pin .v3-pm{font:500 13.5px var(--sans);color:var(--danger);height:18px;margin-top:10px;opacity:0;transition:opacity .2s}
.v3-pin.v3-wrong .v3-pm{opacity:1}
.v3-pdots{display:flex;justify-content:center;margin-top:18px}
.v3-pin.v3-wrong .v3-pdots{animation:v3-shake .4s}
.v3-kp{display:grid;grid-template-columns:repeat(3,var(--k));gap:var(--kg) var(--kgx);justify-content:center;margin-top:calc(var(--ph)*.05)}
.v3-kp button{width:var(--k);height:var(--k);border:0;cursor:pointer;display:grid;place-items:center;color:var(--tx);font:500 28px var(--sans);font-variant-numeric:tabular-nums;transition:background .12s,transform .12s;-webkit-tap-highlight-color:transparent;padding:0}
.v3-kp button:empty{visibility:hidden}
.v3-kp button svg{width:26px;height:26px}
.v3-plinks{display:flex;justify-content:center;gap:28px;margin-top:14px;min-height:40px}
.v3-plinks button{border:0;background:none;cursor:pointer;font:600 15px var(--sans);color:var(--tx2);padding:10px 4px}
.v3-plinks button.v3-acc{color:var(--acc)}
.v3[data-app="build"] .v3-plinks button.v3-acc{color:var(--forest2)}
.v3-pin.v3-good .v3-pdots i{transition:background .2s}

/* A: iOS style */
.v3-pin.v3-sA{--k:min(76px,calc(var(--ph)*.088));--kg:14px;--kgx:24px}
.v3-sA .v3-pdots{gap:20px}
.v3-sA .v3-pdots i{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 1.6px var(--tx);transition:background .12s,box-shadow .12s}
.v3-sA .v3-pdots i.v3-f{background:var(--tx)}
.v3-sA.v3-good .v3-pdots i{background:var(--ok);box-shadow:none}
.v3-sA .v3-kp button{border-radius:50%;background:var(--card2)}
.v3-sA .v3-kp button:active{background:var(--ln2)}
.v3-sA .v3-kp button.v3-del,.v3-sA .v3-kp button.v3-del:active{background:none}

/* compact pin inside delete confirm */
.v3-confbox .v3-pin{padding:4px 0 0;justify-content:flex-start}
.v3-confbox .v3-pin .v3-kp{margin-top:20px}
.v3-confbox .v3-pin.v3-sA{--k:min(66px,calc(var(--ph)*.078));--kg:10px}

/* overlays */
.v3-ovl{position:absolute;inset:0;z-index:40;background:rgba(5,10,8,.5);display:flex;align-items:flex-end;animation:v3-fade .2s ease both}
.v3-ovl.v3-out{animation:v3-outA .2s ease both}
@keyframes v3-fade{from{opacity:0}}
.v3-bs{width:100%;background:var(--sheet);border-radius:28px 28px 0 0;padding:12px 20px 26px;animation:v3-up .32s var(--ease) both}
.v3[data-app="owners"] .v3-bs{background:#16221d}
@keyframes v3-up{from{transform:translateY(100%)}}
.v3-grab{width:40px;height:5px;border-radius:9px;background:var(--ln2);margin:0 auto 16px}
.v3-bs h3{margin:0 0 14px;font:800 22px var(--sans);letter-spacing:-.02em}
.v3-bs .v3-row{border-radius:16px;background:var(--card2);border:0;margin-bottom:8px;text-decoration:none}
.v3[data-app="owners"] .v3-bs .v3-row{background:#1f2e28}
.v3-bs .v3-row svg{color:var(--acc)}
.v3[data-app="build"] .v3-bs .v3-row svg{color:var(--forest)}

/* toast */
.v3-toast{position:absolute;left:50%;top:54px;z-index:50;transform:translateX(-50%);display:flex;align-items:center;gap:9px;white-space:nowrap;
  padding:11px 16px 11px 12px;border-radius:999px;background:#101a15;color:#fff;font:600 14.5px var(--sans);box-shadow:0 10px 30px rgba(0,0,0,.25);animation:v3-toastIn .35s var(--spring) both}
.v3-toast svg{width:18px;height:18px;color:#dcef4e}
.v3[data-app="owners"] .v3-toast{background:#eef3ef;color:#0b1310}
.v3[data-app="owners"] .v3-toast svg{color:#1c6b51}
.v3-toast.v3-out{animation:v3-outA .25s ease both}
@keyframes v3-toastIn{from{opacity:0;transform:translate(-50%,-12px)}}


@media (max-height:700px){
.v3-hero{min-height:max(150px,calc(var(--ph)*.27));padding:54px 20px 46px}
.v3-hero.v3-sm{min-height:0;padding:94px 20px 42px}
.v3-htitle{font-size:27px;margin-top:10px}
.v3-hero.v3-sm .v3-htitle{font-size:24px}
.v3-sheet{padding:22px 20px 16px}
.v3-sbtn{height:50px}
.v3-or{margin:14px 0}
.v3-fields{gap:8px}
.v3-mt{margin-top:14px}
.v3-cells b{height:54px}
.v3-cam{width:78%}
.v3-ptitle{font-size:26px;margin-bottom:12px}
.v3-mid h2{font-size:25px}
.v3-bottoms{padding:0 20px 18px}
.v3-ask{padding-top:12px}
.v3-ask h2{font-size:25px;margin-top:16px}
.v3-pin h2{font-size:22px}
.v3-plinks{margin-top:8px}
.v3-pin.v3-sA{--kg:10px;--kgx:22px}
}

.v3 {
  --ph: 100vh;
  --sans: "Inter", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --spring: cubic-bezier(0.2, 1.15, 0.3, 1);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --forest: #0b3d2e;
  --forest2: #1c6b51;
  --lime: #dcef4e;
  --bg: #ffffff;
  --bg2: #f3f2ed;
  --sheet: #ffffff;
  --field: #f3f2ed;
  --fieldF: #ffffff;
  --card: #ffffff;
  --card2: #f1f0ea;
  --tx: #101a15;
  --tx2: #5a655f;
  --tx3: #848c86;
  --ln: rgba(16, 26, 21, 0.08);
  --ln2: rgba(16, 26, 21, 0.15);
  --acc: #0b3d2e;
  --accOn: #ffffff;
  --ring: #0b3d2e;
  --danger: #c2362b;
  --dangerOn: #ffffff;
  --ok: #1c6b51;
  --cardsh: 0 1px 2px rgba(16, 26, 21, 0.05), 0 6px 18px rgba(16, 26, 21, 0.07);
  --lift: 0 2px 6px rgba(16, 26, 21, 0.08), 0 10px 26px rgba(16, 26, 21, 0.12);
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  justify-content: center;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
@supports (height: 100dvh) {
  .v3 {
    --ph: 100dvh;
  }
}
.v3[data-app="owners"] {
  --bg: #070c0a;
  --bg2: #070c0a;
  --sheet: #111b17;
  --field: #1a2722;
  --fieldF: #1e2d27;
  --card: #111b17;
  --card2: #1a2722;
  --tx: #eef3ef;
  --tx2: #a3b0a9;
  --tx3: #7f8d86;
  --ln: rgba(238, 243, 239, 0.08);
  --ln2: rgba(238, 243, 239, 0.16);
  --acc: #dcef4e;
  --accOn: #0b3d2e;
  --ring: #dcef4e;
  --danger: #f08a80;
  --dangerOn: #2a0b08;
  --ok: #dcef4e;
  --cardsh: inset 0 0 0 1px rgba(238, 243, 239, 0.06);
  --lift: inset 0 0 0 1px rgba(238, 243, 239, 0.14), 0 10px 26px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}
.v3 *,
.v3 *::before,
.v3 *::after {
  box-sizing: border-box;
}
:where(.v3) button,
:where(.v3) input {
  font: inherit;
  color: inherit;
}
.v3 :focus-visible {
  outline: 2.5px solid var(--forest2);
  outline-offset: 2px;
}
.v3 .v3-fld input:focus-visible,
.v3 .v3-otp input:focus-visible {
  outline: none;
}
.v3-wrap {
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}
/* Shown over the app (Settings and the delete flows): the same skins, as a full screen layer. */
.v3.v3-layer {
  z-index: 80;
}

/* The status bar row of the mockup is the phone's own here: an empty row as tall as the mockup's, or the notch. */
.v3-sb {
  height: max(44px, env(safe-area-inset-top));
  padding: 0;
}
.v3-hero .v3-sb {
  height: max(44px, env(safe-area-inset-top));
}
.v3-bottoms,
.v3-sheet {
  padding-bottom: max(22px, env(safe-area-inset-bottom));
}

/* ── the band of the day (bands/index.ts): solid shapes cut like paper, one fine grain, no blur ── */
.v3-hero {
  background: var(--hb, #a8472a);
}
.v3[data-app="owners"] .v3-hero {
  background: var(--hbo, var(--hb, #9e4227));
}
.v3-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.34;
  mix-blend-mode: overlay;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='.33 .33 .33 0 -.05 .33 .33 .33 0 -.05 .33 .33 .33 0 -.05 0 0 0 0 1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.v3-hs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
}
.v3-hero .v3-hcon {
  z-index: 2;
}
.v3-hero .v3-wm {
  color: #fff;
}
.v3-credit {
  position: absolute;
  right: 12px;
  bottom: 36px;
  z-index: 2;
  font: 500 10.5px var(--sans);
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.01em;
  pointer-events: none;
}

/* the real camera fills the mockup's camera box */
.v3-cam video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v3-camoff {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  color: #fff;
  z-index: 1;
}
.v3-camoff b {
  font: 700 17px var(--sans);
}
.v3-camoff span {
  font: 500 14px/1.4 var(--sans);
  color: rgba(255, 255, 255, 0.75);
}
.v3-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.v3-btn .v3-spin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  border-right-color: transparent;
  animation: v3-spin 0.8s linear infinite;
}
@keyframes v3-spin {
  to {
    transform: rotate(360deg);
  }
}
.v3-note {
  margin: 10px 0 0;
  text-align: center;
  font: 600 13px var(--sans);
  color: var(--tx3);
}
.v3-demo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(4px, env(safe-area-inset-bottom));
  margin: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0.8;
}
.v3-msg.v3-calm {
  color: var(--tx2);
}
a.v3-row {
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .v3 *,
  .v3 *::before,
  .v3 *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Request access: the locked email, the +234 box, the title chip and the small tick ── */
.v3-fld.v3-lock input {
  color: var(--tx2);
  padding-right: 46px;
}
.v3-fld .v3-lk {
  position: absolute;
  right: 16px;
  top: 17px;
  width: 18px;
  height: 18px;
  color: var(--tx3);
  pointer-events: none;
}
.v3-fld.v3-pre input {
  padding-left: 62px;
}
.v3-fld.v3-pre label {
  top: 15px;
  font-size: 12px;
  font-weight: 600;
}
.v3-pfx {
  position: absolute;
  left: 16px;
  bottom: 6px;
  font: 500 16px var(--sans);
  color: var(--tx2);
  pointer-events: none;
  letter-spacing: -0.005em;
}
.v3-chip {
  position: relative;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 38px;
  border-radius: 999px;
  background: var(--field);
  transition: box-shadow 0.18s, background 0.18s;
}
.v3-chip:focus-within {
  background: var(--fieldF);
  box-shadow: inset 0 0 0 1.5px var(--ring);
}
.v3-chip.v3-err {
  box-shadow: inset 0 0 0 1.5px var(--danger);
}
.v3-chip select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  outline: none;
  background: none;
  height: 100%;
  padding: 0 32px 0 16px;
  border-radius: 999px;
  font: 600 15px var(--sans);
  color: var(--tx3);
  cursor: pointer;
}
.v3-chip.v3-has select {
  color: var(--tx);
}
.v3-chip select option {
  color: #111;
}
.v3-chip .v3-cv {
  position: absolute;
  right: 11px;
  width: 15px;
  height: 15px;
  transform: rotate(90deg);
  color: var(--tx2);
  pointer-events: none;
}
.v3-tick {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  margin: 12px 0 0;
  min-height: 36px;
  cursor: pointer;
  font: 500 14.5px var(--sans);
  color: var(--tx2);
}
.v3-tick input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.v3-tick i {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--field);
  box-shadow: inset 0 0 0 1.5px var(--ln2);
  color: transparent;
  transition: background 0.16s, color 0.16s;
}
.v3-tick i svg {
  width: 14px;
  height: 14px;
  stroke-width: 3;
}
.v3-tick.v3-on i {
  background: var(--acc);
  color: var(--accOn);
  box-shadow: none;
}
.v3-tick:has(input:focus-visible) i {
  outline: 2.5px solid var(--ring);
  outline-offset: 2px;
}
.v3[data-app="build"] .v3-tick.v3-on i {
  background: var(--forest2);
  color: #fff;
}
.v3-thanks small {
  display: block;
  font: 600 13px var(--sans);
  color: var(--tx3);
}

/* ── The phone field (Phone.tsx): flag, +code and chevron, a hairline, then the number on the same line ── */
.v3-fld.v3-ph {
  display: flex;
  align-items: stretch;
}
.v3-cc {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 12px 0 16px;
  border: 0;
  background: none;
  border-radius: 15px 0 0 15px;
  cursor: pointer;
  color: var(--tx);
  -webkit-tap-highlight-color: transparent;
}
.v3-cc:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}
.v3-ccn {
  font: 500 16px var(--sans);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}
.v3-ccv {
  width: 14px;
  height: 14px;
  color: var(--tx3);
  transform: rotate(90deg);
  stroke-width: 2.4;
}
.v3-phin {
  position: relative;
  flex: 1;
  min-width: 0;
}
.v3-phin::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 1px;
  height: 20px;
  background: var(--ln2);
}
.v3-fld .v3-phin input {
  padding-left: 14px;
  border-radius: 0 15px 15px 0;
  font-variant-numeric: tabular-nums;
}
.v3 .pi-flag {
  flex: none;
  display: block;
  width: 22px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--ln2);
}
.v3 .pi-flag-wait {
  display: grid;
  place-items: center;
  background: var(--card2);
  color: var(--tx3);
  font: 700 8px var(--sans);
  letter-spacing: 0.04em;
}

/* ── The country sheet ── */
.v3-fld.v3-ctys {
  margin-bottom: 10px;
}
.v3-fld.v3-ctys input::-webkit-search-cancel-button {
  display: none;
}
.v3-ctyl {
  max-height: min(52vh, 440px);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -8px 6px;
  padding: 0 8px;
}
.v3-ctyh {
  padding: 14px 4px 6px;
  font: 700 12px var(--sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx3);
}
.v3-cty {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--tx);
  font: 500 16px var(--sans);
}
.v3-cty:hover {
  background: var(--card2);
}
.v3-cty.v3-on {
  background: var(--card);
  box-shadow: var(--lift);
  font-weight: 700;
}
.v3-ctyn {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v3-ctyc {
  flex: none;
  color: var(--tx3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.v3-ctyk {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--acc);
  stroke-width: 2.6;
}
.v3[data-app="build"] .v3-ctyk {
  color: var(--forest2);
}
.v3-ctye {
  margin: 18px 4px;
  color: var(--tx2);
  font: 500 15px var(--sans);
}

/* ── The 3D art on the moments that matter (thank you, invited, already with us) ── */
.v3-art {
  display: block;
  width: 112px;
  height: 112px;
  margin: 0 auto 6px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* ── One clean line in every sign in and sign up field (founder, 19 Oct 2026) ──
   An icon for email and password, then the word as the placeholder; names are just the word. No floating title,
   no example text. The label stays for screen readers only. */
.v3-fld input {
  padding: 0 16px;
}
.v3-fld input::placeholder {
  color: var(--tx3);
  opacity: 1;
}
.v3-fld label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  top: auto;
  left: auto;
  transform: none;
}
.v3-fld.v3-ic input {
  padding-left: 48px;
}
.v3-fld .v3-fi {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  color: var(--tx3);
  pointer-events: none;
  z-index: 1;
}
.v3-fld:focus-within .v3-fi {
  color: var(--tx2);
}
.v3-fld .v3-phin input {
  padding-left: 14px;
}

/* The fixed email's "Change": quiet text at the end of the field, not an icon. */
.v3-fld .v3-edit {
  position: absolute;
  right: 6px;
  top: 6px;
  height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 11px;
  background: none;
  cursor: pointer;
  font: 600 14.5px var(--sans);
  color: var(--acc);
}
.v3[data-app="build"] .v3-fld .v3-edit {
  color: var(--forest2);
}
.v3-fld .v3-edit:focus-visible {
  outline: 2px solid var(--ring);
}
.v3-fld.v3-lock input {
  padding-right: 92px;
}