/* ---------- Tokens ---------- */
:root{
  --ink:#3a3340; --ink-2:#635a68; --ink-3:#978e9b;
  --bg:#FFFFFF; --card:#ffffff; --line:#eee5da;
  --primary:#a8678c; --primary-2:#84496b; --primary-soft:#f6e1ec;
  --accent:#e0a458; --accent-soft:#fbeed8;
  --ok:#4f9a76; --ok-soft:#e1f2e8; --warn:#c98a3c; --warn-soft:#fbefdc; --bad:#c9605f; --bad-soft:#f9e3e1;
  --radius:16px; --radius-s:10px;
  --shadow:0 10px 28px rgba(90,60,70,.08);
  --on-primary:#fff; --chip-bg:#f1eae2; --paper:#fffdf7; --warn-ink:#8a5a1c; --bad-ink:#8f3a39;
  --grad:linear-gradient(90deg,#a8678c,#e8a598);
  --font:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.45}
a{color:var(--primary)}
button{font-family:inherit}
h1,h2,h3{margin:0 0 6px;line-height:1.2}
h1{font-size:24px;font-weight:800} h2{font-size:18px;font-weight:700} h3{font-size:15px;font-weight:700}
p{margin:0 0 10px}
.muted{color:var(--ink-3);font-size:13px}
.small{font-size:12px}
.tiny{font-size:11px}

/* ---------- Desktop shell ---------- */
.desk{display:flex;gap:32px;justify-content:center;align-items:flex-start;padding:28px 20px;min-height:100vh}
.desk-side{width:280px;color:var(--ink-2);padding-top:8px}
.desk-side .muted{color:var(--ink-3)}
.desk-side .btn.ghost{color:var(--ink);border-color:#d9cdbf}
.brand{font-size:22px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px;margin-bottom:8px}
.brand small{font-size:11px;color:var(--ink-3);font-weight:500}
.brand-mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#e8a598,#a8678c);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.devnav{margin:16px 0;display:flex;flex-direction:column;gap:2px;max-height:70vh;overflow:auto}
.devnav h4{margin:12px 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}
.devnav a{color:var(--ink-2);text-decoration:none;font-size:13px;padding:4px 8px;border-radius:6px}
.devnav a:hover,.devnav a.active{background:#f3f1ee;color:var(--ink)}

/* ---------- Phone ---------- */
.phone{position:relative;width:390px;height:820px;background:var(--bg);border-radius:40px;border:8px solid #3a3340;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 80px rgba(90,60,70,.25)}
/* On a real phone (or narrow window) drop the mockup frame and fill the screen. Must come after .phone */
@media (max-width:820px){html,body{height:100%;overflow:hidden;overscroll-behavior:none;background:var(--bg)}.desk{padding:0;min-height:0;height:100vh;height:100dvh}.desk-side{display:none}.phone{width:100%;height:100vh;height:100dvh;border-radius:0;border:0;box-shadow:none}.phone-notch{display:none}}
.phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:120px;height:26px;background:#3a3340;border-radius:0 0 16px 16px;z-index:5}
.topbar{padding:38px 18px 10px;background:var(--bg);display:flex;align-items:center;gap:10px;min-height:86px}
.topbar .back{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:16px}
.topbar .title{font-weight:800;font-size:17px;flex:1}
.topbar .step{font-size:12px;color:var(--ink-3)}
.screen{flex:1;overflow-y:auto;padding:4px 18px 24px;scrollbar-width:thin}
.screen.no-tabs{padding-bottom:24px}
.tabbar{display:none;border-top:1px solid var(--line);background:var(--card);padding:8px 6px 18px;justify-content:space-around}
.tabbar.show{display:flex}
.tabbar a{text-decoration:none;color:var(--ink-3);font-size:11px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;padding:2px 6px}
.tabbar a .ic{font-size:20px}
.tabbar a.active{color:var(--primary)}
.tabbar .dot{position:absolute;top:0;right:2px;width:8px;height:8px;border-radius:50%;background:var(--bad)}

/* ---------- Components ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px}
.card.flat{box-shadow:none}
.card.soft{background:var(--primary-soft);border-color:transparent}
.card.warn{background:var(--warn-soft);border-color:transparent}
.card.ok{background:var(--ok-soft);border-color:transparent}
.card.bad{background:var(--bad-soft);border-color:transparent}
.card.tap{cursor:pointer;transition:transform .08s}
.card.tap:active{transform:scale(.99)}
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.row.top{align-items:flex-start}
.col{display:flex;flex-direction:column;gap:8px}
.stack>*+*{margin-top:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.spacer{flex:1}
.hr{height:1px;background:var(--line);margin:12px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px 16px;border-radius:12px;border:1px solid transparent;background:var(--primary);color:var(--on-primary);font-weight:700;font-size:15px;cursor:pointer;text-decoration:none;transition:filter .1s}
.btn:hover{filter:brightness(1.06)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.secondary{background:var(--primary-soft);color:var(--primary)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn.danger{background:var(--bad)}
.btn.ok{background:var(--ok)}
.btn.small{padding:8px 12px;font-size:13px;width:auto;border-radius:10px}
.btn.auto{width:auto}
.btn-row{display:flex;gap:8px;margin-top:8px}
.btn-row .btn{flex:1}
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;background:var(--primary-soft);color:var(--primary)}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.gold{background:var(--accent-soft);color:var(--warn-ink)}
.pill.grey{background:var(--chip-bg);color:var(--ink-2)}
.badge-verified{display:inline-flex;align-items:center;gap:4px;color:var(--ok);font-weight:700;font-size:12px}
.avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#f6c9c0,#c98aa8);display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:18px;flex-shrink:0;position:relative}
.avatar.lg{width:84px;height:84px;font-size:30px}
.avatar.sm{width:34px;height:34px;font-size:13px}
.avatar .ring{position:absolute;inset:-4px;border-radius:50%;border:3px solid var(--ring,#e0a458)}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--ink-2);margin-bottom:5px}
.field label .req{color:var(--bad)}
.input,select,textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;font:inherit;background:var(--card);color:var(--ink)}
.input:focus,select:focus,textarea:focus{outline:2px solid var(--primary-soft);border-color:var(--primary)}
textarea{min-height:80px;resize:vertical}
.hint{font-size:12px;color:var(--ink-3);margin-top:4px}
.choice{display:flex;align-items:center;gap:12px;padding:13px;border:1.5px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;margin-bottom:8px}
.choice.selected{border-color:var(--primary);background:var(--primary-soft)}
.choice .ic{font-size:22px;width:30px;text-align:center}
.choice .t{font-weight:700}
.choice .d{font-size:12px;color:var(--ink-3)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:7px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-size:13px;font-weight:600;cursor:pointer}
.chip.selected{border-color:var(--primary);background:var(--primary-soft);color:var(--primary)}
.progress{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin:6px 0 14px}
.progress>i{display:block;height:100%;background:var(--primary);border-radius:3px}
.otp{display:flex;gap:8px;justify-content:space-between}
.otp input{width:48px;height:56px;text-align:center;font-size:22px;font-weight:800;border:1.5px solid var(--line);border-radius:12px}
.hero{padding:40px 6px 20px;text-align:center}
.hero .logo{width:72px;height:72px;border-radius:22px;background:linear-gradient(135deg,#e8a598,#a8678c);margin:0 auto 18px;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:800;color:#fff}
.tagline{font-size:14px;color:var(--ink-2)}
.list-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);cursor:pointer}
.list-item:last-child{border-bottom:0}
.list-item .grow{flex:1;min-width:0}
.list-item .t{font-weight:700}
.list-item .d{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{color:var(--ink-3)}
.status-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;margin-bottom:8px}
.status-strip .chip{white-space:nowrap}
.kv{display:grid;grid-template-columns:120px 1fr;gap:6px 10px;font-size:13px}
.kv b{color:var(--ink-2);font-weight:600}
.notice{display:flex;gap:10px;padding:10px 12px;border-radius:12px;font-size:12px;align-items:flex-start}
.notice.lock{background:var(--ink);color:#f6ece6}
.notice.info{background:var(--primary-soft);color:var(--primary-2)}
.notice.warn{background:var(--warn-soft);color:var(--warn-ink)}
.notice.bad{background:var(--bad-soft);color:var(--bad-ink)}
.scan-box{aspect-ratio:1;border-radius:24px;background:radial-gradient(circle at 50% 40%,#6b5a66,#3a3340);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;margin:10px 0 14px;position:relative;overflow:hidden}
.scan-box .frame{width:60%;aspect-ratio:3/4;border:3px dashed rgba(255,255,255,.6);border-radius:50% 50% 45% 45%}
.scan-box .cap{position:absolute;bottom:14px;font-size:12px;color:#eadfe3}
.scan-box.rect .frame{aspect-ratio:1.6;border-radius:12px;width:75%}
.scan-line{position:absolute;left:10%;right:10%;height:2px;background:var(--accent);animation:scan 1.8s ease-in-out infinite}
@keyframes scan{0%{top:20%}50%{top:78%}100%{top:20%}}
.waveform{display:flex;gap:3px;align-items:center;height:40px}
.waveform i{width:4px;background:var(--accent);border-radius:2px;animation:wave 1s ease-in-out infinite}
@keyframes wave{0%,100%{height:8px}50%{height:36px}}
.feed-card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:12px;cursor:pointer}
.feed-card .photo{height:150px;background:linear-gradient(135deg,var(--c1,#f9d5cc),var(--c2,#c98aa8));position:relative}
.feed-card .photo .ring-tag{position:absolute;left:12px;top:12px;width:22px;height:22px;border-radius:50%;border:4px solid var(--ring,#e0a458);background:rgba(255,255,255,.7)}
.feed-card .photo .dist{position:absolute;right:12px;top:12px;background:rgba(0,0,0,.45);color:#fff;font-size:11px;padding:3px 8px;border-radius:999px}
.feed-card .body{padding:12px}
.chat{display:flex;flex-direction:column;gap:8px;padding-bottom:8px}
.bubble{max-width:80%;padding:10px 12px;border-radius:16px;font-size:14px;background:var(--card);border:1px solid var(--line);align-self:flex-start}
.bubble.me{background:var(--primary);color:var(--on-primary);border-color:transparent;align-self:flex-end}
.bubble.sys{align-self:center;background:var(--chip-bg);color:var(--ink-2);font-size:12px;border:0;max-width:92%;text-align:center}
.chat-input{display:flex;gap:8px;position:sticky;bottom:0;background:var(--bg);padding-top:8px}
.chat-input .input{flex:1}
.sig-pad{height:120px;border:1.5px dashed var(--line);border-radius:14px;background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-style:italic;font-size:22px;font-family:cursive}
.contract{background:var(--card)df7;border:1px solid #efe6c9;border-radius:14px;padding:14px;font-size:13px}
.contract h3{font-size:14px;margin-top:10px}
.contract ol{padding-left:18px;margin:6px 0}
.contract .clause{margin-bottom:6px}
.watermark{position:relative}
.watermark::after{content:'LIABLE • CONFIDENTIAL • 'attr(data-wm);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform:rotate(-24deg);color:color-mix(in srgb,var(--primary) 9%,transparent);font-weight:800;font-size:22px;pointer-events:none;text-align:center}
.tier{border:2px solid var(--line);border-radius:16px;padding:14px;background:var(--card);margin-bottom:10px;cursor:pointer}
.tier.selected{border-color:var(--primary)}
.tier .price{font-size:20px;font-weight:800}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center}
.stat b{display:block;font-size:20px}
.stat span{font-size:11px;color:var(--ink-3)}
.timeline{position:relative;padding-left:22px}
.timeline::before{content:'';position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline .tl{position:relative;padding-bottom:14px}
.timeline .tl::before{content:'';position:absolute;left:-19px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--line);border:2px solid #fff}
.timeline .tl.done::before{background:var(--ok)}
.timeline .tl.now::before{background:var(--primary);box-shadow:0 0 0 4px var(--primary-soft)}
/* top of the phone, under the status bar, so it never covers a screen's main button */
.toast{position:absolute;left:50%;top:50px;transform:translateX(-50%) translateY(-16px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:18px;font-size:13px;line-height:1.35;text-align:center;opacity:0;transition:all .25s;pointer-events:none;z-index:20;width:max-content;max-width:calc(100% - 36px);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.toast.show{opacity:1;transform:translateX(-50%)}
.sheet-backdrop{position:absolute;inset:0;background:rgba(58,51,64,.45);display:none;align-items:flex-end;z-index:30}
.sheet-backdrop.show{display:flex}
.sheet{background:var(--card);width:100%;border-radius:24px 24px 0 0;padding:18px 18px 28px;max-height:80%;overflow:auto}
.sheet .handle{width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 14px}
.toggle{width:44px;height:26px;border-radius:13px;background:var(--line);position:relative;cursor:pointer;flex-shrink:0}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--card);transition:left .15s}
.toggle.on{background:var(--ok)}
.toggle.on::after{left:21px}
.center{text-align:center}
.mt{margin-top:12px}.mb{margin-bottom:12px}
.emoji-big{font-size:52px;line-height:1;margin:12px 0}
.tree{display:flex;flex-direction:column;gap:8px}
.tree .node{padding:12px;border-radius:12px;background:var(--card);border:1.5px solid var(--line);cursor:pointer}
.tree .node.bad{border-color:transparent;background:var(--bad-soft)}
.tree .node .t{font-weight:700}
.tree .node .d{font-size:12px;color:var(--ink-3)}
.thumb{font-size:36px;padding:14px 22px;border:2px solid var(--line);border-radius:18px;background:var(--card);cursor:pointer}
.thumb.selected{border-color:var(--primary);background:var(--primary-soft)}
.lock-overlay{filter:blur(4px);pointer-events:none;user-select:none}

/* ---------- Refresh: matches the welcome slides (pills, soft cards, gradient accents) ---------- */
.phone{--radius:22px;--radius-s:14px;color:var(--ink)}
.phone.theme-life{--bg:#FFFFFF;--line:#f5dfda;--primary:#c9687a;--primary-2:#a04a5d;--primary-soft:#fadde1;--chip-bg:#f8e8e4;--grad:linear-gradient(90deg,#e8a598,#c9687a)}
.phone.theme-biz{--bg:#FFFFFF;--line:#e0e8d4;--primary:#5f8f6b;--primary-2:#43704f;--primary-soft:#dcebd6;--chip-bg:#e8eedd;--paper:#fbfdf6;--grad:linear-gradient(90deg,#b9d8a8,#5f8f6b)}
.phone h1,.phone h2{letter-spacing:-.02em;font-weight:800}
.phone h2{font-size:22px;line-height:1.15;margin-bottom:8px}
.topbar .title{font-size:20px;letter-spacing:-.02em}
.topbar .back{border:0;background:var(--card);color:var(--ink);box-shadow:var(--shadow);width:38px;height:38px}
.topbar .step{font-weight:700;padding:4px 10px;border-radius:999px;background:var(--primary-soft);color:var(--primary-2)}
.card{border-color:transparent;box-shadow:var(--shadow);padding:16px}
.card.soft,.card.warn,.card.ok,.card.bad{box-shadow:none}
.btn{border-radius:999px;padding:15px 18px;font-weight:800}
.btn.small{border-radius:999px}
.btn.ghost{border-color:var(--line);color:var(--ink);background:transparent}
.btn.danger,.btn.ok{color:#fff}
.pill{color:var(--primary-2);padding:4px 10px}
.input,select,textarea{border-radius:16px;padding:14px;background:var(--card);color:var(--ink)}
.choice{border-radius:20px;padding:15px;border-color:transparent;box-shadow:var(--shadow)}
.choice .ic{width:44px;height:44px;border-radius:50%;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;font-size:20px}
.choice.selected .ic{background:var(--primary)}
.chip{color:var(--ink);border-color:transparent;background:var(--card);box-shadow:var(--shadow)}
.chip.selected{background:var(--primary);color:var(--on-primary);border-color:transparent}
.progress{height:8px;border-radius:999px}
.progress>i{background:var(--grad);border-radius:999px}
.otp input{border-radius:18px;border-color:transparent;background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.avatar{background:linear-gradient(160deg,#f6c9c0,#c98aa8)}
.theme-biz .avatar{background:linear-gradient(160deg,#cfe6bf,#5f8f6b)}
.stat,.tier,.tree .node,.thumb{border-color:transparent;box-shadow:var(--shadow);border-radius:20px}
.tier.selected,.thumb.selected{border-color:var(--primary)}
.stat b{font-size:24px;letter-spacing:-.02em}
.notice{border-radius:16px;padding:12px 14px}
.scan-box{border-radius:32px}
.feed-card{border:0;border-radius:28px;box-shadow:var(--shadow)}
.feed-card .photo{height:190px;margin:8px 8px 0;border-radius:22px;background:linear-gradient(160deg,var(--c1,#f9d5cc),var(--c2,#c98aa8))}
.bubble{border-color:transparent;border-radius:20px 20px 20px 6px;box-shadow:var(--shadow)}
.bubble.me{border-radius:20px 20px 6px 20px}
.bubble.sys{box-shadow:none;border-radius:999px}
.sheet{border-radius:32px 32px 0 0;color:var(--ink)}
.sig-pad,.contract{border-radius:20px}
.toggle.on{background:var(--primary)}
.timeline .tl.now::before{background:var(--primary)}
.timeline .tl::before{border-color:var(--bg)}
/* floating tab bar */
.tabbar{border:0;background:var(--ink);margin:0 14px 14px;padding:8px;border-radius:999px;position:relative;z-index:4;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.tabbar a{color:#c9bfc9;flex:1;padding:6px 4px;border-radius:999px;font-size:10px}
.tabbar a .ic{font-size:18px}
.tabbar a.active{background:var(--primary);color:var(--on-primary)}
/* Welcome slides — full-bleed, one theme per track */
.phone.bare .topbar{display:none}
.phone.bare .screen{padding:0}
.welcome{--w-bg:#FFFFFF;--w-ink:#3a3340;--w-sub:#7a6f7d;--w-hi:linear-gradient(90deg,#e08a8f,#c9687a);--w-cta:#c9687a;--w-cta-ink:#fff;--w-chip:rgba(255,255,255,.75);
  min-height:100%;display:flex;flex-direction:column;position:relative;background:var(--w-bg);color:var(--w-ink);overflow:hidden}
.welcome.w-pal,.phone.w-app{--p-navy:#181F39;--p-mint:#ADD8CE;--p-coral:#FDA597;--p-butter:#FEDA90;
  --w-bg:#FFFFFF;--w-ink:var(--p-navy);--w-sub:#5b6175;--w-accent:var(--p-navy);--w-swash:var(--p-coral);--w-line:var(--p-coral);
  --w-cta:var(--p-navy);--w-cta-ink:#FFFFFF;--w-card:#FFFFFF;--w-veil:255 255 255;--w-chip:#f6f4f1}
:root[data-theme="dark"] .welcome.w-pal,:root[data-theme="dark"] .phone.w-app{--w-bg:#181F39;--w-ink:#FFFFFF;--w-sub:rgba(255,255,255,.72);--w-accent:var(--p-coral);--w-swash:var(--p-butter);
  --w-cta:var(--p-coral);--w-cta-ink:var(--p-navy);--w-card:#252D4D;--w-veil:24 31 57}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .welcome.w-pal,:root:not([data-theme="light"]) .phone.w-app{--w-bg:#181F39;--w-ink:#FFFFFF;--w-sub:rgba(255,255,255,.72);--w-accent:var(--p-coral);--w-swash:var(--p-butter);
  --w-cta:var(--p-coral);--w-cta-ink:var(--p-navy);--w-card:#252D4D;--w-veil:24 31 57}}
:root[data-theme="dark"] .welcome.w-pal{--w-blob:18%}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .welcome.w-pal{--w-blob:18%}}
.welcome.w-pal h1 em{background:none;color:var(--w-accent)}
.w-pal .w-shape i,.w-pal .w-stack i{background:var(--w-card)}
.w-pal .w-shape i .ci,.w-pal .w-stack i .ci{--b:var(--p-mint)!important}
:root:not([data-theme="dark"]) .w-pal .w-shape i .ci,:root:not([data-theme="dark"]) .w-pal .w-stack i .ci{--b:var(--p-navy)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .w-pal .w-shape i .ci,:root:not([data-theme="light"]) .w-pal .w-stack i .ci{--b:var(--p-mint)!important}}
.w-pal .w-spark .ci{--b:var(--w-ink)!important}
.w-pal .w-eyebrow i{background:var(--p-mint);animation-name:wlive-mint}
@keyframes wlive-mint{0%{box-shadow:0 0 0 0 rgba(173,216,206,.8)}70%,100%{box-shadow:0 0 0 7px rgba(173,216,206,0)}}
.w-pal .w-go{box-shadow:0 10px 22px color-mix(in srgb,var(--w-cta) 30%,transparent)}
.w-pal .w-th{border-color:var(--w-card)}
.w-pal .w-top{color:var(--w-ink)}
/* Welcome 1: people in mixed shapes, linked by dashed lines with the reasons they connect */
.w-pal .w-visual{height:400px;margin-top:58px}
/* White veil: sits behind the people (above the soft blobs and lines) so only the background fades into the text */
.w-veil{position:absolute;left:-40px;right:-40px;bottom:-30px;height:150px;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgb(var(--w-veil) / 0),rgb(var(--w-veil) / .85) 55%,rgb(var(--w-veil)))}
.w-stage{position:absolute;left:50%;top:0;width:375px;height:400px;translate:-50% 0}
.w-blob{position:absolute;border-radius:50%;z-index:0}
.w-blob.b1{left:250px;top:-30px;width:170px;height:170px;background:color-mix(in srgb,var(--p-coral) var(--w-blob,34%),var(--w-bg))}
.w-blob.b2{left:-70px;top:170px;width:160px;height:160px;background:color-mix(in srgb,var(--p-mint) calc(var(--w-blob,34%) + 8%),var(--w-bg))}
.w-blob.b3{left:214px;top:296px;width:96px;height:96px;border-radius:30px;rotate:18deg;background:color-mix(in srgb,var(--p-mint) calc(var(--w-blob,34%) + 4%),var(--w-bg))}
.w-blob.b4{left:118px;top:56px;width:46px;height:46px;background:color-mix(in srgb,var(--p-butter) 80%,var(--w-bg))}
.w-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.w-links path{fill:none;stroke:var(--w-line);stroke-width:2.2;stroke-dasharray:4 6;stroke-linecap:round;animation:wflow 14s linear infinite}
.w-shape{position:absolute;z-index:2;animation:wbob 7s ease-in-out infinite;animation-delay:var(--d)}
.w-clip{width:100%;height:100%;overflow:hidden;border:4px solid var(--w-card,#fff);box-shadow:0 14px 30px rgba(60,40,50,.16);border-radius:inherit;background:#f3ece8}
.w-clip img{width:100%;height:100%;object-fit:cover;display:block}
.s-circle{border-radius:50%}
.s-arch{border-radius:58px 58px 18px 18px}
.s-blob{border-radius:58% 42% 52% 48% / 46% 56% 44% 54%}
.s-squircle{border-radius:34px;rotate:10deg}
.s-leaf{border-radius:56px 10px 56px 10px}
.w-shape i{position:absolute;right:2px;top:6px;width:26px;height:26px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-style:normal;box-shadow:0 3px 10px rgba(0,0,0,.16)}
.s-squircle i{rotate:-10deg}
.s-leaf i{top:auto;right:-4px;bottom:10px}
.w-node{position:absolute;z-index:3;font-size:30px;translate:-50% -50%;animation:wpop .6s cubic-bezier(.3,1.6,.5,1) both;animation-delay:var(--d)}
.w-node .ci{display:block}
.w-spark{position:absolute;z-index:1;font-size:18px;opacity:.9}
.w-spark.k1{left:14px;top:176px}.w-spark.k2{left:340px;top:186px}
@keyframes wbob{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes wflow{to{stroke-dashoffset:-200}}
@keyframes wpop{from{scale:.3;opacity:0}to{scale:1;opacity:1}}
/* Welcome 1 bottom: live eyebrow, editorial headline with serif accent + hand-drawn swash, verified-faces strip */
.w-eyebrow{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--w-sub);margin-bottom:8px}
.w-eyebrow i{width:8px;height:8px;border-radius:50%;background:#3fae6a;animation:wlive 2s ease-out infinite}
@keyframes wlive{0%{box-shadow:0 0 0 0 rgba(63,174,106,.55)}70%,100%{box-shadow:0 0 0 7px rgba(63,174,106,0)}}
.w-pal h1{font-size:33px;line-height:1.08;letter-spacing:-.035em;margin:0 0 12px}
.w-serif{position:relative;display:inline-block;font-family:'Instrument Serif',Georgia,serif;font-style:italic!important;font-weight:400;font-size:1.3em;letter-spacing:-.01em;line-height:.9;padding:0 .06em .08em 0}
.w-swash{position:absolute;left:2%;bottom:-.1em;width:96%;height:.26em;overflow:visible}
.w-swash path{fill:none;stroke:var(--w-swash);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:wdraw 1s .5s ease-out forwards;vector-effect:non-scaling-stroke}
@keyframes wdraw{to{stroke-dashoffset:0}}
.w-pal .w-body > p{font-size:15px;margin:0 0 20px;max-width:30ch}
.w-proof{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.w-stack{display:flex;align-items:center;flex:none}
.w-stack{position:relative}
.w-stack i{position:absolute;right:-5px;bottom:-4px;width:17px;height:17px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-style:normal;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.w-proof b{display:block;font-size:13px;font-weight:700;color:var(--w-ink)}
.w-proof small{display:block;font-size:12px;color:var(--w-sub)}
@media (prefers-reduced-motion:reduce){.w-eyebrow i{animation:none}.w-swash path{animation:none;stroke-dashoffset:0}}
.w-pal .w-body{justify-content:flex-end}.w-pal .w-foot{margin-top:0;padding-top:0}.w-pal .w-foot .dots{margin:0}
.w-biz{--w-bg:#FFFFFF;--w-hi:linear-gradient(90deg,#7fb08a,#5f8f6b);--w-cta:#5f8f6b}
.w-both{--w-bg:#FFFFFF;--w-hi:linear-gradient(90deg,#c9687a,#5f8f6b);--w-cta:#a8678c}
.w-top{position:absolute;top:0;left:0;right:0;padding:40px 20px 0;display:flex;justify-content:space-between;align-items:center;z-index:2}
.w-body{flex:1;display:flex;flex-direction:column;padding:8px 24px 22px;position:relative;z-index:1}
.w-tag{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:var(--w-cta);color:var(--w-cta-ink);margin-bottom:10px}
.welcome h1{font-size:30px;line-height:1.12;letter-spacing:-.02em;margin:0 0 10px}
.welcome h1 em{font-style:normal;background:var(--w-hi);-webkit-background-clip:text;background-clip:text;color:transparent}
.welcome p{color:var(--w-sub);font-size:14px}
.w-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.w-chips span{font-size:12px;font-weight:600;padding:6px 10px;border-radius:999px;background:var(--w-chip);border:1px solid rgba(128,128,160,.18)}
.w-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:8px}
.w-cta{width:auto;flex:1;background:var(--w-cta);color:var(--w-cta-ink);border-radius:999px}
/* 3D avatars on palette circles with a soft light overlay */
.w-av{position:relative;width:36px;height:36px;border-radius:50%;margin-left:-10px;overflow:hidden;border:2.5px solid var(--w-bg);background:var(--av);box-shadow:0 3px 8px rgba(24,31,57,.14)}
.w-av:first-child{margin-left:0}
.w-av::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.6),rgba(255,255,255,0) 55%),linear-gradient(to bottom,rgba(255,255,255,0) 60%,rgba(24,31,57,.12))}
.w-av img{position:absolute;left:50%;top:4px;width:118%;translate:-50% 0;max-width:none}
.av-coral{--av:var(--p-coral,#FDA597)}.av-mint{--av:var(--p-mint,#ADD8CE)}.av-butter{--av:var(--p-butter,#FEDA90)}.av-sky{--av:#C9D3EE}
/* Welcome 2 (Business): mint-led accent + bento of trust proofs */
.welcome.w-pal.w-biz{--w-swash:var(--p-mint);--w-line:var(--p-mint)}
:root[data-theme="dark"] .welcome.w-pal.w-biz{--w-accent:var(--p-mint);--w-cta:var(--p-mint);--w-swash:var(--p-coral)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .welcome.w-pal.w-biz{--w-accent:var(--p-mint);--w-cta:var(--p-mint);--w-swash:var(--p-coral)}}
/* Welcome 2 v2: one hire, start to finish — hero in an arch, offer → contract → paid cards on a dashed path */
.w-jny .w-blob.j1{left:-60px;top:-20px;width:190px;height:190px;background:color-mix(in srgb,var(--p-mint) calc(var(--w-blob,34%) + 8%),var(--w-bg))}
.w-jny .w-blob.j2{left:286px;top:196px;width:120px;height:120px;border-radius:36px;rotate:16deg;background:color-mix(in srgb,var(--p-coral) var(--w-blob,34%),var(--w-bg))}
.w-jny .w-blob.j3{left:188px;top:18px;width:40px;height:40px;background:color-mix(in srgb,var(--p-butter) 80%,var(--w-bg))}
.jy-hero{position:absolute;left:104px;top:34px;width:176px;height:238px;z-index:2;border-radius:88px 88px 30px 30px;animation:wbob 7s ease-in-out infinite}
.jy-hero .w-clip img{object-position:50% 30%}
.jy-badge{position:absolute;left:50%;bottom:-14px;translate:-50% 0;white-space:nowrap;display:flex;align-items:center;gap:5px;padding:6px 12px 6px 7px;border-radius:99px;background:var(--w-card);color:var(--w-ink);font-size:11.5px;font-weight:800;box-shadow:0 6px 16px rgba(24,31,57,.18)}
.jy-badge i{font-style:normal;width:18px;height:18px;border-radius:50%;background:#ADD8CE;color:#181F39;font-size:10px;display:flex;align-items:center;justify-content:center}
.jy-card{position:absolute;z-index:3;border-radius:22px;padding:12px 14px;color:#181F39;box-shadow:0 12px 28px rgba(24,31,57,.14);animation:wtile .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s)}
@keyframes wtile{from{opacity:0;translate:0 14px;scale:.97}}
.jy-card small{display:block;font-size:11px;font-weight:700;opacity:.7}
.jy-n{position:absolute;top:-9px;left:-9px;width:24px;height:24px;border-radius:50%;background:#181F39;color:#fff;font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2.5px solid var(--w-bg)}
.jy-offer{left:216px;top:14px;width:136px;background:#ADD8CE;rotate:3deg}
.jy-offer b{display:block;font-size:24px;letter-spacing:-.03em;line-height:1.1;margin:2px 0 6px;white-space:nowrap}
.jy-offer b i{font-style:normal;font-size:11.5px;font-weight:700;opacity:.65;letter-spacing:0}
.jy-tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.6)}
.jy-sign{left:14px;top:178px;width:124px;background:#FEDA90;rotate:-4deg}
.jy-sign svg{display:block;width:100%;height:34px;margin:4px 0 2px;overflow:visible}
.jy-sign path{fill:none;stroke:#181F39;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:wdraw 1.4s .8s ease-in-out forwards}
.jy-sign line{stroke:rgba(24,31,57,.25);stroke-width:1.5;stroke-dasharray:3 4}
.jy-sign b{display:block;font-size:14px}.jy-sign em{display:block;font-style:normal;font-weight:600;font-size:11px;opacity:.7}
.jy-paid{left:142px;top:296px;width:206px;background:#FDA597;display:flex;align-items:center;gap:8px;padding:10px 10px 10px 12px}
.jy-paid .bt-pair{display:flex;flex:none}
.jy-paid .bt-pair img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2.5px solid #FDA597}
.jy-paid .bt-pair img+img{margin-left:-12px}
.jy-pt{flex:1;min-width:0}.jy-pt b{display:block;font-size:13.5px;white-space:nowrap}.jy-pt small{white-space:nowrap}
.jy-paid > .ci{flex:none;font-size:26px;animation:wpop .6s 1.1s cubic-bezier(.3,1.6,.5,1) both}
.w-jny .w-spark.k1{left:40px;top:120px}
@media (prefers-reduced-motion:reduce){.jy-card,.jy-hero,.jy-paid > .ci{animation:none}.jy-sign path{animation:none;stroke-dashoffset:0}}
/* Welcome 3 (Lifestyle + Business): butter-led; one portrait split coral / mint, scanned once */
.welcome.w-pal.w-both{--w-swash:var(--p-butter);--w-line:var(--p-butter)}
:root[data-theme="dark"] .welcome.w-pal.w-both{--w-accent:var(--p-butter);--w-cta:var(--p-butter);--w-swash:var(--p-mint)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .welcome.w-pal.w-both{--w-accent:var(--p-butter);--w-cta:var(--p-butter);--w-swash:var(--p-mint)}}
.w-pal.w-both .w-visual{height:346px}
.w-split{position:absolute;left:50%;top:16px;width:375px;height:330px;translate:-50% 0}
.sp-blob{position:absolute;border-radius:50%}
.sp-blob.sb1{left:64px;top:14px;width:250px;height:250px;background:color-mix(in srgb,var(--p-butter) var(--w-blob,55%),var(--w-bg))}
.sp-blob.sb2{left:18px;top:212px;width:64px;height:64px;background:color-mix(in srgb,var(--p-coral) var(--w-blob,40%),var(--w-bg))}
.sp-blob.sb3{left:300px;top:36px;width:44px;height:44px;border-radius:14px;rotate:16deg;background:color-mix(in srgb,var(--p-mint) var(--w-blob,50%),var(--w-bg))}
.sp-face{position:absolute;left:87px;top:40px;width:200px;height:200px;border-radius:50%;overflow:hidden;border:5px solid var(--w-card,#fff);box-shadow:0 18px 40px rgba(24,31,57,.18);z-index:1}
.sp-face img{width:100%;height:100%;object-fit:cover;display:block}
.sp-half{position:absolute;top:0;bottom:0;width:50%;mix-blend-mode:multiply}
.sp-l{left:0;background:#FDA597;opacity:.45}
.sp-r{right:0;mix-blend-mode:normal;-webkit-backdrop-filter:grayscale(1) contrast(1.08);backdrop-filter:grayscale(1) contrast(1.08);background:rgba(173,216,206,.42)}
.sp-seam{position:absolute;left:50%;top:0;bottom:0;width:0;border-left:2px dashed rgba(255,255,255,.9)}
.sp-scan{position:absolute;left:0;right:0;top:0;height:34px;background:linear-gradient(to bottom,rgba(254,218,144,0),rgba(254,218,144,.75));border-bottom:2.5px solid #FEDA90;animation:wscan 3.2s ease-in-out infinite}
@keyframes wscan{0%,100%{translate:0 -34px}50%{translate:0 200px}}
.sp-corner{position:absolute;width:26px;height:26px;border:3.5px solid var(--w-ink);z-index:2}
.sp-corner.c1{left:73px;top:26px;border-right:0;border-bottom:0;border-radius:12px 0 0 0}
.sp-corner.c2{left:275px;top:26px;border-left:0;border-bottom:0;border-radius:0 12px 0 0}
.sp-corner.c3{left:73px;top:228px;border-right:0;border-top:0;border-radius:0 0 0 12px}
.sp-corner.c4{left:275px;top:228px;border-left:0;border-top:0;border-radius:0 0 12px 0}
.sp-side{position:absolute;top:118px;z-index:3;display:flex;align-items:center;gap:7px;padding:6px 12px 6px 6px;border-radius:99px;background:var(--w-card,#fff);font-size:13px;color:var(--w-ink);box-shadow:0 8px 22px rgba(24,31,57,.14);animation:wpop .6s .3s cubic-bezier(.3,1.6,.5,1) both}
.sp-side .ci{font-size:26px}
.sp-life{left:10px}
.sp-biz{right:10px;padding:6px 6px 6px 12px;animation-delay:.45s}
.sp-once{position:absolute;left:50%;top:228px;translate:-50% 0;z-index:3;display:flex;align-items:center;gap:6px;padding:8px 14px 8px 10px;border-radius:99px;background:var(--p-navy);color:#fff;font-size:12.5px;font-weight:800;white-space:nowrap;box-shadow:0 10px 24px rgba(24,31,57,.28)}
.sp-once .ci{--b:var(--p-mint)!important}
.sp-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:5px;padding:5px 10px 5px 7px;border-radius:99px;background:var(--w-card,#fff);font-size:11.5px;font-weight:700;color:var(--w-ink);box-shadow:0 6px 16px rgba(24,31,57,.12)}
.sp-chip.k1{left:22px;top:14px}.sp-chip.k2{right:22px;top:276px}
:root[data-theme="dark"] .sp-once{background:var(--p-butter);color:var(--p-navy)}
:root[data-theme="dark"] .sp-once .ci{--b:var(--p-navy)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sp-once{background:var(--p-butter);color:var(--p-navy)}:root:not([data-theme="light"]) .sp-once .ci{--b:var(--p-navy)!important}}
@media (prefers-reduced-motion:reduce){.sp-scan,.sp-side{animation:none}}
/* dark: soft glows instead of flat blobs (flat pastel mixed into navy turns grey) */
:root[data-theme="dark"] .sp-blob.sb1{background:radial-gradient(circle,rgba(254,218,144,.3),rgba(254,218,144,0) 70%)}
:root[data-theme="dark"] .sp-blob.sb2{background:radial-gradient(circle,rgba(253,165,151,.35),rgba(253,165,151,0) 70%)}
:root[data-theme="dark"] .sp-blob.sb3{background:rgba(173,216,206,.22)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sp-blob.sb1{background:radial-gradient(circle,rgba(254,218,144,.3),rgba(254,218,144,0) 70%)}:root:not([data-theme="light"]) .sp-blob.sb2{background:radial-gradient(circle,rgba(253,165,151,.35),rgba(253,165,151,0) 70%)}:root:not([data-theme="light"]) .sp-blob.sb3{background:rgba(173,216,206,.22)}}
.w-pal .w-body > p.w-legal{max-width:none;margin:6px 0 0;color:var(--w-sub)}
.w-pal .w-login{color:var(--w-ink);margin-top:10px}
/* Welcome 3 · Alt A: Liable ID card (tilting, holographic) with Lifestyle / Business tabs behind */
.w-idc{position:absolute;left:50%;top:16px;width:375px;height:330px;translate:-50% 0;perspective:900px}
.idc-tab{position:absolute;top:34px;z-index:1;display:flex;align-items:center;gap:6px;padding:8px 14px 18px;border-radius:16px 16px 0 0;font-size:12.5px;font-weight:800;color:#181F39}
.idc-tab .ci{font-size:16px}
.t-life{left:62px;background:#FDA597;rotate:-7deg}
.t-biz{right:62px;background:#ADD8CE;rotate:7deg}
.idc-tilt{position:absolute;left:40px;top:66px;width:295px;height:186px;z-index:2;transform-style:preserve-3d;animation:wtilt 7s ease-in-out infinite}
@keyframes wtilt{0%,100%{transform:rotateX(6deg) rotateY(-10deg) rotateZ(-2deg)}50%{transform:rotateX(-4deg) rotateY(10deg) rotateZ(1deg)}}
.idc{position:relative;width:100%;height:100%;border-radius:24px;padding:16px 18px;box-sizing:border-box;background:#181F39;color:#fff;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 24px 50px rgba(24,31,57,.35)}
.idc::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:linear-gradient(120deg,#FDA597,#FEDA90,#ADD8CE,#FDA597);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8}
.idc::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 38%,rgba(253,165,151,.28) 45%,rgba(254,218,144,.3) 50%,rgba(173,216,206,.28) 55%,transparent 62%);animation:wholo 4.5s ease-in-out infinite;pointer-events:none}
@keyframes wholo{0%{translate:-45% 0}60%,100%{translate:45% 0}}
.idc-top{display:flex;align-items:center;gap:9px}
.idc-top b{font-size:11px;letter-spacing:.2em;opacity:.85;flex:1}
.idc-logo{width:26px;height:26px;border-radius:8px;background:#FEDA90;color:#181F39;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.idc-chip{width:34px;height:25px;border-radius:6px;background:linear-gradient(135deg,#FEDA90,#f3c267);box-shadow:inset 0 0 0 1px rgba(24,31,57,.25),inset 10px 0 0 -9px rgba(24,31,57,.35),inset -10px 0 0 -9px rgba(24,31,57,.35)}
.idc-mid{display:flex;align-items:center;gap:13px}
.idc-mid img{width:62px;height:62px;border-radius:16px;object-fit:cover;border:2px solid rgba(255,255,255,.9)}
.idc-mid b{display:block;font-size:18px;letter-spacing:-.01em}
.idc-ok{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#ADD8CE;margin:2px 0}
.idc-ok i{width:7px;height:7px;border-radius:50%;background:#ADD8CE}
.idc-mid small,.idc-bot small{font-size:11px;opacity:.6;letter-spacing:.05em}
.idc-bot{display:flex;align-items:flex-end;justify-content:space-between}
.idc-bot span{display:block;font-size:12.5px;font-weight:700}
.idc-qr{width:40px;height:40px;fill:#fff;opacity:.9;margin-right:40px}
.idc-stamp{position:absolute;right:-14px;bottom:-18px;width:66px;height:66px;border-radius:50%;background:#FEDA90;color:#181F39;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:15px;font-weight:800;line-height:1;rotate:-14deg;box-shadow:0 0 0 4px var(--w-bg),0 10px 22px rgba(24,31,57,.25);transform:translateZ(30px);animation:wstamp .5s 1s cubic-bezier(.3,1.6,.5,1) both}
.idc-stamp small{font-size:8.5px;letter-spacing:.12em;text-align:center;margin-top:2px}
.idc-stamp .ci{--b:#181F39!important}
@keyframes wstamp{from{scale:1.8;opacity:0}}
.idc-chips{position:absolute;left:0;right:0;top:286px;display:flex;justify-content:center;gap:8px}
.idc-chips .sp-chip{position:static}
:root[data-theme="dark"] .idc{background:#252D4D}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .idc{background:#252D4D}}
/* Welcome 3 · Alt B: the knob (you) slides between Lifestyle and Business; the scene above swaps with it */
.w-tog{position:absolute;left:50%;top:16px;width:375px;height:330px;translate:-50% 0;--tg:7s}
.tg-scene{position:absolute;left:37px;top:6px;width:300px;height:176px;border-radius:28px;overflow:hidden;box-shadow:0 18px 40px rgba(24,31,57,.16);z-index:1;background:#f3ece8}
.tg-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tg-scene img.tg-b{object-position:50% 12%}
.tg-cap{position:absolute;left:12px;bottom:12px;padding:6px 11px;border-radius:99px;background:#fff;color:#181F39;font-size:12px;font-weight:800;box-shadow:0 4px 12px rgba(24,31,57,.2)}
.tg-track{position:absolute;left:37px;top:200px;width:300px;height:92px;border-radius:46px;z-index:1;background:#FDA597;box-shadow:inset 0 3px 8px rgba(24,31,57,.12);animation:tg-track var(--tg) ease-in-out infinite}
.tg-lab{position:absolute;top:50%;translate:0 -50%;display:flex;align-items:center;gap:8px;font-size:17px;font-weight:800;color:#181F39}
.tg-lab .ci{font-size:34px}
.tg-track .tg-a{right:22px}.tg-track .tg-b{left:22px}
.tg-knob{position:absolute;left:6px;top:6px;width:80px;height:80px;border-radius:50%;animation:tg-knob var(--tg) cubic-bezier(.6,0,.3,1.25) infinite}
.tg-knob img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid #fff;box-sizing:border-box;box-shadow:0 8px 18px rgba(24,31,57,.28)}
.tg-knob i{position:absolute;right:-2px;bottom:0;width:24px;height:24px;border-radius:50%;background:#181F39;display:flex;align-items:center;justify-content:center;font-size:12px;font-style:normal;box-shadow:0 0 0 2.5px #fff}
.tg-knob i .ci{--b:#ADD8CE!important}
.tg-a{animation:tg-a var(--tg) ease-in-out infinite}
.tg-b{animation:tg-b var(--tg) ease-in-out infinite}
.tg-note{position:absolute!important;left:50%;top:304px;translate:-50% 0;white-space:nowrap}
.w-tog .sp-blob.sb2{left:4px;top:150px}.w-tog .sp-blob.sb3{left:326px;top:-4px}
@keyframes tg-knob{0%,40%,100%{translate:0 0}50%,90%{translate:208px 0}}
@keyframes tg-track{0%,40%,100%{background:#FDA597}50%,90%{background:#ADD8CE}}
@keyframes tg-a{0%,38%,100%{opacity:1}46%,92%{opacity:0}}
@keyframes tg-b{0%,38%,100%{opacity:0}46%,92%{opacity:1}}
@media (prefers-reduced-motion:reduce){.idc-tilt,.idc::after,.idc-stamp,.tg-track,.tg-knob,.tg-a,.tg-b{animation:none}.tg-b{opacity:0}}
/* Welcome 3 · Alt C: two overlapping worlds — coral leaf (Lifestyle) / mint squircle (Business); avatars pop out of the tops */
.w-pop{position:absolute;left:50%;top:6px;width:375px;height:346px;translate:-50% 0}
.pop-world{position:absolute;top:122px;width:156px;height:156px;animation:wpopshape .7s cubic-bezier(.2,.8,.2,1) both}
.pw-life{left:44px;background:var(--p-coral);border-radius:78px 18px 78px 18px}
.pw-life::after,.pw-biz::after{content:"";position:absolute;inset:-12px;border:1.5px dashed color-mix(in srgb,var(--w-ink) 18%,transparent);border-radius:inherit}
.pw-life::after{border-radius:90px 26px 90px 26px}.pw-biz::after{border-radius:46px}
.pw-biz{left:175px;background:var(--p-mint);border-radius:38px;mix-blend-mode:multiply}
:root[data-theme="dark"] .pw-biz{mix-blend-mode:normal;opacity:.92}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .pw-biz{mix-blend-mode:normal;opacity:.92}}
@keyframes wpopshape{from{opacity:0;scale:.85}}
/* Clip box: open at the top, bottom follows the circle (radius 88) so the avatar breaks out upward only */
.pop-cut{position:absolute;top:40px;width:156px;height:238px;overflow:hidden;z-index:2}
.pc-life{left:44px;border-radius:0 0 78px 18px}.pc-biz{left:175px;border-radius:0 0 38px 38px}.pc-life img{left:46%}.pc-biz img{left:54%}
.pop-cut img{position:absolute;left:50%;bottom:14px;width:178px;translate:-50% 0;max-width:none;filter:saturate(1.08) drop-shadow(0 12px 18px rgba(24,31,57,.22));animation:wrise .7s .2s cubic-bezier(.2,.8,.2,1) both}
.pc-biz img{animation-delay:.35s}
.pop-seal{position:absolute;left:187px;top:262px;translate:-50% -50%;z-index:3;width:46px;height:46px;border-radius:50%;background:var(--p-butter);border:4px solid var(--w-bg);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(24,31,57,.2);animation:wpop .6s .8s cubic-bezier(.3,1.6,.5,1) both}
.pop-seal i{font-style:normal;font-weight:800;font-size:18px;color:#181F39}
.pop-lab{position:absolute;top:300px;translate:-50% 0;z-index:3;padding:5px 12px;border-radius:99px;background:var(--w-card);color:var(--w-ink);font-size:12px;font-weight:800;box-shadow:0 6px 16px rgba(24,31,57,.12)}
.pl-life{left:122px}.pl-biz{left:253px}
.pop-ic{position:absolute;z-index:3;font-size:28px;line-height:0;translate:-50% -50%;animation:wpop .5s var(--i) cubic-bezier(.3,1.6,.5,1) both,wbob 6s var(--d) ease-in-out infinite}
.pop-ic .ci{display:block}
@media (prefers-reduced-motion:reduce){.pop-world,.pop-cut img,.pop-seal,.pop-ic{animation:none}}
/* Welcome footer: clickable mini previews of the three slides + Get started */
.w-thumbs{display:flex;align-items:flex-end;gap:8px}
.w-th{position:relative;width:26px;height:51px;border-radius:8px;overflow:hidden;opacity:.55;border:2px solid #fff;box-shadow:0 4px 10px rgba(60,40,50,.14);transition:width .3s cubic-bezier(.2,.8,.2,1),height .3s cubic-bezier(.2,.8,.2,1),opacity .3s,scale .3s,box-shadow .3s}
.w-th:hover{opacity:.85}
.w-th.on{width:32px;height:64px;opacity:1;box-shadow:0 0 0 2px var(--w-cta),0 8px 18px rgba(60,40,50,.2)}
/* Thumbnail = the whole slide, rendered at full size (374×804) and scaled to fit the thumb */
.w-mini{position:absolute;left:0;top:0;width:374px;height:804px;transform-origin:0 0;scale:.0588;pointer-events:none;transition:scale .3s cubic-bezier(.2,.8,.2,1)}
.w-th.on .w-mini{scale:.0749}
.w-mini .welcome{height:100%}
.w-go{display:flex;align-items:center;gap:10px;height:52px;padding:0 22px 0 26px;border-radius:99px;background:var(--w-cta);color:var(--w-cta-ink);font-size:15px;font-weight:800;text-decoration:none;box-shadow:0 10px 22px color-mix(in srgb,var(--w-cta) 38%,transparent);transition:transform .2s}
.w-go b{font-size:18px;transition:translate .2s}
.w-go:hover b{translate:3px 0}
.w-go:active{transform:scale(.96)}
/* Slide-in when moving between welcome slides */
.w-in-next .w-visual,.w-in-next .w-body>*:not(.w-foot){animation:wslide .45s cubic-bezier(.2,.8,.2,1) both}
.w-in-prev .w-visual,.w-in-prev .w-body>*:not(.w-foot){animation:wslide .45s cubic-bezier(.2,.8,.2,1) both;--from:-40px}
@keyframes wslide{from{opacity:0;translate:var(--from,40px) 0}}
@media (prefers-reduced-motion:reduce){.w-in-next *,.w-in-prev *{animation:none!important}}
/* Welcome 3 · Lifestyle · Business: [Get started ↗][Apple][Google], then "Already have an account? Sign in" */
.w-body:has(> .w-cta-row){padding-bottom:14px}.w-body:has(> .w-cta-row) .w-proof{margin-bottom:10px}
.w-cta-row{margin-top:6px;display:flex;gap:10px;align-items:stretch}
.w-cta-row .w-go{flex:1;justify-content:space-between;height:56px;padding:0 20px 0 24px;border-radius:18px}
.w-social{width:56px;height:56px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:18px;background:var(--w-chip);color:var(--w-ink);text-decoration:none;transition:transform .2s}
.w-social:active{transform:scale(.94)}
:root[data-theme="dark"] .w-social{background:rgba(255,255,255,.1)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .w-social{background:rgba(255,255,255,.1)}}
.welcome .w-body > p.w-signin{max-width:none;margin:12px 0 0;text-align:center;font-size:12.5px;color:var(--w-sub)}
.w-signin a,.w-signin span{font-weight:800;text-decoration:none;color:color-mix(in srgb,var(--p-coral) 65%,var(--p-navy))}
:root[data-theme="dark"] .w-signin a,:root[data-theme="dark"] .w-signin span{color:var(--p-coral)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .w-signin a,:root:not([data-theme="light"]) .w-signin span{color:var(--p-coral)}}
.w-go{white-space:nowrap}
/* Short phones (iPhone SE and similar): tighter type and spacing so the whole slide fits */
@media (max-height:640px){.welcome h1{font-size:26px;margin-bottom:6px}.welcome .w-body > p{font-size:13px}.w-body .w-proof{margin-bottom:12px}.w-body{padding-bottom:14px}.w-foot .w-go,.w-cta-row .w-go{height:48px}.w-cta-row .w-social{width:48px;height:48px}}
.w-login{display:block;text-align:center;margin-top:12px;font-size:13px;font-weight:700;color:inherit}
.w-legal{font-size:10.5px!important;text-align:center;margin:8px 0 0}
.w-visual{position:relative;height:400px;flex-shrink:0}
/* Business: stacked job cards */
/* Liable: both tracks orbit one identity */
/* Welcome header: the Liable Techy logo (img/brand), white-text version in dark mode */
.w-brand{display:inline-flex}.w-logo{height:24px;width:auto;display:block}.w-logo-dark{display:none}
:root[data-theme="dark"] :is(.w-pal,.w-app) .w-logo{display:none}:root[data-theme="dark"] :is(.w-pal,.w-app) .w-logo-dark{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.w-pal,.w-app) .w-logo{display:none}:root:not([data-theme="light"]) :is(.w-pal,.w-app) .w-logo-dark{display:block}}
.dots{display:flex;justify-content:center;gap:6px;margin:14px 0}
.dots a{width:8px;height:8px;border-radius:999px;background:rgba(128,128,160,.35)}
.dots a.on{width:22px;background:var(--w-cta,var(--primary))}
@media (prefers-reduced-motion:reduce){.w-shape,.w-node,.w-links path{animation:none}}

/* ---------- 3D clay icons (js/icons.js) ---------- */
.ci{width:1.2em;height:1.2em;vertical-align:-.26em;overflow:visible;flex:none}
.ci.ci-t{width:1.4em;height:1.4em;vertical-align:-.38em}
.ci .g{fill:var(--b);stroke:var(--b);stroke-width:1.5;stroke-linejoin:round}
.ci .s{fill:none;stroke:var(--b);stroke-linecap:round;stroke-linejoin:round}
.ci .c{fill:var(--a)}
.ci .cs{fill:none;stroke:var(--a);stroke-linecap:round;stroke-linejoin:round}
.emoji-big .ci{width:1.4em;height:1.4em}
.tabbar a .ic{font-size:22px;line-height:1}
.choice .ic{font-size:24px}
.list-item>span .ci{font-size:26px}
.btn .ci{font-size:.95em}
.choice.selected .ic{background:var(--card)}

/* ---------- Explore: interests + services ---------- */
.seg{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--chip-bg)}
.seg a{flex:1;text-align:center;padding:9px 8px;border-radius:999px;text-decoration:none;color:var(--ink-2);font-size:13px;font-weight:700}
.seg a.on{background:var(--card);color:var(--primary);box-shadow:var(--shadow)}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cat-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border-radius:18px;background:var(--card);box-shadow:var(--shadow);text-decoration:none;color:var(--ink);font-size:11px;font-weight:700;line-height:1.2;text-align:center}
.cat-tile .ic{font-size:26px;line-height:1}
.cat-tile small{font-size:10px;font-weight:600;color:var(--primary)}
.cat-tile.off{opacity:.6}
.cat-tile.off small{color:var(--ink-3)}
.code-sm{font-size:22px;font-weight:800;letter-spacing:.2em;color:var(--primary)}

/* ---------- UX layer: steppers, journey tracker, next-step guide ---------- */
.stepper-sub{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin:4px 0 14px}
.stepper-sub i{display:block;height:100%;background:var(--grad);transition:width .3s}

.journey{margin:0 -2px 12px;padding:10px 10px 8px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.j-track{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.j-track::-webkit-scrollbar{display:none}
.j{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:58px;flex:0 0 auto;opacity:.55}
.j i{width:30px;height:30px;border-radius:10px;background:var(--chip-bg);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:14px}
.j span{font-size:10px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.j.done{opacity:1} .j.done i{background:var(--ok-soft);color:var(--ok);font-weight:800}
.j.now{opacity:1} .j.now i{background:var(--primary);color:#fff;box-shadow:0 0 0 3px var(--primary-soft)} .j.now span{color:var(--primary)}
.j-next{display:flex;flex-direction:column;gap:2px;margin-top:8px;padding:10px 88px 10px 12px;border-radius:var(--radius-s);background:var(--primary-soft);text-decoration:none;color:var(--ink);position:relative}
.j-next b{font-size:13px;color:var(--primary-2)} .j-next span{font-size:12px;color:var(--ink-2)}
.j-next em{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-style:normal;font-size:11px;font-weight:800;color:var(--primary);background:var(--card);padding:4px 10px;border-radius:999px}
.j-next.wait{background:var(--chip-bg)} .j-next.wait b{color:var(--ink-2)}
.j-next+.j-next{margin-top:6px}

.next-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.next-card>b{display:block;margin-bottom:4px}
.checklist{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.checklist a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:13px;font-weight:600}
.checklist a i{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-style:normal;font-size:11px;flex:0 0 auto}
.checklist a.done{color:var(--ink-3);text-decoration:line-through} .checklist a.done i{background:var(--ok);border-color:var(--ok);color:#fff}
.checklist em{font-style:normal;font-size:10px;color:var(--ink-3);font-weight:500}
.mini-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mini-steps>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
.mini-steps i{font-style:normal;font-size:18px} .mini-steps b{font-size:11px} .mini-steps span{font-size:10px;color:var(--ink-3)}
.journey .j-next{padding-right:12px}
@keyframes wrise{from{opacity:0;translate:-50% 24px}}

/* ---------- Sage theme (all welcome slides): sage / forest / lime, from the yoga poster reference ---------- */
.welcome.w-pal.w-sage{--p-navy:#2F5527;--p-mint:#C8E5B0;--p-coral:#8DC03A;--p-butter:#E2F09A;
  --w-bg:#DCEDD0;--w-ink:#2F5527;--w-sub:#557a4c;--w-accent:#4E7F3A;--w-swash:#9CCB2E;--w-line:#7FAF4A;
  --w-cta:#2F5527;--w-cta-ink:#FFFFFF;--w-card:#FFFFFF;--w-veil:234 244 227;--w-chip:#EEF6E6;--w-blob:40%;
  background:linear-gradient(180deg,#B7DCA1 0%,#CFE7C0 45%,#EAF4E3 100%)}
:root[data-theme="dark"] .welcome.w-pal.w-sage{--w-bg:#1C2E1A;--w-ink:#EAF4E3;--w-sub:rgba(234,244,227,.72);--w-accent:#B6DD5A;--w-swash:#B6DD5A;
  --w-cta:#B6DD5A;--w-cta-ink:#1C2E1A;--w-card:#2A4226;--w-veil:22 36 20;--w-blob:22%;background:linear-gradient(180deg,#223A1F 0%,#1C2E1A 55%,#162414 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .welcome.w-pal.w-sage{--w-bg:#1C2E1A;--w-ink:#EAF4E3;--w-sub:rgba(234,244,227,.72);--w-accent:#B6DD5A;--w-swash:#B6DD5A;
  --w-cta:#B6DD5A;--w-cta-ink:#1C2E1A;--w-card:#2A4226;--w-veil:22 36 20;--w-blob:22%;background:linear-gradient(180deg,#223A1F 0%,#1C2E1A 55%,#162414 100%)}}
.w-swoosh{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.w-swoosh .sw1{fill:#FFFFFF;opacity:.7}
.w-swoosh .sw2{fill:#C5E3B2;opacity:.9}
:root[data-theme="dark"] .w-swoosh .sw1{fill:#2A4226;opacity:.6}:root[data-theme="dark"] .w-swoosh .sw2{fill:#223A1F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .w-swoosh .sw1{fill:#2A4226;opacity:.6}:root:not([data-theme="light"]) .w-swoosh .sw2{fill:#223A1F}}
.w-sage .w-visual,.w-sage .w-body{z-index:1}
.w-sage .w-clip{background:#E3F0DA;box-shadow:0 14px 30px rgba(47,85,39,.18)}
.w-sage .w-eyebrow i{background:#8DC03A;animation-name:wlive-lime}
@keyframes wlive-lime{0%{box-shadow:0 0 0 0 rgba(141,192,58,.8)}70%,100%{box-shadow:0 0 0 7px rgba(141,192,58,0)}}
.w-sage .w-av{border-color:#EAF4E3}
.w-sage .av-sky{--av:#D6ECC4}
.w-sage .w-th{border-color:#FFFFFF}
.w-sage .w-veil{display:none}
/* Sage: Welcome 2 (hire journey cards) */
.w-sage .jy-card{color:#2F5527;box-shadow:0 12px 28px rgba(47,85,39,.16)}
.w-sage .jy-n{background:#2F5527}
.w-sage .jy-offer{background:#CFE8BF}
.w-sage .jy-sign{background:#EEF6C4}
.w-sage .jy-sign path{stroke:#2F5527}
.w-sage .jy-sign line{stroke:rgba(47,85,39,.3)}
.w-sage .jy-paid{background:#C3E07A}
.w-sage .jy-paid .bt-pair img{border-color:#C3E07A}
.w-sage .jy-badge i{background:#C3E07A;color:#2F5527}
/* Sage: Welcome 3 (split portrait) */
.w-sage .sp-l{background:#9CCB2E;opacity:.4}
.w-sage .sp-r{background:rgba(200,229,176,.42)}
.w-sage .sp-scan{background:linear-gradient(to bottom,rgba(226,240,154,0),rgba(226,240,154,.75));border-bottom-color:#C3E07A}
.w-sage .sp-face,.w-sage .jy-hero .w-clip{box-shadow:0 18px 40px rgba(47,85,39,.2)}
:root[data-theme="dark"] .w-sage .sp-blob.sb1{background:radial-gradient(circle,rgba(182,221,90,.28),rgba(182,221,90,0) 70%)}
:root[data-theme="dark"] .w-sage .sp-blob.sb2{background:radial-gradient(circle,rgba(141,192,58,.32),rgba(141,192,58,0) 70%)}
:root[data-theme="dark"] .w-sage .sp-blob.sb3{background:rgba(200,229,176,.18)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .w-sage .sp-blob.sb1{background:radial-gradient(circle,rgba(182,221,90,.28),rgba(182,221,90,0) 70%)}:root:not([data-theme="light"]) .w-sage .sp-blob.sb2{background:radial-gradient(circle,rgba(141,192,58,.32),rgba(141,192,58,0) 70%)}:root:not([data-theme="light"]) .w-sage .sp-blob.sb3{background:rgba(200,229,176,.18)}}
/* Sage: slide thumbnails */

/* ---------- Welcome 3 · Alt D: glass phone (one person, both worlds) ---------- */
.w-glass{position:absolute;left:50%;top:0;width:375px;height:346px;translate:-50% 0;
  --gl-glass:255 255 255;--gl-edge:rgba(255,255,255,.9);--gl-life:#b8513f;--gl-biz:#2f7a67}
.gl-halo{position:absolute;left:52px;top:30px;width:270px;height:270px;border-radius:50%;background:color-mix(in srgb,var(--p-butter) var(--w-blob,60%),var(--w-bg))}
.w-glass .sp-blob.sb2{left:4px;top:150px}.w-glass .sp-blob.sb3{left:318px;top:284px}
.gl-back,.gl-front{position:absolute;left:92px;top:74px;width:190px;height:260px;border-radius:36px}
.gl-back{z-index:1;background:linear-gradient(170deg,var(--p-mint),color-mix(in srgb,var(--p-mint) 55%,var(--w-bg)));box-shadow:0 22px 44px rgba(24,31,57,.22)}
/* she stands in front of the glass; the bottom of the cutout fades out (no drop-shadow: filter + mask glitches in Chrome) */
.gl-person{position:absolute;left:99px;top:6px;width:176px;z-index:2;-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent);animation:wpop .7s cubic-bezier(.3,1.4,.5,1) both}
.gl-front{z-index:1;border:1.5px solid var(--gl-edge);background:linear-gradient(155deg,rgb(var(--gl-glass) / .42),rgb(var(--gl-glass) / .06) 45%,rgb(var(--gl-glass) / .18));box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -20px 40px rgb(var(--gl-glass) / .12)}
.gl-nav{position:absolute;z-index:3;left:102px;width:170px;box-sizing:border-box;top:274px;height:38px;border-radius:19px;display:flex;align-items:center;justify-content:space-around;padding:0 4px;
  background:rgb(var(--gl-glass) / .6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--gl-edge)}
.gl-nav i{font-style:normal;font-size:15px;display:flex}
.gl-nav b{overflow:hidden}.gl-nav b img{width:100%;height:100%;display:block}  /* Liable Techy mark fills the centre button */
.gl-nav b{width:30px;height:30px;border-radius:50%;background:var(--p-navy);color:#fff;font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px rgba(24,31,57,.3)}
.gl-seal{position:absolute;left:50%;top:320px;translate:-50% 0;z-index:5;display:flex;align-items:center;gap:6px;padding:7px 14px 7px 10px;border-radius:99px;background:var(--p-navy);color:#fff;font-size:12px;font-weight:800;white-space:nowrap;box-shadow:0 10px 24px rgba(24,31,57,.28)}
.gl-seal i{font-style:normal;display:flex}.gl-seal .ci{--b:var(--p-mint)!important}
.gl-card{position:absolute;z-index:4;width:max-content;box-sizing:border-box;display:flex;align-items:center;gap:7px;padding:7px 9px 7px 6px;border-radius:16px;
  background:color-mix(in srgb,var(--w-card,#fff) 74%,transparent);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid var(--gl-edge);box-shadow:0 10px 24px rgba(24,31,57,.14);color:var(--w-ink);animation:wtile .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
.gl-card>.ci{font-size:28px;flex:none}
.gl-card span{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.gl-card em{font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.gl-life em{color:var(--gl-life)}.gl-biz em{color:var(--gl-biz)}
.gl-card b{font-size:12px;white-space:nowrap}
.gl-card small{font-size:10px;color:var(--w-sub);white-space:nowrap}
.gl-life{rotate:-3deg}.gl-biz{rotate:3deg}
.gl-obj{position:absolute;z-index:1;font-size:38px;translate:-50% -50%;animation:wbob 6s ease-in-out infinite;animation-delay:var(--d)}
.gl-obj .ci{display:block}
:root[data-theme="dark"] .w-glass{--gl-glass:255 255 255;--gl-edge:rgba(255,255,255,.28);--gl-life:var(--p-coral);--gl-biz:var(--p-mint)}
:root[data-theme="dark"] .gl-back{background:linear-gradient(170deg,color-mix(in srgb,var(--p-mint) 34%,var(--w-bg)),color-mix(in srgb,var(--p-mint) 14%,var(--w-bg)))}
:root[data-theme="dark"] .gl-halo{background:radial-gradient(circle,rgba(254,218,144,.28),rgba(254,218,144,0) 70%)}
:root[data-theme="dark"] .gl-nav{background:rgba(24,31,57,.55)}
:root[data-theme="dark"] .gl-nav b,:root[data-theme="dark"] .gl-seal{background:var(--p-butter);color:var(--p-navy)}
:root[data-theme="dark"] .gl-seal .ci{--b:var(--p-navy)!important}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .w-glass{--gl-edge:rgba(255,255,255,.28);--gl-life:var(--p-coral);--gl-biz:var(--p-mint)}
  :root:not([data-theme="light"]) .gl-back{background:linear-gradient(170deg,color-mix(in srgb,var(--p-mint) 34%,var(--w-bg)),color-mix(in srgb,var(--p-mint) 14%,var(--w-bg)))}
  :root:not([data-theme="light"]) .gl-halo{background:radial-gradient(circle,rgba(254,218,144,.28),rgba(254,218,144,0) 70%)}
  :root:not([data-theme="light"]) .gl-nav{background:rgba(24,31,57,.55)}
  :root:not([data-theme="light"]) .gl-nav b,:root:not([data-theme="light"]) .gl-seal{background:var(--p-butter);color:var(--p-navy)}
  :root:not([data-theme="light"]) .gl-seal .ci{--b:var(--p-navy)!important}}
@media (prefers-reduced-motion:reduce){.gl-person,.gl-card,.gl-obj{animation:none}}
/* Sage: Welcome 3 Alt D (glass phone) */
.w-sage .w-glass{--gl-life:#5E8A1E;--gl-biz:#2F5527}
.w-sage .gl-back{box-shadow:0 22px 44px rgba(47,85,39,.22)}
.w-sage .gl-card{box-shadow:0 10px 24px rgba(47,85,39,.14)}
.w-sage .gl-nav b,.w-sage .gl-seal{box-shadow:0 8px 20px rgba(47,85,39,.3)}
:root[data-theme="dark"] .w-sage .w-glass{--gl-life:#B6DD5A;--gl-biz:#C8E5B0}
:root[data-theme="dark"] .w-sage .gl-nav{background:rgba(28,46,26,.6)}
:root[data-theme="dark"] .w-sage .gl-halo{background:radial-gradient(circle,rgba(182,221,90,.26),rgba(182,221,90,0) 70%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .w-sage .w-glass{--gl-life:#B6DD5A;--gl-biz:#C8E5B0}
  :root:not([data-theme="light"]) .w-sage .gl-nav{background:rgba(28,46,26,.6)}
  :root:not([data-theme="light"]) .w-sage .gl-halo{background:radial-gradient(circle,rgba(182,221,90,.26),rgba(182,221,90,0) 70%)}}

/* ---------- Welcome 2 · Alt: Path (top view: person in the centre, path and objects on the floor) ---------- */
.w-bpath{--bp-ribbon:color-mix(in srgb,var(--p-mint) 50%,var(--w-bg));--bp-grid:rgba(24,31,57,.05);--bp-shadow:rgba(24,31,57,.26)}
/* the floor: faint tile grid fading out from the centre */
.bp-floor{position:absolute;inset:-20px -40px 0;z-index:0;background-image:linear-gradient(var(--bp-grid) 1px,transparent 1px),linear-gradient(90deg,var(--bp-grid) 1px,transparent 1px);background-size:46px 46px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse at 50% 55%,#000 30%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 55%,#000 30%,transparent 72%)}
.bp-ribbon{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0}
.bp-ribbon path{fill:none;stroke:var(--bp-ribbon);stroke-width:84;stroke-linecap:round;animation:bp-in 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes bp-in{from{opacity:0}}
/* objects lie flat on the floor: light from the top left, shadow falls down-right */
.bp-obj{position:absolute;z-index:1;translate:-50% -50%;filter:drop-shadow(5px 7px 4px var(--bp-shadow));animation:bp-drop .5s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d)}
.bp-obj .ci{display:block}
@keyframes bp-drop{from{opacity:0;scale:1.25}}
.bp-person{position:absolute;left:118px;top:6px;width:139px;z-index:2;filter:drop-shadow(12px 16px 10px var(--bp-shadow));animation:bp-drop .6s .1s cubic-bezier(.3,1.3,.5,1) both}
.bp-note{position:absolute;right:14px;top:6px;z-index:3;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:25px;line-height:.95;text-align:right;color:var(--w-accent);rotate:-7deg}
.bp-note svg{display:block;width:100%;height:9px;margin-top:4px;overflow:visible}
.bp-note path{fill:none;stroke:var(--w-swash);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:wdraw 1s .9s ease-out forwards;vector-effect:non-scaling-stroke}
:root[data-theme="dark"] .w-bpath{--bp-ribbon:rgba(255,255,255,.07);--bp-grid:rgba(255,255,255,.05);--bp-shadow:rgba(0,0,0,.45)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .w-bpath{--bp-ribbon:rgba(255,255,255,.07);--bp-grid:rgba(255,255,255,.05);--bp-shadow:rgba(0,0,0,.45)}}
/* Sage: the painted path replaces the page swooshes */
.w-sage.w2-path .w-swoosh{display:none}
.w-sage .w-bpath{--bp-ribbon:#FFFFFF;--bp-grid:rgba(47,85,39,.07);--bp-shadow:rgba(47,85,39,.3)}
:root[data-theme="dark"] .w-sage .w-bpath{--bp-ribbon:rgba(234,244,227,.09);--bp-grid:rgba(234,244,227,.05);--bp-shadow:rgba(0,0,0,.45)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .w-sage .w-bpath{--bp-ribbon:rgba(234,244,227,.09);--bp-grid:rgba(234,244,227,.05);--bp-shadow:rgba(0,0,0,.45)}}
@media (prefers-reduced-motion:reduce){.bp-person,.bp-ribbon path,.bp-obj{animation:none}.bp-note path{animation:none;stroke-dashoffset:0}}

/* ---------- Sign in (js/signin.js): same palette, logo and type as the welcome slides ---------- */
.w-auth .w-top{justify-content:flex-start;gap:12px}
.au-back{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:22px;line-height:1;text-decoration:none;color:var(--w-ink);background:color-mix(in srgb,var(--w-ink) 7%,transparent)}
.au-body{flex:1;display:flex;flex-direction:column;padding:104px 24px 22px;position:relative;z-index:1}
.w-auth h1{font-size:32px}
.au-sub{margin:0 0 22px;color:var(--w-sub);font-size:14.5px;line-height:1.45}
.au-sub a,.au-links a,.au-proto a,.au-resend a{color:var(--w-ink);font-weight:800}
.au-label{display:block;font-size:12.5px;font-weight:800;margin:0 0 6px;color:var(--w-ink)}
.au-input{display:flex;align-items:center;height:56px;border-radius:18px;padding:0 16px;margin-bottom:14px;background:color-mix(in srgb,var(--w-ink) 6%,transparent);border:1.5px solid transparent;transition:border-color .2s}
/* Focused fields: a softer half-strength ink border (still over 3:1 against the page, so it stays visible) */
.au-input:focus-within{border-color:color-mix(in srgb,var(--w-ink) 50%,transparent)}
.au-input input{flex:1;min-width:0;height:100%;border:0;background:none;outline:0;font:inherit;font-size:16px;font-weight:600;color:var(--w-ink)}
.au-input input::placeholder{color:var(--w-sub);opacity:.7;font-weight:500}
.au-cc{font-weight:800;padding-right:12px;margin-right:12px;border-right:1.5px solid color-mix(in srgb,var(--w-ink) 15%,transparent)}
button.w-go{border:0;font-family:inherit;cursor:pointer}
.au-primary{width:100%;justify-content:space-between;height:56px;border-radius:18px;margin-top:4px}
.au-links{display:flex;justify-content:space-between;gap:12px;margin-top:14px;font-size:13px}
.au-links a{font-weight:700;color:var(--w-sub);text-decoration:underline;text-underline-offset:3px}
.au-or{display:flex;align-items:center;gap:12px;margin:22px 0 14px;color:var(--w-sub);font-size:12.5px}
.au-or::before,.au-or::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--w-ink) 14%,transparent)}
.au-social{display:flex;gap:10px}
.au-soc{flex:1;height:52px;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:800;font-size:14.5px;text-decoration:none;color:var(--w-ink);background:color-mix(in srgb,var(--w-ink) 6%,transparent)}
.au-foot{margin-top:auto!important;padding-top:18px}
.au-otp{display:flex;gap:8px;margin:4px 0 12px}
.au-otp input{flex:1;min-width:0;height:58px;text-align:center;font:inherit;font-size:22px;font-weight:800;color:var(--w-ink);border-radius:16px;border:1.5px solid transparent;background:color-mix(in srgb,var(--w-ink) 6%,transparent);outline:0}
.au-otp input:focus{border-color:color-mix(in srgb,var(--w-ink) 50%,transparent)}
.au-resend{font-size:13px;color:var(--w-sub);margin:0 0 14px}
.au-proto{margin-top:18px;padding:12px 14px;border-radius:14px;border:1.5px dashed color-mix(in srgb,var(--w-ink) 22%,transparent);font-size:12.5px;color:var(--w-sub);line-height:1.5}
.au-proto b{color:var(--w-ink)}
.au-dev{margin:12px 0 0;text-align:center;font-size:13px;color:var(--w-sub)}
.au-dev b{margin:0 6px;padding:3px 10px;border-radius:999px;border:1.5px dashed color-mix(in srgb,var(--w-ink) 22%,transparent);color:var(--w-ink);font-weight:600;letter-spacing:.18em;font-variant-numeric:tabular-nums}
.au-dev a{color:var(--w-ink);font-weight:600}
.au-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.au-chips button{font:inherit;font-size:12px;font-weight:700;padding:6px 10px;border-radius:99px;border:1.5px solid color-mix(in srgb,var(--w-ink) 15%,transparent);background:none;color:var(--w-ink);cursor:pointer}
.au-chips button.on{background:var(--w-cta);border-color:var(--w-cta);color:var(--w-cta-ink)}
.au-note{font-size:12.5px;color:var(--w-sub);line-height:1.5;margin:0 0 14px}
.au-scan{width:min(100%,260px);margin:0 auto 16px}
.au-state{display:flex;justify-content:center;margin:0 0 14px}.au-state .ci{width:84px;height:84px}
.au-state.au-left{justify-content:flex-start}.au-state.au-left svg{width:44px;height:44px;color:var(--w-ink)}
.au-centered .au-body{text-align:center}
.au-centered .au-body > *:first-child{margin-top:auto}
.au-centered .au-body > .au-text:last-child{margin-bottom:auto}
.au-centered .au-sub{margin-left:auto;margin-right:auto;max-width:300px}
.au-text{display:block;width:100%;margin-top:12px;padding:10px;border:0;background:none;font:inherit;font-size:14px;font-weight:800;color:var(--w-ink);text-align:center;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.au-card{text-align:left;padding:14px 16px;border-radius:18px;margin-bottom:16px;background:color-mix(in srgb,var(--w-ink) 5%,transparent);font-size:13px}
.au-card .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px}.au-card .kv span{color:var(--w-sub)}
.au-steps{list-style:none;display:flex;gap:6px;padding:0;margin:0 0 20px;counter-reset:s}
.au-steps li{flex:1;counter-increment:s;font-size:11.5px;font-weight:700;color:var(--w-sub);padding-top:8px;border-top:3px solid color-mix(in srgb,var(--w-ink) 12%,transparent)}
.au-steps li::before{content:counter(s)" · "}
.au-steps li.on{color:var(--w-ink);border-color:var(--w-ink)}.au-steps li.done{border-color:color-mix(in srgb,var(--w-ink) 45%,transparent)}
@media (max-height:640px){.au-body{padding-top:88px}.w-auth h1{font-size:28px}.au-sub{margin-bottom:16px}.au-or{margin:16px 0 10px}}
.au-primary + .au-note{margin-top:14px}
/* Sign up (same frame as sign in) */
.au-onb{margin-bottom:18px}.au-onb li::before{content:none}
.au-signup .au-body{padding-top:96px}
button.au-soc{border:0;font-family:inherit;cursor:pointer}
.au-label small{font-weight:600;color:var(--w-sub)}
.au-add{align-self:flex-start;margin:-4px 0 14px;padding:4px 0;border:0;background:none;font:inherit;font-size:13px;font-weight:800;color:var(--w-ink);cursor:pointer}
.au-legal{font-size:11.5px;color:var(--w-sub);line-height:1.5;margin:10px 0 0;text-align:center}
.au-legal a{color:var(--w-ink);font-weight:700}
.au-signup .au-or{margin:16px 0 12px}
.au-signup .au-legal{text-align:center;margin-top:14px}.au-legal a{white-space:nowrap}
@media (max-height:700px){.au-signup .au-body{padding-top:84px}.au-signup h1{font-size:28px;margin-bottom:6px}.au-signup .au-sub{margin-bottom:14px}.au-signup .au-input{height:50px;margin-bottom:10px}.au-signup .au-primary{height:52px}.au-signup .au-soc{height:46px}}
@media (max-height:700px){.au-signup .au-sub{display:none}.au-signup .au-onb{margin-bottom:12px}.au-signup h1{font-size:27px}.au-signup .au-legal{margin-top:8px}.au-signup .au-foot{padding-top:12px}}
/* Set-up flow (track, consent, KYC, profiles, plan) in the sign-in frame. The app's tokens are remapped to the
   welcome palette here, so the existing choices, chips, cards and fields pick up its colours, light and dark. */
.w-auth,.phone.w-app{--ink:var(--w-ink);--ink-2:var(--w-ink);--ink-3:var(--w-sub);--bg:var(--w-bg);
  --card:color-mix(in srgb,var(--w-ink) 5%,var(--w-bg));--line:color-mix(in srgb,var(--w-ink) 13%,var(--w-bg));
  --primary:var(--w-cta);--primary-2:var(--w-ink);--primary-soft:color-mix(in srgb,var(--w-ink) 9%,var(--w-bg));--on-primary:var(--w-cta-ink);
  --chip-bg:var(--card);--shadow:none;--grad:var(--w-ink);--accent:var(--p-butter);
  --ok-soft:color-mix(in srgb,var(--ok) 16%,var(--w-bg));--warn-soft:color-mix(in srgb,var(--warn) 18%,var(--w-bg));--bad-soft:color-mix(in srgb,var(--bad) 16%,var(--w-bg));
  --warn-ink:var(--w-ink);--bad-ink:var(--w-ink);--accent-soft:var(--warn-soft)}
.au-onb li.on{background:linear-gradient(var(--w-ink),var(--w-ink)) 0 -3px/var(--p,100%) 3px no-repeat;border-top-color:color-mix(in srgb,var(--w-ink) 12%,transparent)}
.au-onb li.done{color:var(--w-ink)}
.au-flow .au-body{padding-top:96px}
.au-flow.au-notop .au-body{padding-top:48px}
.au-flow h1{font-size:30px}
.au-flow h1 + p.muted,.au-flow .center h1 + p.muted{font-size:14.5px;line-height:1.45;color:var(--w-sub);margin:0 0 20px}
:is(.au-flow,.w-app) .muted{color:var(--w-sub)}
:is(.au-flow,.w-app) .btn{height:56px;padding:0 22px;border-radius:18px;font-size:15px;font-weight:800;border:0;justify-content:space-between;text-decoration:none}
:is(.au-flow,.w-app) .btn:not(.ghost):not(.small):not(.ok):not(.danger){background:var(--w-cta);color:var(--w-cta-ink);box-shadow:0 10px 22px color-mix(in srgb,var(--w-cta) 30%,transparent)}
:is(.au-flow,.w-app) .btn:not(.ghost):not(.small):not(.ok):not(.danger)::after{content:"↗";font-size:18px}
:is(.au-flow,.w-app) .btn.ghost{background:var(--card);color:var(--w-ink);justify-content:center}
:is(.au-flow,.w-app) .btn.ok,:is(.au-flow,.w-app) .btn.danger{justify-content:center}
:is(.au-flow,.w-app) .btn:disabled{opacity:.35;box-shadow:none}
:is(.au-flow,.w-app) .btn.small{height:auto;padding:9px 14px;border-radius:12px;font-size:13px}
:is(.au-flow,.w-app) .field label{font-size:12.5px;font-weight:800;color:var(--w-ink)}
:is(.au-flow,.w-app) .input,:is(.au-flow,.w-app) textarea{border:1.5px solid transparent;border-radius:18px;background:var(--card);font-size:16px;padding:15px 16px;color:var(--w-ink)}
:is(.au-flow,.w-app) .input:focus,:is(.au-flow,.w-app) textarea:focus{outline:0;border-color:color-mix(in srgb,var(--w-ink) 50%,transparent)}
:is(.au-flow,.w-app) .input::placeholder,:is(.au-flow,.w-app) textarea::placeholder{color:var(--w-sub);opacity:.75}
:is(.au-flow,.w-app) .choice{border:1.5px solid transparent;border-radius:20px;background:var(--card);padding:14px}
:is(.au-flow,.w-app) .choice.selected{border-color:var(--w-ink);background:var(--primary-soft)}
:is(.au-flow,.w-app) .choice .ic{background:var(--w-bg)}
:is(.au-flow,.w-app) .choice .d{color:var(--w-sub)}
:is(.au-flow,.w-app) .chip{box-shadow:none;background:var(--card);color:var(--w-ink)}
:is(.au-flow,.w-app) .chip.selected{background:var(--w-cta);color:var(--w-cta-ink)}
:is(.au-flow,.w-app) .card,:is(.au-flow,.w-app) .tier{border:1.5px solid transparent;border-radius:20px;background:var(--card);box-shadow:none}
:is(.au-flow,.w-app) .tier.selected{border-color:var(--w-ink)}
:is(.au-flow,.w-app) .notice{border-radius:16px}
:is(.au-flow,.w-app) .notice.info{background:var(--primary-soft);color:var(--w-ink)}
:is(.au-flow,.w-app) .notice.lock{background:var(--ok-soft);color:color-mix(in srgb,var(--ok) 70%,var(--w-ink))}
:is(.au-flow,.w-app) .toggle::after{background:var(--w-bg)}
:is(.au-flow,.w-app) .timeline .tl::before{border-color:var(--w-bg)}
:is(.au-flow,.w-app) .scan-box{width:100%;max-width:280px;margin-left:auto;margin-right:auto}
.au-flow .emoji-big{margin-top:0}
@media (max-height:700px){.au-flow .au-body{padding-top:84px}.au-flow h1{font-size:27px}}
button.au-back{border:0;padding:0;font-family:inherit;cursor:pointer}
.au-plans .au-body{padding-top:108px}
@media (max-height:700px){.au-plans .au-body{padding-top:92px}}

/* ---------- Welcome 3 v2: WhatsApp-style doodle wallpaper (single tone, faint) behind the logo ---------- */
.w-iwall{position:absolute;left:50%;top:0;width:375px;height:100%;translate:-50% 0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:.16;filter:grayscale(1) brightness(.6);
  -webkit-mask-image:linear-gradient(to bottom,#000 60%,rgba(0,0,0,.45));mask-image:linear-gradient(to bottom,#000 60%,rgba(0,0,0,.45))}
.w-iwall span{position:absolute;translate:-50% -50%}
.w-iwall .ci{display:block}
:root[data-theme="dark"] .w-iwall{opacity:.06;filter:grayscale(1) brightness(3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .w-iwall{opacity:.06;filter:grayscale(1) brightness(3)}}
.wset-v2 .w-visual,.wset-v2 .w-body,.wset-v3 .w-visual,.wset-v3 .w-body{position:relative;z-index:1}.wset-v2 .w-top,.wset-v3 .w-top{z-index:2}
.w-sarch{position:absolute;left:50%;top:0;width:375px;height:346px;translate:-50% 0}
.sa-brand{position:absolute;left:50%;top:172px;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:14px;animation:wpop .7s cubic-bezier(.3,1.4,.5,1) both}
.sa-brand .w-logo{height:52px}
.sa-pill{margin-top:2px;padding:7px 14px;border-radius:99px;background:var(--p-navy);color:#fff;font-size:12px;font-weight:800;white-space:nowrap;box-shadow:0 8px 20px rgba(24,31,57,.22)}
.sa-pill .ci{--b:var(--p-mint)!important;font-size:15px;vertical-align:-3px}
:root[data-theme="dark"] .sa-pill{background:var(--p-butter);color:var(--p-navy)}:root[data-theme="dark"] .sa-pill .ci{--b:var(--p-navy)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sa-pill{background:var(--p-butter);color:var(--p-navy)}:root:not([data-theme="light"]) .sa-pill .ci{--b:var(--p-navy)!important}}
.welcome .sa-tag{margin:0;font-size:23px;font-weight:700;color:var(--w-ink)!important;white-space:nowrap;letter-spacing:-.01em}
.sa-tag em{color:var(--w-accent)}
.w3-v2 > .w-top{display:none}
/* v2: bottom section sits on a translucent sheet of the page colour, so the doodles show only faintly behind the text */
.wset-v2 > .w-body{background:linear-gradient(to bottom,rgb(var(--w-veil) / 0),rgb(var(--w-veil) / .8) 48px,rgb(var(--w-veil) / .85));margin-top:-24px;padding-top:32px}
.wset-v2 .w-iwall{-webkit-mask-image:none;mask-image:none}

/* ---------- Splash (Android 12+ / iOS launch screen) ---------- */
/* Staged, single-purpose motion: ambience → mark → wordmark → progress → dissolve. Easing: expo-out for entrances, expo-in for the exit. */
.splash{--sp-out:cubic-bezier(.16,1,.3,1);--sp-in:cubic-bezier(.7,0,.84,0);height:100%;align-items:center;justify-content:center;cursor:pointer}
/* ambient palette blobs — same colours as Welcome so the hand-over feels continuous */
.sp-blob{position:absolute;border-radius:50%;pointer-events:none;filter:blur(34px);animation:sp-blob-in 1.2s var(--sp-out) both,sp-drift 7s 1.2s ease-in-out infinite alternate;transition:scale .5s var(--sp-in),opacity .45s ease}
.sp-blob.b1{right:-70px;top:60px;width:220px;height:220px;background:color-mix(in srgb,var(--p-coral) var(--w-blob,34%),var(--w-bg))}
.sp-blob.b2{left:-90px;bottom:150px;width:240px;height:240px;background:color-mix(in srgb,var(--p-mint) calc(var(--w-blob,34%) + 8%),var(--w-bg));animation-delay:.1s,1.3s;--dx:14px}
.sp-blob.b3{right:30px;bottom:-40px;width:150px;height:150px;background:color-mix(in srgb,var(--p-butter) calc(var(--w-blob,34%) + 6%),var(--w-bg));animation-delay:.2s,1.4s;--dx:-10px}
/* mark */
.sp-icon{position:relative;width:112px;height:112px;translate:0 -18px}
.sp-mark{position:absolute;inset:0;border-radius:50%;overflow:hidden;box-shadow:0 18px 40px -8px color-mix(in srgb,var(--p-navy) 35%,transparent);
  will-change:translate,scale,opacity;animation:sp-rise .9s .1s var(--sp-out) backwards;
  transition:translate .45s cubic-bezier(.4,0,.2,1),scale .45s cubic-bezier(.4,0,.2,1),opacity .35s .1s ease}
/* the PNG's circle sits ~2px inside its square with a soft edge — scale it so the round clip cuts through solid logo, no light ring */
.sp-mark img{width:100%;height:100%;display:block;scale:1.06}
/* one soft halo pulse behind the mark (plus a fainter echo) — then it rests */
.sp-halo{position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--p-butter) 55%,transparent) 0%,transparent 70%);opacity:0;animation:sp-halo 1.3s .25s var(--sp-out) both}
.sp-halo.h2{inset:-2px;background:none;border:1.5px solid color-mix(in srgb,var(--p-coral) 70%,transparent);animation:sp-halo-ring 1.4s .35s var(--sp-out) both}
/* wordmark + progress line */
.sp-brand{position:absolute;left:0;right:0;bottom:56px;display:flex;flex-direction:column;align-items:center;gap:14px;transition:opacity .3s ease,translate .4s var(--sp-in)}
.sp-brand .w-brand{clip-path:inset(0 100% 0 0);animation:sp-wipe .7s .8s var(--sp-out) both}
.sp-brand .w-logo{height:22px}
.sp-line{width:64px;height:3px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--w-ink) 10%,transparent);opacity:0;animation:sp-show .3s 1.1s ease both}
.sp-line i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--p-butter),var(--p-coral));transform-origin:left;scale:0 1;animation:sp-fill 1.25s 1.15s cubic-bezier(.4,0,.2,1) both}
/* exit: mark lifts a touch, blobs bloom, brand slips down, page dissolves — Welcome fades in underneath.
   The rise only fills backwards, so these transitions aren't held off by its end values */
.sp-out .sp-mark{translate:0 -10px;scale:1.06;opacity:0}.sp-out .sp-halo{opacity:0}
.sp-out .sp-blob{scale:1.35;opacity:0}
.sp-out .sp-brand{opacity:0;translate:0 10px}
@keyframes sp-rise{0%{opacity:0;scale:.78;translate:0 22px;filter:blur(10px)}60%{filter:blur(0)}100%{opacity:1;scale:1;translate:0 0;filter:blur(0)}}
@keyframes sp-halo{0%{opacity:0;scale:.6}35%{opacity:1}100%{opacity:0;scale:1.9}}
@keyframes sp-halo-ring{0%{opacity:0;scale:.9}30%{opacity:.8}100%{opacity:0;scale:1.6}}
@keyframes sp-blob-in{from{opacity:0;scale:.7}}
@keyframes sp-drift{to{translate:var(--dx,-12px) -10px}}
@keyframes sp-wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes sp-show{from{opacity:0}to{opacity:1}}
@keyframes sp-fill{to{scale:1 1}}
@media (prefers-reduced-motion:reduce){.splash *{animation:none!important;transition:opacity .3s ease!important}.sp-halo{display:none}.sp-brand .w-brand{clip-path:none}.sp-line{opacity:1}.sp-line i{scale:1 1}.sp-blob{opacity:1}}

/* ---------- Client set v2 (Welcome 1 & 2 centrepieces; Welcome 3 is the logo above) ---------- */
.wset-v2 .w-visual{height:346px}
.v2-stage{position:absolute;left:50%;top:0;width:375px;height:346px;translate:-50% 0}
.v2-glow{position:absolute;left:50%;top:10px;width:350px;height:330px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--w-veil)) 50%,rgb(var(--w-veil) / 0))}
.v2-main{position:absolute;left:50%;top:40px;width:190px;height:236px;translate:-50% 0;border-radius:95px;border:5px solid var(--w-card);box-shadow:0 18px 40px rgba(24,31,57,.2);animation:wpop .7s cubic-bezier(.3,1.4,.5,1) both}
.v2-main img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:inherit;display:block}
.v2-face{position:absolute;width:68px;height:68px;translate:-50% -50%;border-radius:50%;border:4px solid var(--w-card);box-shadow:0 10px 24px rgba(24,31,57,.16);animation:wpop .6s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d)}
.v2-face img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;border-radius:50%;display:block}
.v2-face i{position:absolute;right:-4px;bottom:-2px;width:22px;height:22px;border-radius:50%;background:var(--w-card);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px}
.v2-badge{position:absolute;left:50%;bottom:-16px;translate:-50% 0;white-space:nowrap;display:flex;align-items:center;gap:6px;padding:7px 14px 7px 10px;border-radius:99px;background:var(--p-navy);color:#fff;font-size:12px;font-weight:800;box-shadow:0 8px 20px rgba(24,31,57,.25)}
.v2-badge i{font-style:normal;display:flex}.v2-badge .ci{--b:var(--p-mint)!important}
.v2-work{position:absolute;left:50%;top:22px;width:210px;height:236px;translate:-50% 0;border-radius:32px;border:5px solid var(--w-card);box-shadow:0 18px 40px rgba(24,31,57,.2);animation:wpop .7s cubic-bezier(.3,1.4,.5,1) both}
.v2-work img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;border-radius:27px;display:block}
.v2-deal{position:absolute;left:50%;top:282px;translate:-50% 0;display:flex;align-items:center;gap:9px;padding:8px 14px 8px 8px;border-radius:16px;background:var(--w-card);box-shadow:0 12px 28px rgba(24,31,57,.14);white-space:nowrap;animation:wtile .5s .35s ease-out both}
.v2-deal>.ci{font-size:32px}.v2-deal span{display:flex;flex-direction:column;line-height:1.25}.v2-deal b{font-size:12.5px}.v2-deal small{font-size:11px;color:var(--w-sub)}
:root[data-theme="dark"] .v2-badge{background:var(--p-butter);color:var(--p-navy)}:root[data-theme="dark"] .v2-badge .ci{--b:var(--p-navy)!important}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .v2-badge{background:var(--p-butter);color:var(--p-navy)}:root:not([data-theme="light"]) .v2-badge .ci{--b:var(--p-navy)!important}}

/* ---------- Client set v3: bold poster onboarding (solid colour, headline on top, big illustration) ---------- */
.welcome.v3{--v3bg:#FDA597;--v3ink:#181F39;--v3mark:#FFFFFF;--v3btn:#181F39;--v3btn-ink:#FFFFFF;background:var(--v3bg);color:var(--v3ink);padding-top:62px}
.welcome.v3-2{--v3bg:#ADD8CE;--v3mark:#FEDA90}
/* Slide 1 pastel: soft peach, lavender halo and stripes, coral highlight (navy text and button keep contrast) */
.welcome.v3-1,.v3c-panel.v3-1{--v3bg:#FFE7DF;--v3mark:#FFC3B5}
.v3-1 .v3-sun-p{background:#E9E0FA;width:330px;height:330px;top:6px}
.v3-1 .v3-stripes{background:repeating-linear-gradient(to bottom,#D8CBF4 0 12px,#FFFFFF 12px 24px);box-shadow:0 -6px 0 #FFFFFF}
.v3-1 .v3-photo{box-shadow:0 18px 40px rgba(150,110,170,.25)}
.welcome.v3-3{--v3bg:#181F39;--v3ink:#FFFFFF;--v3mark:#FEDA90;--v3btn:#FEDA90;--v3btn-ink:#181F39}
.welcome .v3-title{margin:0 auto;padding:0 22px;max-width:340px;text-align:center;font-size:34px;line-height:1.2;letter-spacing:-.035em;font-weight:800;color:var(--v3ink);animation:wtile .5s ease-out both}
.v3-title mark{background:var(--v3mark);color:#181F39;padding:0 .14em;border-radius:.22em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.welcome.v3 > .w-visual{flex:1;min-height:340px;height:auto;margin-top:10px;position:relative;overflow:visible}
.v3-stage{position:absolute;left:50%;bottom:0;width:375px;height:380px;translate:-50% 0;clip-path:inset(-200px -400px 0 -400px);scale:1.2;transform-origin:50% 100%}
.v3-person{position:absolute;left:50%;bottom:58px;translate:-50% 0;z-index:2;height:auto;filter:drop-shadow(0 16px 24px rgba(24,31,57,.22));animation:wrise .7s .1s ease-out both}
.v3-band{position:absolute;left:-260px;right:-260px;z-index:3}
.v3-stripes{bottom:0;height:86px;background:repeating-linear-gradient(to bottom,#181F39 0 12px,#FFFFFF 12px 24px);box-shadow:0 -6px 0 #FFFFFF}
.v3-diag{bottom:-30px;height:120px;background:#181F39;rotate:-9deg;box-shadow:0 -10px 0 #FEDA90}
.v3-floor{bottom:0;height:84px;background:#FEDA90;border-radius:50% 50% 0 0 / 40px 40px 0 0}
.v3-sun{position:absolute;left:50%;top:20px;width:270px;height:270px;translate:-50% 0;border-radius:50%;background:#FFFFFF;z-index:1;animation:wpopshape .6s ease-out both}
.v3-sun-b{background:#FEDA90}
.v3-photo{position:absolute;left:50%;bottom:40px;width:256px;height:320px;translate:-50% 0;z-index:2;object-fit:cover;object-position:50% 58%;border-radius:128px 128px 0 0;border:6px solid #FFFFFF;border-bottom:0;box-shadow:0 18px 40px rgba(24,31,57,.22);animation:wpopshape .6s ease-out both}
.v3-split{position:absolute;left:50%;top:0;width:310px;height:310px;translate:-50% 0;border-radius:50%;z-index:1;background:linear-gradient(90deg,#FDA597 50%,#ADD8CE 50%);animation:wpopshape .6s ease-out both}
.v3-prop{position:absolute;bottom:40px;z-index:4;font-size:66px;translate:-50% 0;animation:wtile .5s ease-out both;animation-delay:var(--d)}
.v3-prop .ci{display:block;filter:drop-shadow(0 10px 14px rgba(24,31,57,.25))}
.v3-prop.v3-key{bottom:14px;z-index:5;font-size:74px}.v3-prop.v3-key .ci{filter:drop-shadow(0 0 0 #FFFFFF) drop-shadow(0 14px 18px rgba(24,31,57,.35))}  /* the verified badge that joins both worlds */
.welcome.v3 > .w-body{flex:none;padding:20px 24px 30px;justify-content:flex-start}
.v3-dots{display:flex;justify-content:center;gap:6px;margin-bottom:18px}
.v3-dots>*{width:8px;height:8px;border-radius:99px;background:var(--v3ink);opacity:.3;transition:width .3s}
.v3-dots>.on{width:24px;opacity:1}
.welcome.v3{--w-cta:#181F39;--w-cta-ink:#FFFFFF}.welcome.v3-3{--w-cta:#FEDA90;--w-cta-ink:#181F39}
.welcome.v3 .w-cta-row{margin-top:0}
.welcome.v3 .w-social{background:#FFFFFF;color:#181F39;box-shadow:0 6px 16px rgba(24,31,57,.12)}
.welcome.v3 .w-body > p.v3-signin{margin:14px 0 0;text-align:center;font-size:13.5px;color:var(--v3ink);opacity:.9}
.welcome.v3 .v3-signin a{color:var(--v3ink);font-weight:800;text-decoration:underline;text-underline-offset:3px}

/* ---------- v3 as one swipeable screen ---------- */
.welcome.v3c{padding-top:0;height:100%;transition:background .35s ease}
.v3c-track{flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}
.v3c-track::-webkit-scrollbar{display:none}
.v3c-track.drag{scroll-snap-type:none;cursor:grabbing;user-select:none}
.v3c-track img{-webkit-user-drag:none;user-select:none}
.v3c-panel{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;padding-top:96px;overflow:hidden;background:var(--v3bg)}
.v3c-art{flex:1;min-height:0;position:relative;margin-top:14px}
@media (max-height:720px){.v3c-panel{padding-top:80px}.welcome.v3c .v3-title{font-size:30px}.v3c-logo{top:28px}.v3c-foot{padding:14px 24px 22px}.v3c-foot .v3-dots{margin-bottom:14px}}
.v3c-foot{padding:20px 24px calc(30px + env(safe-area-inset-bottom));background:var(--v3bg);transition:background .35s ease}
.v3c-foot .v3-dots button{border:0;padding:0;cursor:pointer}
.welcome.v3c .w-body, .welcome.v3c .v3c-foot > p.v3-signin{max-width:none}
.welcome.v3c .v3c-foot > p.v3-signin{margin:14px 0 0;text-align:center;font-size:13.5px;color:var(--v3ink);opacity:.9}
.welcome.v3c .v3c-foot > p.v3-signin a{color:var(--v3ink);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.welcome.v3c .w-go,.welcome.v3c .v3-dots>*{transition:background .35s ease,width .3s}
/* logo stays put top-left while the panels swipe; white version on the navy panel */
.v3c-logo{position:absolute;top:40px;left:20px;z-index:5;pointer-events:none}
.v3c-logo img{height:24px;width:auto;display:block}
.v3c-logo .v3c-l-white{display:none}
.v3c.v3-3 .v3c-logo .v3c-l-ink{display:none}.v3c.v3-3 .v3c-logo .v3c-l-white{display:block}

/* ---------- v3 pastel: slides 2 and 3 (slide 1 is set beside .welcome.v3-2 above) ---------- */
/* Slide 2: pale mint, butter halo, soft mint band with a butter edge */
.welcome.v3-2,.v3c-panel.v3-2{--v3bg:#E2F3EE;--v3mark:#FFE3A6}
.v3-2 .v3-sun-b{background:#FFF0C9}
.v3-2 .v3-diag{background:#BFE3D8;box-shadow:0 -10px 0 #FFE3A6}
/* Slide 3: soft lavender, light peach / mint circle, pale butter floor; navy text and button like slides 1 and 2 */
.welcome.v3-3,.v3c-panel.v3-3{--v3bg:#EEE8FB;--v3ink:#181F39;--v3mark:#FFE3A6}
.welcome.v3-3{--w-cta:#181F39;--w-cta-ink:#FFFFFF}
.v3-3 .v3-split{background:linear-gradient(90deg,#FFD4C9 50%,#CDEBE2 50%)}
.v3-3 .v3-floor{background:#FFEDC2}
.v3c.v3-3 .v3c-logo .v3c-l-ink{display:block}.v3c.v3-3 .v3c-logo .v3c-l-white{display:none}

/* ---------- v2: bold onboarding, one swipeable screen (after the "Hot pizza" reference) ---------- */
/* off-white page; per slide a bright pill + a deep pill behind a cut-out person; big two-word headline bottom-left */
.welcome.v2c{--v2bg:#F4F4F7;--v2ink:#26253A;--v2hot:#FF3D6E;--v2deep:#3D3A63;padding-top:0;height:100%;background:var(--v2bg);color:var(--v2ink)}
.v2c-p1,.welcome.v2c-1{--v2hot:#FF3D6E;--v2deep:#3D3A63}
.v2c-p2,.welcome.v2c-2{--v2hot:#1EBE86;--v2deep:#2C5856}
.v2c-p3,.welcome.v2c-3{--v2hot:#FFB21E;--v2deep:#443E78}
.v2c-logo{position:absolute;top:40px;left:22px;z-index:5;pointer-events:none}
.v2c-logo img{height:24px;width:auto;display:block}
.v2c-panel{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;padding-top:78px;overflow:hidden;background:var(--v2bg)}
.v2c-art{flex:1;min-height:0;position:relative}
.v2c-stage{position:absolute;left:50%;bottom:0;width:375px;height:420px;translate:-50% 0;transform-origin:50% 100%;clip-path:inset(-200px -400px 0 -400px)}
.v2c-pill{position:absolute;border-radius:999px;animation:v2c-rise .7s cubic-bezier(.3,1.3,.5,1) both}
.v2c-pa{left:34px;top:30px;width:196px;height:330px;background:var(--v2hot)}
.v2c-pb{left:150px;top:96px;width:196px;height:330px;background:var(--v2deep);animation-delay:.08s}
.v2c-person{position:absolute;left:50%;bottom:0;translate:-50% 0;z-index:2;width:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent);animation:wrise .7s .12s ease-out both}
/* a cut-out cropped from a wider photo: fade its straight side edges as well as the bottom */
.v2c-person.v2c-soft{-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,#000 78%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,#000 78%,transparent);mask-composite:intersect}
.v2c-bit{position:absolute;z-index:1;display:block;animation:wpop .5s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d)}
.v2c-ring{width:20px;height:14px;border-radius:50%;border:3px solid var(--v2hot)}
.v2c-dot{width:10px;height:10px;border-radius:50%;background:var(--v2ink)}
.v2c-bar{width:18px;height:6px;border-radius:3px;background:#FFC93C}
.v2c-p3 .v2c-bar{background:#FF6B8A}
.v2c-ic{position:absolute;z-index:4;font-size:44px;translate:-50% -50%;animation:wpop .55s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d)}
.v2c-ic .ci{display:block;filter:drop-shadow(0 8px 12px rgba(24,31,57,.2))}
.v2c-ic.v2c-far{font-size:34px;filter:blur(.6px)}
.v2c-tag{position:absolute;right:22px;bottom:28px;z-index:4;display:flex;align-items:center;gap:6px;padding:7px 13px 7px 9px;border-radius:99px;background:#FFFFFF;color:var(--v2ink);font:700 12px/1 Manrope,sans-serif;box-shadow:0 10px 24px rgba(24,31,57,.18);animation:wtile .5s .5s ease-out both}
.v2c-tag i{width:18px;height:18px;border-radius:50%;background:var(--v2hot);color:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:10px}
.v2c-copy{flex:none;padding:18px 26px 0}
.v2c-lead{display:block;font:600 16px/1.2 Poppins,Manrope,sans-serif;color:var(--v2ink);opacity:.85}
.welcome .v2c-title{margin:4px 0 0;font-family:Poppins,Manrope,sans-serif;font-weight:800;text-transform:uppercase;line-height:.98;letter-spacing:.005em}
.v2c-title b{display:block;font-size:56px;font-weight:800;color:var(--v2hot)}
.v2c-title span{display:block;font-size:31px;color:var(--v2ink);letter-spacing:.04em}
.v2c-foot{flex:none;padding:18px 26px calc(26px + env(safe-area-inset-bottom));background:var(--v2bg)}
.v2c-row{display:flex;align-items:center;justify-content:space-between;min-height:56px}
.v2c-dots{display:flex;gap:6px}
.v2c-dots button{border:0;padding:0;cursor:pointer;width:7px;height:7px;border-radius:99px;background:var(--v2ink);opacity:.25;transition:width .3s,background .3s,opacity .3s}
.v2c-dots button.on{width:22px;opacity:1;background:var(--v2hot)}
.v2c-next{width:56px;height:56px;border:0;border-radius:50%;background:#FFFFFF;color:var(--v2ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 24px rgba(24,31,57,.14)}
.v2c-next:active{scale:.94}
.v2c-start{display:none;align-items:center;gap:8px;height:56px;padding:0 20px 0 26px;border-radius:99px;background:var(--v2ink);color:#FFFFFF;font:700 15px/1 Manrope,sans-serif;text-decoration:none;box-shadow:0 10px 24px rgba(24,31,57,.22);animation:wtile .35s ease-out both}
.welcome.v2c-3 .v2c-next{display:none}.welcome.v2c-3 .v2c-start{display:flex}
.v2c-signin{margin:16px 0 0;font-size:13.5px;color:var(--v2ink);opacity:.85}
.v2c-signin a{color:var(--v2ink);font-weight:800;text-decoration:underline;text-underline-offset:3px}
@keyframes v2c-rise{from{opacity:0;translate:0 40px;scale:.9}}
@media (max-height:720px){.v2c-panel{padding-top:66px}.v2c-logo{top:28px}.v2c-title b{font-size:46px}.v2c-title span{font-size:26px}.v2c-foot{padding:12px 26px 20px}.v2c-signin{margin-top:10px}}
@media (prefers-reduced-motion:reduce){.v2c *{animation:none!important}}

/* v3 borrows v2's floating doodles and the white verified tag */
.v3-bit{z-index:1}.v3-stage .v2c-ring{border-color:#FFFFFF}.v3-stage .v2c-dot{background:#181F39;opacity:.7}
.v3-1 .v3-stage .v2c-bar{background:#FFC3B5}.v3-2 .v3-stage .v2c-bar{background:#FFE3A6}.v3-3 .v3-stage .v2c-bar{background:#FFD4C9}
.v3-1 .v3-stage .v2c-ring{border-color:#D8CBF4}.v3-2 .v3-stage .v2c-ring{border-color:#BFE3D8}.v3-3 .v3-stage .v2c-ring{border-color:#CDEBE2}
.v3-tag{right:30px;bottom:118px;z-index:6}.v3-1 .v3-tag i{background:#FF7A6B}.v3-2 .v3-tag i{background:#1EBE86}.v3-3 .v3-tag i{background:#F3B53A}

/* ---------- v4 · v2 layout in v3's pastel colours, with v3's highlighted word, band and Apple / Google row ---------- */
.welcome.v4,.v4-p1,.welcome.v4-1{--v2bg:#FFE7DF;--v2ink:#181F39;--v2hot:#FF7A6B;--v4a:#FFC3B5;--v4b:#D8CBF4;--v4mark:#FFFFFF}
.v4-p2,.welcome.v4-2{--v2bg:#E2F3EE;--v2hot:#1EBE86;--v4a:#FFE3A6;--v4b:#BFE3D8;--v4mark:#FFFFFF}
.v4-p3,.welcome.v4-3{--v2bg:#EEE8FB;--v2hot:#F3B53A;--v4a:#FFD4C9;--v4b:#CDEBE2;--v4mark:#FFE3A6}
.welcome.v4,.v4 .v2c-foot{transition:background .35s ease}
.v4 .v2c-pa{background:var(--v4a)}.v4 .v2c-pb{background:var(--v4b)}
.v4 .v2c-ring{border-color:#FFFFFF}.v4 .v2c-dot{opacity:.7}.v4 .v2c-bar{background:var(--v4a)}
.v4 .v3-band{z-index:3;left:-260px;right:-260px}
.v4 .v3-stripes{height:54px;background:repeating-linear-gradient(to bottom,var(--v4b) 0 9px,#FFFFFF 9px 18px);box-shadow:0 -5px 0 #FFFFFF}
.v4 .v3-diag{bottom:-34px;height:86px;background:var(--v4b);box-shadow:0 -8px 0 var(--v4a)}
.v4 .v3-floor{height:56px;background:var(--v4a);border-radius:50% 50% 0 0 / 30px 30px 0 0}
.v4 .v2c-tag{bottom:22px}
.v4-title b{margin:8px 0 4px}.v4-title b mark{display:inline-block;line-height:.9;background:var(--v4mark);color:var(--v2hot);padding:.08em .14em 0;border-radius:.16em;box-shadow:0 8px 18px rgba(24,31,57,.08)}
.v4-p3 .v4-title b mark{color:#181F39}
.v4-title span{color:var(--v2ink)}
.v4 .v2c-dots button.on{background:var(--v2ink)}
.v4-cta{display:none;margin-top:0;--w-cta:#181F39;--w-cta-ink:#FFFFFF}
.v4 .w-social{background:#FFFFFF;color:#181F39;box-shadow:0 6px 16px rgba(24,31,57,.12)}
.welcome.v4-3 .v4-row{display:none}.welcome.v4-3 .v4-cta{display:flex;animation:wtile .35s ease-out both}
.v4 .v2c-signin{text-align:center}
@media (max-height:720px){.v4 .v2c-title b{font-size:44px}}
/* v5: v1's slides with v2's illustration (drawn on v2's 375×420 stage) in the visual area */
.welcome.wset-v5 > .w-visual{height:420px;margin-top:76px}  /* beats .w-pal.w-both's 346px on slide 3; clears the logo */
.v5-art{position:absolute;left:0;right:0;top:0;height:420px;--v2ink:#26253A}  /* full v2 size, as on /welcome/1/v2 */
.wset-v5 .w-brand{flex-direction:column;align-items:flex-start;gap:5px}
.w-tagline{font:600 12px/1 Manrope,sans-serif;letter-spacing:.01em;color:var(--w-sub)}
/* v6: a copy of v5, kept under its own classes so v6 can change without touching v5 */
.welcome.wset-v6 > .w-visual{height:420px;margin-top:76px}
.v6-art{position:absolute;left:0;right:0;top:0;height:420px;--v2ink:#26253A}
.wset-v6 .w-brand{flex-direction:column;align-items:flex-start;gap:5px}
/* v6: the dot doodles take each slide's accent instead of navy (rose red, office blue, teal) */
.v6-art.v2c-p1 .v2c-dot{background:#C94A63}
.v6-art.v2c-p2 .v2c-dot{background:#6F9FD8}
.v6-art.v2c-p3 .v2c-dot{background:#5B8F8E}
/* v6 · slide 1: dark oval lifted 8px so its rounded bottom ends inside the 420px stage instead of being cut flat */
.v6-art.v2c-p1 .v2c-pb{top:88px}
/* v6 · slide 2: a single light-mint doorway arch with a faint graph-paper grid (business), and a thin outline arch set back up-right */
.v6-door,.v6-door-line{position:absolute;left:58px;top:44px;width:260px;height:376px;border-radius:130px 130px 0 0;animation:v2c-rise .7s cubic-bezier(.3,1.3,.5,1) both}
.v6-door{background:repeating-linear-gradient(0deg,rgba(44,88,86,.07) 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,rgba(44,88,86,.07) 0 1px,transparent 1px 26px),linear-gradient(165deg,#D6F3E7,#EEF9F4);box-shadow:0 24px 48px rgba(44,88,86,.12)}
.v6-door-line{translate:18px -18px;border:2px solid var(--v2hot);border-bottom:0;opacity:.4;animation-delay:.08s}
:root[data-theme="dark"] .v6-door{background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 26px),linear-gradient(165deg,color-mix(in srgb,var(--v2hot) 30%,var(--w-bg)),color-mix(in srgb,var(--v2hot) 12%,var(--w-bg)))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .v6-door{background:repeating-linear-gradient(0deg,rgba(255,255,255,.06) 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 26px),linear-gradient(165deg,color-mix(in srgb,var(--v2hot) 30%,var(--w-bg)),color-mix(in srgb,var(--v2hot) 12%,var(--w-bg)))}}
/* v6: the heart is rose red on every slide; on slide 3 the shield and briefcase are dark pastels (muted teal, dusty lavender) */
.v6-art .v6-ic-heart .ci{--b:#C94A63!important;--a:#FBE3E8!important}
/* v6 · slide 1: the coffee cup like a real one: white ceramic cup and handle, warm saucer, soft grey steam */
.v6-art .v6-ic-coffee .ci path.g{fill:#FBF8F3;stroke:#E6DDD0}
.v6-art .v6-ic-coffee .ci rect.g{fill:#EDE4D8;stroke:#DCD0C0}
.v6-art .v6-ic-coffee .ci path.s:nth-of-type(2){stroke:#F1EBE2}
.v6-art .v6-ic-coffee .ci path.s:first-of-type{stroke:#B9AEA3;opacity:.8}
/* v6 · slide 2: the briefcase in a light office blue */
.v6-art.v2c-p2 .v6-ic-briefcase .ci{--b:#6F9FD8!important;--a:#EAF2FC!important}
.v6-art.v2c-p3 .v6-ic-shield .ci{--b:#5B8F8E!important;--a:#E0F0EE!important}
.v6-art.v2c-p3 .v6-ic-briefcase .ci{--b:#8A77B2!important;--a:#ECE6F7!important}
/* v6 · slide 3: the glass slide's centre backdrop (/welcome/3/glass) behind the pair, scaled up 1.25x to fit two people */
.v6-art.v2c-p3{--gl-glass:255 255 255;--gl-edge:rgba(255,255,255,.9)}
.v6-art.v2c-p3 .gl-halo{left:18px;top:22px;width:338px;height:338px}
.v6-art.v2c-p3 .gl-back,.v6-art.v2c-p3 .gl-front{left:68px;top:78px;width:238px;height:325px;border-radius:45px}
:root[data-theme="dark"] .v6-art.v2c-p3{--gl-edge:rgba(255,255,255,.28)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .v6-art.v2c-p3{--gl-edge:rgba(255,255,255,.28)}}
/* v6 · slide 1: heads and shoulders rise above the ovals; below the waist the couple stays inside the two ovals' rounded shapes */
.v6-art .v2c-person.v6-inoval{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268.5 410' preserveAspectRatio='none'%3E%3Crect x='-40' y='-40' width='350' height='250' fill='white'/%3E%3Crect x='-19.2' y='20' width='196' height='330' rx='98' fill='white'/%3E%3Crect x='96.8' y='78' width='196' height='330' rx='98' fill='white'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 268.5 410' preserveAspectRatio='none'%3E%3Crect x='-40' y='-40' width='350' height='250' fill='white'/%3E%3Crect x='-19.2' y='20' width='196' height='330' rx='98' fill='white'/%3E%3Crect x='96.8' y='78' width='196' height='330' rx='98' fill='white'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
/* v6: v4's dots in place of the slide thumbnails — the current one a short dark pill, the rest faded */
.w-thumbs.w-dots{align-items:center;gap:6px}
.w-dot{width:7px;height:7px;border-radius:99px;background:var(--w-ink);opacity:.25;transition:width .3s,opacity .3s}
.w-dot.on{width:22px;opacity:1}
/* v6 slide 1: "commitment." hidden for now — the heading reads just Lifestyle (delete this rule to bring it back) */
.welcome.wset-v6.w-life h1 .w-serif{display:none}
/* v6: the longer line uses the full width so it sits on two lines (same font and size) */
.welcome.wset-v6.w-life .w-body > p,.welcome.wset-v6.w-biz .w-body > p,.welcome.wset-v6.w-both .w-body > p:not(.w-signin){max-width:none}
/* v6 · slide 3: the client's artwork, 375px wide (the stage width). It takes 332px in the layout and runs on another 127px below,
   where the couple keeps fading out behind the copy at the mock's rate (about 20% behind the eyebrow, 0 by the verified row) */
.welcome.wset-v6.w-both > .w-visual{height:332px;z-index:0}
.v6-art.v2c-p3{height:332px}
.v6-art.v2c-p3 .v2c-stage{height:332px;clip-path:none}
.v6-scene{position:absolute;left:0;top:0;width:375px;height:503px;display:block;animation:v2c-rise .7s cubic-bezier(.3,1.3,.5,1) both}
.welcome.wset-v6.w-both > .w-body{margin-top:-12px;padding-top:0;padding-bottom:calc(20px + env(safe-area-inset-bottom));justify-content:flex-end;isolation:isolate}  /* a little more room under Sign in (20px, was 14px), plus the home-bar inset on notched phones */
.welcome.wset-v6.w-both .w-eyebrow{position:relative}
.welcome.wset-v6.w-both .w-eyebrow::before{content:'';position:absolute;z-index:-1;left:-50vw;width:200vw;top:-78px;height:1200px;background:linear-gradient(to bottom,rgb(var(--w-veil) / 0),rgb(var(--w-veil) / .85) 60px,rgb(var(--w-veil)) 96px);pointer-events:none}  /* a white glow that starts just above the copy wherever it lands, so the copy reads over the couple on any screen height */
.welcome.wset-v6.w-both .w-body > p b{font-weight:700;color:var(--w-ink)}
/* v6: the Liable wordmark at the heading's size — its letters as tall as the L of "Lifestyle + Business" (33px Manrope, ~24px cap height);
   the negative margins trim the image's own padding so the tagline keeps its spacing */
.wset-v6 .w-brand .w-logo{height:34px;margin:-4px 0 -4px -1px}
/* v6: the word Liable as text, matching the "Lifestyle + Business" heading (same font, weight, size and tracking) */
.w-word{font-size:33px;font-weight:800;line-height:1;letter-spacing:-.035em;color:var(--w-ink)}
/* v6 splash: v6's brand under the mark — Liable as text at the heading size, the tagline centred under it */
.sp-v6 .sp-brand .w-brand{flex-direction:column;align-items:center;gap:6px}
/* v6 splash: logo, Liable, tagline and the loading line stacked as one group in the centre of the screen */
.sp-v6 .sp-icon{translate:none}
.sp-v6 .sp-brand{position:relative;left:auto;right:auto;bottom:auto;margin-top:24px;gap:18px}
/* v6 · slide 3: the artwork in layers on the 375px stage, at the original artwork's positions (it was drawn at 750 x 1006, so everything is half) */
.v6-art.v2c-p3 .v2c-stage{clip-path:inset(-120px 0 -400px 0)}
.bw-back{position:absolute;left:0;top:0;width:375px;height:503px;display:block;z-index:0;animation:wpopshape .5s ease both}
.bw-ic{position:absolute;z-index:1;height:auto;display:block;filter:drop-shadow(0 4px 5px rgba(60,40,40,.16));animation:wpop .55s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d)}
.v2c-p3 .v6-scene{z-index:2}
@media (prefers-reduced-motion:reduce){.bw-back,.bw-ic{animation:none}}

/* ---------- Set-up hub (/setup): Account created → KYC → Declaration ---------- */
.au-setup{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:10px}
.au-setup li{display:flex;align-items:center;gap:12px;padding:14px;border-radius:20px;background:var(--card);border:1.5px solid transparent}
.au-setup li>i{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:2px solid color-mix(in srgb,var(--w-ink) 25%,transparent);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px;font-weight:800;color:var(--w-ink)}
.au-setup li.done>i{background:var(--ok);border-color:var(--ok);color:#fff}
.au-setup li.wip>i,.au-setup li.wait>i{border-color:var(--warn);color:var(--warn)}
.au-setup li.bad>i{border-color:var(--bad);color:var(--bad)}
.au-setup li.todo{border-color:color-mix(in srgb,var(--w-ink) 18%,transparent)}
.au-setup li>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.au-setup li b{font-size:14.5px;color:var(--w-ink)}
.au-setup li span{font-size:12px;line-height:1.35;color:var(--w-sub)}
.au-setup li em{font-style:normal;align-self:flex-start;margin-top:3px}
.au-setup li .btn.small{flex:0 0 auto;height:auto;padding:9px 14px;border-radius:12px;font-size:13px}
.au-setup li .btn.small::after{content:none}
.au-lock{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,var(--w-ink) 8%,transparent);color:var(--w-ink);margin-bottom:14px}
.au-lock b{font-size:13.5px}.au-lock span{font-size:12.5px;line-height:1.4;color:var(--w-sub)}
.au-hub .au-body{padding-top:96px}
.au-filled{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-radius:16px;background:var(--card);margin-bottom:14px}
.au-filled div{display:flex;flex-direction:column;gap:2px;min-width:0}.au-filled b{font-size:14.5px;color:var(--w-ink)}.au-filled span{font-size:12.5px;color:var(--w-sub);overflow:hidden;text-overflow:ellipsis}
.au-filled a{font-size:13px;font-weight:700;color:var(--w-ink)}
/* OAuth account chooser (mock of the provider's own sheet) */
.au-oauth{background:var(--card);border-radius:20px;padding:16px;margin-bottom:14px;box-shadow:0 10px 30px rgba(0,0,0,.08)}
.au-oauth-h{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:12px}.au-oauth-h svg{width:22px;height:22px}.au-oauth-h span{font-size:16px;font-weight:700;color:var(--w-ink)}.au-oauth-h small{font-size:12px;color:var(--w-sub)}
.au-acct{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 8px;border:0;border-top:1px solid color-mix(in srgb,var(--w-ink) 10%,transparent);background:none;cursor:pointer;font:inherit;color:var(--w-ink)}
.au-acct .au-av{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.au-acct div{display:flex;flex-direction:column;min-width:0}.au-acct b{font-size:14px}.au-acct div span{font-size:12.5px;color:var(--w-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-oauth-f{font-size:11.5px;color:var(--w-sub);margin:10px 0 0;line-height:1.4}.au-oauth-f a{color:var(--w-ink)}

/* Choose track — track-tinted icon tiles, button pinned to the bottom */
.tk-list{display:flex;flex-direction:column;gap:12px}
.tk{--tk:var(--p-coral);display:flex;align-items:center;gap:16px;width:100%;padding:16px;border:2px solid transparent;border-radius:24px;background:var(--w-card);color:var(--w-ink);font:inherit;text-align:left;cursor:pointer;
  box-shadow:0 1px 0 color-mix(in srgb,var(--w-ink) 6%,transparent),0 12px 28px rgba(24,31,57,.09);transition:border-color .18s,box-shadow .18s,transform .18s}
.tk:hover{transform:translateY(-1px)}
.tk:active{transform:scale(.985)}
.tk:focus-visible{outline:2px solid var(--w-ink);outline-offset:3px}
.tk-business{--tk:var(--p-mint)}.tk-both{--tk:var(--p-butter)}
.tk-ic{position:relative;flex:none;width:60px;height:60px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:26px;background:color-mix(in srgb,var(--tk) 55%,var(--w-bg));transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.tk-ic img{width:36px;height:36px}
.tk-check{position:absolute;right:-6px;top:-6px;width:22px;height:22px;border-radius:50%;background:var(--w-ink);color:var(--w-bg);border:2.5px solid var(--w-card);font-style:normal;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;scale:0;transition:scale .25s cubic-bezier(.3,1.6,.5,1)}
.tk-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tk-txt b{font-size:16.5px;font-weight:800}
.tk-txt span{font-size:12.5px;line-height:1.45;color:var(--w-sub)}
.tk.on{border-color:var(--w-ink);box-shadow:0 14px 30px color-mix(in srgb,var(--tk) 45%,transparent)}
.tk.on .tk-ic{transform:rotate(-6deg)}
.tk.on .tk-check{scale:1}
.tk-foot{margin-top:auto;padding-top:22px}
.tk-foot .btn{width:100%}
:root[data-theme="dark"] .tk{box-shadow:none}
:root[data-theme="dark"] .tk-ic{background:color-mix(in srgb,var(--tk) 30%,var(--w-card))}
:root[data-theme="dark"] .tk.on{box-shadow:0 14px 30px rgba(0,0,0,.3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tk{box-shadow:none}
  :root:not([data-theme="light"]) .tk-ic{background:color-mix(in srgb,var(--tk) 30%,var(--w-card))}
  :root:not([data-theme="light"]) .tk.on{box-shadow:0 14px 30px rgba(0,0,0,.3)}}
@media (max-height:700px){.tk{padding:13px}.tk-ic{width:52px;height:52px;border-radius:17px}.tk-list{gap:10px}}

/* ---------- KYC · pick an ID (white cards, tinted tiles, radio on the right) and scan ---------- */
.au-body:has(.kid-list) > :not(.w-blob),.au-body:has(.kid-cam) > :not(.w-blob){position:relative;z-index:1}
.kid-sec{margin:6px 0 10px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--w-sub)}
.kid-list + .kid-sec{margin-top:22px}
.kid-list{display:flex;flex-direction:column;gap:10px}
.kid{--tk:var(--p-coral);display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px 12px 12px;border:2px solid transparent;border-radius:22px;background:var(--w-card);color:var(--w-ink);font:inherit;text-align:left;cursor:pointer;
  box-shadow:0 6px 18px rgba(24,31,57,.07);transition:border-color .2s,box-shadow .2s,transform .15s}
.kid-mint{--tk:var(--p-mint)}.kid-butter{--tk:var(--p-butter)}
.kid:active{transform:scale(.985)}
.kid:focus-visible{outline:2px solid var(--w-ink);outline-offset:3px}
.kid-ic{flex:none;width:50px;height:50px;border-radius:17px;display:flex;align-items:center;justify-content:center;font-size:22px;background:color-mix(in srgb,var(--tk) 50%,var(--w-bg));transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.kid-ic .ci{width:30px;height:30px}
.kid-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.kid-txt b{font-size:15.5px;font-weight:800;display:flex;align-items:center;gap:8px}
.kid-txt b em{font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.02em;padding:3px 8px;border-radius:999px;background:color-mix(in srgb,var(--tk) 45%,var(--w-bg));color:var(--w-ink)}
.kid-txt span{font-size:12.5px;line-height:1.4;color:var(--w-sub)}
.kid-radio{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid color-mix(in srgb,var(--w-ink) 22%,transparent);position:relative;transition:border-color .2s,background .2s}
.kid-radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--w-bg);scale:0;transition:scale .25s cubic-bezier(.3,1.6,.5,1)}
.kid.on{border-color:var(--w-ink);box-shadow:0 12px 26px color-mix(in srgb,var(--tk) 45%,transparent)}
.kid.on .kid-ic{transform:rotate(-6deg)}
.kid.on .kid-radio{border-color:var(--w-ink);background:var(--w-ink)}
.kid.on .kid-radio::after{scale:1}
.kid-safe{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 12px;font-size:12.5px;color:var(--w-sub);text-align:center}
.kid-safe .ci{width:16px;height:16px;flex:none}
.kid-safe.left{justify-content:flex-start;text-align:left;margin-top:4px}
.kid-cam{position:relative;border-radius:28px;aspect-ratio:1.2;background:radial-gradient(circle at 50% 35%,#3b4466,#181F39 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;overflow:hidden;margin:2px 0 14px}
.kid-frame{position:relative;width:76%;aspect-ratio:1.586;border-radius:14px;background:rgba(255,255,255,.06);overflow:hidden}
.kid-frame i{position:absolute;width:26px;height:26px;border:3.5px solid var(--p-butter)}
.kid-frame i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:14px}
.kid-frame i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:14px}
.kid-frame i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:14px}
.kid-frame i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:14px}
.kid-frame .scan-line{left:6%;right:6%;background:var(--p-butter);box-shadow:0 0 14px var(--p-butter)}
.kid-cap{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.85);padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.1)}
.kid-tips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.kid-tips span{display:inline-flex;align-items:center;gap:4px;padding:7px 10px;border-radius:999px;background:var(--w-card);box-shadow:0 4px 12px rgba(24,31,57,.06);font-size:12.5px;font-weight:700;color:var(--w-ink)}
.kid-tips .ci{width:14px;height:14px}
:root[data-theme="dark"] .kid,:root[data-theme="dark"] .kid-tips span{box-shadow:none}
:root[data-theme="dark"] .kid-ic{background:color-mix(in srgb,var(--tk) 30%,var(--w-card))}
:root[data-theme="dark"] .kid.on{box-shadow:0 12px 26px rgba(0,0,0,.3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kid,:root:not([data-theme="light"]) .kid-tips span{box-shadow:none}
  :root:not([data-theme="light"]) .kid-ic{background:color-mix(in srgb,var(--tk) 30%,var(--w-card))}
  :root:not([data-theme="light"]) .kid.on{box-shadow:0 12px 26px rgba(0,0,0,.3)}}
/* KYC number confirm */
.kid-how b{display:block;margin-bottom:2px;font-size:13.5px}.kid-how .muted{font-size:12.5px;line-height:1.5}
.kid-no{font-size:20px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
/* KYC: close button, permission explainer, disabled auth buttons */
.au-close{margin-left:auto;font-size:16px}
.perm-art{margin:8px 0 14px;display:flex;justify-content:center}.au-flow .perm-art .ci{width:72px;height:72px}
button.au-primary:disabled{opacity:.35;box-shadow:none;cursor:not-allowed}
button.au-primary:disabled:active{transform:none}
/* One question per screen (js/questions.js) */
.q-eyebrow{margin:0 0 6px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--w-sub)}
.q-why{margin:-4px 0 20px}
.q-list{gap:10px}
.q-opt{padding:14px 16px;gap:14px}
.q-opt .tk-txt b{font-size:15.5px}
.q-ic.tk-ic{width:46px;height:46px;border-radius:15px;font-size:21px}
.q-ic .tk-check{width:20px;height:20px;font-size:10px}
.q-dot{flex:none;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 3px color-mix(in srgb,#fff 45%,transparent)}
.q-radio{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid color-mix(in srgb,var(--w-ink) 25%,transparent);transition:border .2s}
.q-opt.on .q-radio{border:7px solid var(--w-ink)}
.q-chips{display:flex;flex-wrap:wrap;gap:10px}
.q-chip{display:inline-flex;align-items:center;gap:7px;padding:11px 16px;border-radius:99px;border:1.5px solid color-mix(in srgb,var(--w-ink) 14%,transparent);background:var(--w-card);color:var(--w-ink);font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;transition:background .15s,color .15s,transform .15s}
.q-chip:active{transform:scale(.96)}
.q-chip:focus-visible{outline:2px solid var(--w-ink);outline-offset:2px}
.q-chip.on{background:var(--w-ink);border-color:var(--w-ink);color:var(--w-bg)}
.q-chip.off{opacity:.45}
.q-chip em{font-style:normal;font-size:11.5px;font-weight:700;opacity:.75}
.q-gloss{margin:16px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:12.5px;line-height:1.45}
.q-gloss:empty{display:none}
.q-gloss dt{font-weight:800;color:var(--w-ink)}.q-gloss dd{margin:0;color:var(--w-sub)}
.q-long{position:relative}
.q-long textarea{width:100%;min-height:140px;padding:16px 16px 30px;border-radius:18px;border:1.5px solid transparent;background:color-mix(in srgb,var(--w-ink) 6%,transparent);font:inherit;font-size:16px;line-height:1.5;color:var(--w-ink);resize:vertical;outline:0}
.q-long textarea:focus{border-color:color-mix(in srgb,var(--w-ink) 50%,transparent)}
.q-long span{position:absolute;right:14px;bottom:10px;font-size:11.5px;color:var(--w-sub)}
/* Option cards (Bumble-style): soft grey card, bold title, one quiet line, a round tick on the right; picked = ink outline */
.q-cards{display:flex;flex-direction:column;gap:12px}
.q-card{display:flex;align-items:center;gap:16px;width:100%;padding:18px 18px 18px 20px;border:1.5px solid transparent;border-radius:20px;background:color-mix(in srgb,var(--w-ink) 5%,transparent);
  color:var(--w-ink);font:inherit;text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.q-card > span{flex:1;display:flex;flex-direction:column;gap:4px}
.q-card b{font-size:16.5px;font-weight:800}
.q-card > span > span{font-size:14px;line-height:1.4;color:var(--w-sub)}
.q-card.on{background:var(--w-card);border-color:var(--w-ink)}
.q-tag{margin-left:6px;padding:2px 8px;border-radius:99px;vertical-align:2px;font-style:normal;font-size:11px;font-weight:800;background:color-mix(in srgb,var(--p-coral) 22%,transparent)}
.q-tick{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid color-mix(in srgb,var(--w-ink) 30%,transparent);display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s}
.q-tick::after{content:"";width:6px;height:11px;margin-top:-3px;border:solid var(--w-bg);border-width:0 2.5px 2.5px 0;rotate:45deg;scale:0;transition:scale .15s}
.q-card.on .q-tick{background:var(--w-ink);border-color:var(--w-ink)}.q-card.on .q-tick::after{scale:1}
.q-one .q-card.on .q-tick{background:none;border-width:8px}.q-one .q-tick::after{display:none}   /* pick one: radio dot instead of a tick */
/* "More about you": stacked sections of chips, split by a thin rule */
.q-sec{padding:20px 0;border-top:1px solid color-mix(in srgb,var(--w-ink) 9%,transparent)}.q-sec:first-of-type{border-top:0;padding-top:6px}
.q-sec.folded .q-more{display:none}
.q-fold{display:block;margin:14px auto 0;padding:6px 12px;border:0;background:none;font:inherit;font-size:14.5px;font-weight:800;color:var(--w-ink);cursor:pointer}
.q-sec h3{margin:0 0 12px;font-size:17px;font-weight:800;color:var(--w-ink)}
.q-hint{min-height:18px;margin:-6px 0 0;font-size:12.5px;color:var(--warn-ink,#9a5b13)}
.q-hint.q-hint-ok{color:var(--w-sub);font-weight:700}
/* A hint under chips, cards or a list sits clear of them (the -6px above is for text fields) */
.q-chips+.q-hint,.q-cards+.q-hint,.q-list+.q-hint{margin-top:14px;line-height:1.45}
/* Date of birth wheels: day · month · year snap to the band in the middle; rows fade out above and below */
.dob{position:relative;display:grid;grid-template-columns:.8fr 1fr 1.1fr;gap:4px;height:220px;margin-bottom:16px;padding:0 8px;border-radius:24px;background:var(--w-card);
  border:1.5px solid color-mix(in srgb,var(--w-ink) 10%,transparent)}
.dob-band{position:absolute;left:8px;right:8px;top:88px;height:44px;border-radius:14px;background:color-mix(in srgb,var(--w-ink) 7%,transparent);pointer-events:none}
.dob-col{position:relative;height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;padding:88px 0;outline:0;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 65%,transparent)}
.dob-col::-webkit-scrollbar{display:none}
.dob-col:focus-visible{box-shadow:inset 0 0 0 2px var(--w-ink);border-radius:14px}
.dob-row{display:flex;align-items:center;justify-content:center;width:100%;height:44px;scroll-snap-align:center;border:0;background:none;font:inherit;font-size:17px;font-weight:600;
  color:var(--w-sub);cursor:pointer;transition:color .15s,font-size .15s}
.dob-row.on{color:var(--w-ink);font-size:20px;font-weight:800}
.dob-unset .dob-row.on{color:var(--w-sub)}   /* nothing picked yet */
.q-foot{margin-top:auto;padding-top:24px}
.q-foot-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.q-skip{padding:8px 0;border:0;background:none;font:inherit;font-size:14px;font-weight:800;color:var(--w-sub);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.q-foot-r{margin-left:auto;display:flex;align-items:center;gap:16px}
.q-back{display:inline-flex;align-items:center;gap:2px;margin-left:-4px;padding:8px 4px;font-size:14px;font-weight:500;color:var(--w-sub);text-decoration:none}
.q-back svg{width:16px;height:16px}
.q-back:hover{color:var(--w-ink)}
.q-back:focus-visible{outline:2px solid var(--w-ink);outline-offset:2px;border-radius:8px}
.q-count{font-size:13px;font-weight:700;color:var(--w-sub)}
.q-kv a{margin-left:6px;font-size:12px;font-weight:800;color:var(--w-ink)}
.q-edits{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.q-edit{display:inline-flex;padding:8px 14px;border-radius:99px;border:1.5px solid color-mix(in srgb,var(--w-ink) 14%,transparent);background:var(--w-card);font-size:13px;font-weight:800;color:var(--w-ink);text-decoration:none}
.card > .q-edit{margin-top:4px}

/* ---------- Inner app (Discover, Explore, Chats, Bonds, Me, Forum and every screen behind them) ----------
   Same language as Welcome, sign-up and KYC: the welcome palette (navy ink, tinted cards, navy ↗ CTA, light and dark),
   logo + Manrope headline with an Instrument Serif accent. Each track keeps its welcome-slide accent:
   Lifestyle coral (slide 1), Business mint (slide 2), Lifestyle + Business butter (slide 3). */
.phone.w-app{--w-trk:var(--p-coral);--w-swash:var(--w-trk);background:var(--w-bg);color:var(--w-ink)}
.phone.w-app.theme-biz{--w-trk:var(--p-mint)}
.phone.w-app.theme-both{--w-trk:var(--p-butter)}
/* top bar */
/* tab bar: navy pill (lighter navy in dark mode), active tab in the track accent */
/* cards, lists and the rest pick up the tinted, shadow-free look of the set-up cards */
.w-app .btn.secondary{background:var(--card);color:var(--w-ink)}
.w-app .btn.small:not(.ghost):not(.secondary):not(.ok):not(.danger){box-shadow:none}
.w-app .btn-row .btn{justify-content:center}.w-app .btn-row .btn::after{content:none}
.w-app .pill{background:var(--card);color:var(--w-ink)}
.w-app .pill.ok{background:var(--ok-soft);color:color-mix(in srgb,var(--ok) 75%,var(--w-ink))}
.w-app .pill.warn,.w-app .pill.gold{background:var(--warn-soft);color:var(--w-ink)}
.w-app .pill.bad{background:var(--bad-soft);color:color-mix(in srgb,var(--bad) 75%,var(--w-ink))}
.w-app .badge-verified{color:color-mix(in srgb,var(--ok) 80%,var(--w-ink))}
.w-app .notice.warn{background:var(--warn-soft);color:var(--w-ink)}
.w-app .notice.bad{background:var(--bad-soft);color:var(--w-ink)}
.w-app .notice a{color:var(--w-ink);font-weight:800}
.w-app .feed-card,.w-app .next-card,.w-app .journey,.w-app .stat,.w-app .tree .node,.w-app .thumb{background:var(--card);border:1.5px solid transparent;box-shadow:none}
.w-app .feed-card{border-radius:26px}
.w-app .feed-card .photo{margin:6px 6px 0;border-radius:21px}
.w-app .feed-card .body{padding:12px 14px 14px}
.w-app .next-card,.w-app .journey{border-radius:20px}
.w-app .next-card .pill{background:var(--w-bg)}
.w-app .stepper-sub{background:color-mix(in srgb,var(--w-ink) 12%,transparent)}.w-app .stepper-sub i{background:var(--w-ink)}
.w-app .j-next{background:var(--w-bg)}.w-app .j-next b{color:var(--w-ink)}.w-app .j-next span{color:var(--w-sub)}
.w-app .j-next em{background:var(--w-cta);color:var(--w-cta-ink)}
.w-app .j-next.wait{background:var(--w-bg)}.w-app .j-next.wait b{color:var(--w-sub)}
.w-app .j i{background:var(--w-bg)}
.w-app .list-item{border-bottom-color:var(--line)}
.w-app .list-item .d,.w-app .chev,.w-app .stat span{color:var(--w-sub)}
.w-app .bubble{background:var(--card);border-color:transparent;box-shadow:none;color:var(--w-ink)}
.w-app .bubble.me{background:var(--w-cta);color:var(--w-cta-ink)}
.w-app .bubble.sys{background:transparent;color:var(--w-sub);border:1.5px dashed var(--line)}
.w-app .contract{background:var(--card);border:0}
.w-app .sig-pad{background:var(--card);border-color:color-mix(in srgb,var(--w-ink) 22%,transparent)}
.w-app .seg{background:var(--card)}.w-app .seg a{color:var(--w-sub)}.w-app .seg a.on{background:var(--w-cta);color:var(--w-cta-ink);box-shadow:none}
.w-app .sheet{background:var(--w-bg);color:var(--w-ink)}
.w-app .sheet-backdrop{background:color-mix(in srgb,var(--p-navy) 50%,transparent)}
.w-app .toast{background:var(--w-cta);color:var(--w-cta-ink)}
.w-app .avatar{color:#fff}

/* ---------- Native-app chrome (reference: Bumble / Hinge). Plain bold titles, line icons, flat tab bar ---------- */
/* status bar in the desktop phone frame (a real phone draws its own) */
.statusbar{position:absolute;top:0;left:0;right:0;height:44px;padding:0 26px 0 34px;display:flex;align-items:center;justify-content:space-between;z-index:6;pointer-events:none;color:#181F39;font:600 15px/1 -apple-system,'SF Pro Text',system-ui,sans-serif;letter-spacing:-.01em}
.statusbar span{display:flex;gap:6px;align-items:center}.statusbar svg{height:11.5px;width:auto;fill:currentColor}
:root[data-theme="dark"] .statusbar{color:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .statusbar{color:#fff}}
@media (max-width:820px){.statusbar{display:none}}
/* top bar */
.w-app .topbar{background:var(--w-bg);color:var(--w-ink);padding:50px 16px 8px 20px;min-height:0;gap:6px}
.w-app .topbar .title{flex:1;min-width:0;margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--w-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-app .topbar.tb-home{padding-bottom:12px}
.w-app .topbar.tb-home .title{font-size:30px;letter-spacing:-.03em}
.w-app .topbar .w-brand{flex:1}.w-app .topbar .w-logo{height:26px}
.w-app .topbar .back{width:32px;height:36px;margin-left:-8px;border:0;padding:0;background:none;box-shadow:none;color:var(--w-ink);display:inline-flex;align-items:center;justify-content:center}
.w-app .topbar .back .li{width:24px;height:24px}
.w-app .topbar .step{background:var(--card);color:var(--w-ink)}
.tb-acts{display:flex;gap:2px;margin-left:auto}
.tb-ic{position:relative;width:40px;height:40px;border:0;background:none;padding:0;border-radius:50%;color:var(--w-ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.tb-ic .li{width:25px;height:25px}
.lg-mark{display:inline-block;background:currentColor;-webkit-mask:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAEhUlEQVR4nO2dUUhUQRSGz64VGEZiaAWSDylB0VNSBIVCBEZC1EtRFEhB9BTUi1Avgb0URQ9CGAhhUJiBEEFCCD0lEhH4IERhYEgRFJVgGNWNA3Npu1x39/y7c+fe5nxw0N2dnTM7/53Lnpkzs0SKoiiKoiiKUowbRHS8aAklMdqI6KcxJQW8JKLAWL/rxvjO4QIxQlvnulE+sxgjyBPXjfKVqzFihLbDdeN8Y30RMdjeum6gbzwtIQjbSdeN9IV9ZYgRmpIAXwSCXFNF7HJJIEZoq1QUOzQAYnxWMewxBgiyRwWxQwcgxriKYY85QJAmFcQO5wAx+lQMO9QCYsyrGPYYAQTpVkHs0A6IMaFi2GMGEKRZBbHDGUCMKyqGHWoAMRZUDHsMAYIcBPycIKKchfb/V2wCxJisYF6MJyuVIkwBgrQAPfq44P0rVZF4jgFiIGk/nZE6Hqgg8fwSisHlET7G1LVZRfmXfmB08IiS0rtEXXyrVAwtgBhTQO/VlahTp1wMk4AgbYAgoyXq/KpDhOgQIMYg0HHby6z7gu+iLACCIMwK6l9BntIHiNED+Dkr9HGHPKQJEGMa8LMM8HOePGQc6KgtgJ+7Qh+vyUP2AmIMAX62An74Pd7xCeioHODnldDHbfKQi4AYpwE/PYAf71gNdNIM6CuJb2+Z5xHQUe2AnwGhDy/nsXYBYowAfloTmobJPJJIOTDGSXKVbJEux26Sh0gj5cCkj1Zji7SN9ZRMg0TKc6CvH0I/R8hDpJFyQES7AT/XhT741uYdSKQ8CvhpTigxIvNII+XArOpJmRD68HIj6ClAjF7AT7fQx3fyFKkYH0A/80I/B8hDbgGCdCSwwPWMPASJlHl3bRILXF4e2ySNlAOTZ2t7gcvLrQrSSBlNdu4U+nhDGaHaqfgcKS8XlOc8qHowFbRRUP45ET0saBvPHjB50wc1kcdL/SVTlh+H1JtJ0GFKGdJIma2riqmggWOTXCDW2QB8AD7vqtqpoIFDS9WxgtJIGf3GM5qCjg/SfqygNFJmu2wxFTRwaOhyc1WZT+iUhdkUdHg5xvsWM5UK2p3QAlfg0JzQmNApC7Up6OAgC7PJYwmdsjCcgg5GDImvYKSRcmDiFCk7U9CxmfgaHLdp0sYaxIsUdGwlxheUiHAKQRopS6PSo4Sxjao/RZSPPBd9HD4X93rhlEm0jsL/f5tNP+/JMnUJnbKgWIyUvUwmSAIkUuafIVIsIY2UeSpesQQSKfNilZKSVFAvswLTnArKiQ5KSlJBvUzvT3MqqJKiVFA9Tcdi1glytd8zv7bJ9epoiSdnNgqFu4TLYhAYHWpU+XkqcSOk1dfjJRywMboOH529JHDnq4LBt/iqp4KqUUV90FXsliVNBVUqh3+0bE3cLYuXWFWM5GkoPJ8rHCGcfPDOQWOUv/DgCMIRcr/gBcUNA+EI2W8OhVHcszZnIutwf4Tilumc+YnrRXMPi8uqyJd4HM26oCLvkZTJx/ipEV48eVMebdtSny9aptw6ipVh+yb4bIqiKIqiKIpCGeUPB4gfmdIGTx4AAAAASUVORK5CYII=) center/contain no-repeat;mask:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAEhUlEQVR4nO2dUUhUQRSGz64VGEZiaAWSDylB0VNSBIVCBEZC1EtRFEhB9BTUi1Avgb0URQ9CGAhhUJiBEEFCCD0lEhH4IERhYEgRFJVgGNWNA3Npu1x39/y7c+fe5nxw0N2dnTM7/53Lnpkzs0SKoiiKoiiKUowbRHS8aAklMdqI6KcxJQW8JKLAWL/rxvjO4QIxQlvnulE+sxgjyBPXjfKVqzFihLbDdeN8Y30RMdjeum6gbzwtIQjbSdeN9IV9ZYgRmpIAXwSCXFNF7HJJIEZoq1QUOzQAYnxWMewxBgiyRwWxQwcgxriKYY85QJAmFcQO5wAx+lQMO9QCYsyrGPYYAQTpVkHs0A6IMaFi2GMGEKRZBbHDGUCMKyqGHWoAMRZUDHsMAYIcBPycIKKchfb/V2wCxJisYF6MJyuVIkwBgrQAPfq44P0rVZF4jgFiIGk/nZE6Hqgg8fwSisHlET7G1LVZRfmXfmB08IiS0rtEXXyrVAwtgBhTQO/VlahTp1wMk4AgbYAgoyXq/KpDhOgQIMYg0HHby6z7gu+iLACCIMwK6l9BntIHiNED+Dkr9HGHPKQJEGMa8LMM8HOePGQc6KgtgJ+7Qh+vyUP2AmIMAX62An74Pd7xCeioHODnldDHbfKQi4AYpwE/PYAf71gNdNIM6CuJb2+Z5xHQUe2AnwGhDy/nsXYBYowAfloTmobJPJJIOTDGSXKVbJEux26Sh0gj5cCkj1Zji7SN9ZRMg0TKc6CvH0I/R8hDpJFyQES7AT/XhT741uYdSKQ8CvhpTigxIvNII+XArOpJmRD68HIj6ClAjF7AT7fQx3fyFKkYH0A/80I/B8hDbgGCdCSwwPWMPASJlHl3bRILXF4e2ySNlAOTZ2t7gcvLrQrSSBlNdu4U+nhDGaHaqfgcKS8XlOc8qHowFbRRUP45ET0saBvPHjB50wc1kcdL/SVTlh+H1JtJ0GFKGdJIma2riqmggWOTXCDW2QB8AD7vqtqpoIFDS9WxgtJIGf3GM5qCjg/SfqygNFJmu2wxFTRwaOhyc1WZT+iUhdkUdHg5xvsWM5UK2p3QAlfg0JzQmNApC7Up6OAgC7PJYwmdsjCcgg5GDImvYKSRcmDiFCk7U9CxmfgaHLdp0sYaxIsUdGwlxheUiHAKQRopS6PSo4Sxjao/RZSPPBd9HD4X93rhlEm0jsL/f5tNP+/JMnUJnbKgWIyUvUwmSAIkUuafIVIsIY2UeSpesQQSKfNilZKSVFAvswLTnArKiQ5KSlJBvUzvT3MqqJKiVFA9Tcdi1glytd8zv7bJ9epoiSdnNgqFu4TLYhAYHWpU+XkqcSOk1dfjJRywMboOH529JHDnq4LBt/iqp4KqUUV90FXsliVNBVUqh3+0bE3cLYuXWFWM5GkoPJ8rHCGcfPDOQWOUv/DgCMIRcr/gBcUNA+EI2W8OhVHcszZnIutwf4Tilumc+YnrRXMPi8uqyJd4HM26oCLvkZTJx/ipEV48eVMebdtSny9aptw6ipVh+yb4bIqiKIqiKIpCGeUPB4gfmdIGTx4AAAAASUVORK5CYII=) center/contain no-repeat}
.tb-ic i{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:#E5484D;box-shadow:0 0 0 2px var(--w-bg)}
.w-app .screen{padding:4px 16px 20px}
/* tab bar: flat, hairline on top, line icons; active = ink + filled weight */
.w-app .tabbar{margin:0;border-radius:0;background:var(--w-bg);border-top:1px solid color-mix(in srgb,var(--w-ink) 9%,transparent);box-shadow:none;padding:6px 4px 22px}
.w-app .tabbar a{flex:1;border-radius:0;padding:4px 0;gap:3px;font-size:10.5px;font-weight:600;color:color-mix(in srgb,var(--w-ink) 52%,transparent)}
.w-app .tabbar a .ic{height:26px;display:flex;align-items:center}
.w-app .tabbar a .li{width:25px;height:25px}
.w-app .tabbar a.active{background:none;color:var(--w-ink);font-weight:800}
.w-app .tabbar a.active .li{stroke-width:2.3}
.w-app .tabbar .dot{top:2px;right:calc(50% - 16px);width:8px;height:8px;background:#E5484D;box-shadow:0 0 0 2px var(--w-bg)}
.tb-me{width:25px;height:25px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;letter-spacing:.02em;color:#fff;background:linear-gradient(160deg,#f6c9c0,#c98aa8)}
.w-app .tabbar a.active .tb-me{box-shadow:0 0 0 2px var(--w-bg),0 0 0 3.5px var(--w-ink)}
@media (max-width:820px){.w-app .topbar{padding-top:calc(env(safe-area-inset-top) + 12px)}.w-app .tabbar{padding-bottom:calc(env(safe-area-inset-bottom) + 8px)}}

/* ---------- Discover feed: one person per screen ---------- */
.w-app .screen:has(.dc){container-type:size;scroll-snap-type:y mandatory;padding-top:0}
.dc{position:relative;height:calc(100cqh - 14px);min-height:420px;margin-bottom:14px;border-radius:18px;overflow:hidden;background:#2a2f45;cursor:pointer;scroll-snap-align:start;scroll-margin-top:0;isolation:isolate}
.dc-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;z-index:-1}
.dc::after{content:"";position:absolute;inset:auto 0 0;height:62%;background:linear-gradient(to top,rgba(10,12,22,.88),rgba(10,12,22,.55) 45%,rgba(10,12,22,0));z-index:-1}
.dc-top{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:6px;align-items:center}
.dc-tag{padding:5px 10px;border-radius:8px;background:rgba(255,255,255,.92);color:#181F39;font-size:11.5px;font-weight:800}
.dc-top .pill{background:rgba(24,31,57,.75);color:#fff}
.dc-info{position:absolute;left:18px;right:18px;bottom:84px;color:#fff}
.dc-info h2{display:flex;align-items:center;gap:7px;margin:0 0 6px;font-size:28px;font-weight:800;letter-spacing:-.02em;color:#fff}
.vtick{width:22px;height:22px;fill:#3B82F6;flex:0 0 auto}
.dc-info p{margin:0 0 10px;font-size:14.5px;line-height:1.4;color:rgba(255,255,255,.9);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* pay or salary on its own line under the headline */
.dc-info p.dc-pay{margin:-6px 0 10px;font-size:15px;font-weight:600;color:#fff;-webkit-line-clamp:1}
.dc-meta{display:flex;flex-wrap:wrap;gap:6px}
.dc-meta span{padding:4px 9px;border-radius:99px;background:rgba(255,255,255,.16);backdrop-filter:blur(8px);font-size:12px;font-weight:700}
.dc-meta .dc-warn{background:rgba(229,72,77,.85)}
.dc-acts{position:absolute;left:18px;right:18px;bottom:18px;display:flex;gap:10px}
.dc-pass{width:52px;height:52px;flex:0 0 auto;border-radius:50%;border:0;background:rgba(255,255,255,.95);color:#181F39;font-size:20px;font-weight:700;cursor:pointer}
.dc-poke{flex:1;height:52px;border-radius:99px;display:flex;align-items:center;justify-content:center;gap:8px;background:#FEDA90;color:#181F39;font-weight:800;font-size:16px;text-decoration:none}
.theme-life .dc-poke{background:#FDA597}
.dc-poke .ci{width:22px;height:22px}
.dc-filter{display:inline-flex;gap:8px;align-items:center;margin:0 0 10px;padding:7px 12px;border:0;border-radius:99px;background:var(--w-cta);color:var(--w-cta-ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.dc-end{scroll-snap-align:end;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:40px 18px 30px;color:var(--w-sub);font-size:13.5px;line-height:1.45}
.dc-end b{font-size:17px;color:var(--w-ink)}
.dc-end .btn{margin-top:6px}
/* profile photo */
.feed-card .photo.has-img{overflow:hidden}.feed-card .photo.has-img img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
/* Me */
.me-head{display:flex;gap:16px;align-items:center;padding:6px 0 18px}
.me-head .avatar{width:76px;height:76px;font-size:26px}
.me-head h2{display:flex;align-items:center;gap:6px;margin:0 0 2px;font-size:22px}
.me-head p{margin:0 0 8px;font-size:13px;color:var(--w-sub)}
.me-edit{display:inline-block;padding:6px 12px;border-radius:99px;border:1.5px solid var(--w-ink);color:var(--w-ink);font-size:12.5px;font-weight:800;text-decoration:none}
.me-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid color-mix(in srgb,var(--w-ink) 10%,transparent);border-radius:16px;margin-bottom:12px}
.me-stats a{display:flex;flex-direction:column;align-items:center;padding:12px 4px;text-decoration:none;color:var(--w-ink)}
.me-stats a+a{border-left:1px solid color-mix(in srgb,var(--w-ink) 10%,transparent)}
.me-stats b{font-size:18px}.me-stats span{font-size:11.5px;color:var(--w-sub)}
.me-plan{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center;padding:14px 16px;border-radius:16px;background:#FEDA90;color:#181F39;text-decoration:none;margin-bottom:8px}
.me-plan b{font-size:15px}.me-plan span{grid-column:1;font-size:12.5px;opacity:.8}
.me-plan em{grid-row:1/3;grid-column:2;font-style:normal;font-size:12.5px;font-weight:800;padding:8px 12px;border-radius:99px;background:#181F39;color:#fff}
.me-h{margin:18px 0 4px;font-size:13px;font-weight:800;color:var(--w-sub)}
.me-row{display:flex;align-items:center;gap:14px;padding:13px 0;color:var(--w-ink);text-decoration:none;font-size:15px;font-weight:600;border-bottom:1px solid color-mix(in srgb,var(--w-ink) 8%,transparent)}
.me-list .me-row:last-child{border-bottom:0}
.me-row .li{width:22px;height:22px;flex:0 0 auto}.me-row .li.chev{width:16px;height:16px;color:var(--w-sub)}
.me-row em{font-style:normal;font-size:13px;font-weight:500;color:var(--w-sub)}
.me-row .grow{flex:1;min-width:0}
.tb-word{flex:1;font-size:28px;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--w-ink)}

/* ---------- Explore, Chats, Bonds (native rows, photo avatars, line-icon empty states) ---------- */
.pav{width:52px;height:52px;flex:0 0 auto;border-radius:50%;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;font-weight:800;color:#fff;background:linear-gradient(160deg,#f6c9c0,#c98aa8)}
.pav img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.crow{display:flex;align-items:center;gap:14px;padding:12px 0;text-decoration:none;color:var(--w-ink);border-bottom:1px solid color-mix(in srgb,var(--w-ink) 8%,transparent);cursor:pointer}
.crow .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.crow-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.crow-top b{display:inline-flex;align-items:center;gap:5px;font-size:15.5px}.crow-top .vtick{width:17px;height:17px}
.crow-msg{font-size:13.5px;color:var(--w-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.crow .li.chev{width:16px;height:16px;color:var(--w-sub);flex:0 0 auto}
/* Chats: new-connection queue (Bumble's match queue) and "Your move" rows */
.mq-n{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:999px;font-size:12px;background:var(--p-coral);color:var(--p-navy);vertical-align:2px}
.mq-row{display:flex;gap:14px;margin:0 -16px 6px;padding:4px 16px 10px;overflow-x:auto;scrollbar-width:none}.mq-row::-webkit-scrollbar{display:none}
.mq{flex:0 0 auto;width:70px;display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:var(--w-ink)}
.mq-ring{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:conic-gradient(var(--p-coral) var(--left),color-mix(in srgb,var(--w-ink) 12%,transparent) 0)}
.mq-ring .pav{width:60px;height:60px;border:2.5px solid var(--w-bg)}
.mq.wait .mq-ring{background:conic-gradient(color-mix(in srgb,var(--w-ink) 35%,transparent) var(--left),color-mix(in srgb,var(--w-ink) 10%,transparent) 0)}
.mq.wait .pav{opacity:.75}
.mq b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600}
.mq em{font-style:normal;font-size:11px;font-weight:600;color:var(--w-sub)}.mq.mine em{color:var(--w-ink)}
.ym-tag{flex:0 0 auto;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--p-coral);color:var(--p-navy)}
.crow.ym .crow-msg b{color:var(--w-ink);font-weight:600}
.tag{padding:3px 8px;border-radius:99px;font-size:11.5px;font-weight:700;background:var(--card);color:var(--w-ink)}
.sec-h{display:flex;align-items:center;gap:8px;margin:14px 0 2px;font-size:13px;font-weight:800;color:var(--w-sub)}
.sec-h em{font-style:normal;padding:1px 7px;border-radius:99px;background:var(--card);color:var(--w-ink);font-size:11.5px}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:56px 20px 36px;color:var(--w-sub);font-size:14px;line-height:1.45}
.empty .empty-ic{width:52px;height:52px;stroke-width:1.4;color:var(--w-ink);margin-bottom:6px}
.empty b{font-size:20px;letter-spacing:-.02em;color:var(--w-ink)}
.empty .btn{margin-top:10px;width:auto}
.foot-note{display:flex;align-items:center;justify-content:center;gap:6px;margin:22px 0 0;font-size:12px;color:var(--w-sub);text-align:center}
.foot-note .li{width:15px;height:15px;flex:0 0 auto}
/* Explore */
.utabs{display:flex;gap:22px;margin:0 0 18px;border-bottom:1px solid color-mix(in srgb,var(--w-ink) 9%,transparent)}
.utabs a{padding:8px 0 10px;margin-bottom:-1px;font-size:15px;font-weight:700;text-decoration:none;color:var(--w-sub);border-bottom:2.5px solid transparent}
.utabs a.on{color:var(--w-ink);border-bottom-color:var(--w-ink)}
.ex-h{margin:0 0 4px;font-size:22px}
.ex-sub{margin:0 0 14px;font-size:13.5px;line-height:1.45;color:var(--w-sub)}
.ichips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.ichip{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:99px;border:1.5px solid color-mix(in srgb,var(--w-ink) 22%,transparent);background:none;color:var(--w-ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.ichip.on{background:var(--w-cta);border-color:var(--w-cta);color:var(--w-cta-ink)}
.ichip i{font-style:normal;font-size:12px}
.svc-ic{width:22px;text-align:center;font-size:18px}
.foot-note{display:block;padding:0 12px}.foot-note .li{display:inline-block;vertical-align:-2px;margin-right:4px}

/* ---------- Me: centred hero with a completion ring and stamp, trust tiles, plan strip, comparison ---------- */
.pf-hero{display:flex;align-items:center;gap:13px;margin-top:-4px;padding:0 0 22px 1px}
.pf-hero .grow{flex:1;min-width:0}
.pf-av{flex:0 0 auto;width:63px;height:63px;display:block;text-decoration:none}
.pf-av .avatar{width:63px;height:63px;font-size:21px;overflow:hidden}
.pf-av .avatar img,.tb-me img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.pf-hero h2{display:flex;align-items:center;gap:6px;margin:0 0 7px;color:var(--w-ink);font-size:19.3px;font-weight:600;line-height:1.2;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-hero h2 .vtick{width:17px;height:17px}
.pf-next{position:relative;display:inline-block;padding:3px 10px;border:1.3px solid var(--w-ink);border-radius:99px;color:var(--w-ink);font-size:12.3px;font-weight:400;line-height:17px;letter-spacing:-.005em;text-decoration:none}
.pf-next.due::after{content:"";position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%;background:#d7321c}
.pf-meta{display:block;border:0;padding:0;margin-top:-3px}   /* Me: track(s) · plan under the name, same text as the pill, sitting close under the name */
.pf-tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pf-tile{display:flex;align-items:center;gap:10px;min-width:0;padding:11px 12px;border-radius:18px;background:var(--w-card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent);text-decoration:none;color:var(--w-ink)}
.pf-tile .ci{flex:none;width:36px;height:36px;margin:0}
.pf-tile div{min-width:0;display:flex;flex-direction:column}
.pf-tile b{font-size:14.5px;font-weight:600;line-height:1.25}
.pf-tile span{font-size:12px;line-height:1.3;color:var(--w-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf{font-family:"DM Sans",Manrope,sans-serif;letter-spacing:-.01em}
/* Light mode: neutral near-black ink on the Me screen instead of navy, like the reference */
:root[data-theme="light"] .phone.w-app .pf,:root[data-theme="light"] .phone.w-app .tb-pf,:root[data-theme="light"] .phone.w-app .st{--w-ink:#1d1d1f;--w-sub:#6b6b70}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .phone.w-app .pf,:root:not([data-theme="dark"]) .phone.w-app .tb-pf,:root:not([data-theme="dark"]) .phone.w-app .st{--w-ink:#1d1d1f;--w-sub:#6b6b70}}
.w-app .topbar.tb-pf .title{font-family:"DM Sans",Manrope,sans-serif;font-size:18px;font-weight:600;letter-spacing:-.015em}
.w-app .topbar.tb-home.tb-pf .title{font-size:28px;font-weight:700;letter-spacing:-.02em}
.pf-h{margin:28px 0 12px;color:var(--w-ink);font-size:18px;font-weight:600;letter-spacing:-.02em}
.pf-plans{display:flex;gap:10px;margin:22px -16px 0;padding:2px 16px 6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.pf-plans::-webkit-scrollbar{display:none}
.pf-plan{flex:0 0 84%;scroll-snap-align:start;scroll-margin-left:16px;display:flex;flex-direction:column;padding:12px 14px;border-radius:18px;color:var(--p-navy);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(24,31,57,.12)}
.pf-plan.p-butter{--pc:var(--p-butter);background:var(--p-butter)}.pf-plan.p-coral{--pc:var(--p-coral);background:var(--p-coral)}.pf-plan.p-mint{--pc:var(--p-mint);background:var(--p-mint)}
.pf-plan.on{box-shadow:inset 0 0 0 2px var(--p-navy)}
.pf-plan-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.pf-badge{padding:3px 10px 4px;border-radius:7px;background:var(--p-navy);color:var(--pc);font-size:16px;font-weight:800;font-style:italic;letter-spacing:-.01em;text-transform:uppercase;line-height:1.1}
.pf-tag{padding:3px 9px;border-radius:99px;border:1px solid var(--p-navy);font-size:11.5px;font-weight:500;white-space:nowrap}
.pf-plan p{margin:0 0 10px;font-size:13.5px;line-height:1.35}
.pf-plan-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.pf-price{display:flex;align-items:baseline;gap:5px}.pf-price b{font-size:20px;font-weight:700;letter-spacing:-.02em}.pf-price span{font-size:13px;opacity:.7}
.pf-go{display:block;padding:8px 16px;border-radius:99px;background:var(--p-navy);color:#fff;font-size:13.5px;font-weight:500;text-align:center}
.pf .me-row{gap:14px;padding:14px 0;font-size:15px;font-weight:500;border-bottom:1.5px dotted color-mix(in srgb,var(--w-ink) 18%,transparent)}
.pf .me-row .li{width:21px;height:21px;stroke-width:1.6}
.pf .me-row em{font-size:13.5px;font-weight:400}
/* Me: below the plans, plain dotted rows under section headings, same as the Business and Lifestyle profile pages.
   The Help rows are buttons, so they drop the button chrome but keep the dotted divider. */
.pf-me button.me-row{width:100%;border:0;border-bottom:1.5px dotted color-mix(in srgb,var(--w-ink) 18%,transparent);background:none;font:inherit;font-size:15px;font-weight:500;text-align:left;color:var(--w-ink);cursor:pointer}
.pf-me .me-list button.me-row:last-child{border-bottom:0}
.pf-out:active{background:color-mix(in srgb,var(--w-ink) 5%,var(--w-card))}
/* Inner screens opened from Me (Notifications, Moderation, Continue in the app, Bonds): rows with a title and a grey line under it */
.nt-row{align-items:flex-start;cursor:default}
.nt-row .grow{display:flex;flex-direction:column;gap:3px}
.nt-row b{font-size:15px;font-weight:500}
.nt-row small{font-size:13.5px;line-height:1.4;color:var(--w-sub)}
.nt-row em{white-space:nowrap}
.nt-row > .li:first-child{margin-top:1px}
.pf .pf-h.nt-first{margin-top:6px}
.nt-none{margin:0;font-size:13.5px;color:var(--w-sub)}
.nt-act{flex:none;padding:6px 14px;border:1.3px solid var(--w-ink);border-radius:99px;background:none;color:var(--w-ink);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer}
.nt-go{margin-top:26px}
.pf .crow{border-bottom:1.5px dotted color-mix(in srgb,var(--w-ink) 18%,transparent)}
.pf .crow:last-child{border-bottom:0}
/* Editing one profile answer (Lifestyle, Business, Declaration): Me's frame. The question is the title bar; the "why"
   line is grey 13.5px; Save is a plain dark DM Sans button pinned to the bottom, without the sign-up arrow and shadow */
.qe{display:flex;flex-direction:column;min-height:100%;padding-top:2px}
.qe .qe-h{margin:4px 0 6px;color:var(--w-ink);font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
.qe .q-why{margin:0 0 18px;font-size:13.5px;line-height:1.4;color:var(--w-sub)}
.qe .q-eyebrow{display:none}
.qe .q-eyebrow.q-part{display:block;margin:6px 0 0;font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--w-sub)}   /* Job / Service declaration · step */
.qe .au-input input{font-weight:500}
.qe .q-next{justify-content:center;height:52px;border:0;border-radius:18px;background:var(--p-navy);color:#fff;box-shadow:none;font-family:inherit;font-size:15px;font-weight:500;cursor:pointer}
.qe .q-next b{display:none}
.qe .q-skip{font-family:inherit;font-weight:500}
/* Sign up in Me's frame: DM Sans labels and helper lines in Me's sizes, Sign in link in ink */
.su .au-label{margin:0 0 6px;font-size:13.5px;font-weight:600}
.su .au-cc{font-weight:500}
.su .au-note{margin:-2px 0 18px;font-size:13.5px;line-height:1.4}
.su .au-legal{margin-top:14px;font-size:12.5px}
.su .au-legal a,.su .au-foot a{color:var(--w-ink);font-weight:600}
.su .au-foot{margin:auto 0 8px;padding-top:18px;font-size:13.5px;text-align:center;color:var(--w-sub)}
.su .q-why b{font-weight:600;color:var(--w-ink)}
.su .q-why a,.su .au-resend a{color:var(--w-ink);font-weight:600}
.su .au-otp input{font-weight:600}
.su .au-resend{margin:0 0 18px;font-size:13.5px}
.su .au-state.au-left{margin:4px 0 12px}.su .au-state.au-left svg{width:36px;height:36px}
.su .au-oauth{margin:4px 0 0;border-radius:18px;background:var(--w-card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent)}
.su .au-oauth-h span{font-weight:600}
.su .au-acct{border-top-style:dotted;border-top-width:1.5px}
.su .au-acct .au-av{font-weight:600}
.su .au-acct b{font-weight:600}
.su .au-oauth-f a{font-weight:600}
/* Sign in in Me's frame: grey text links, outlined Apple / Google buttons like Log out, a quiet prototype box, left-aligned state tiles */
.su .au-links{margin-top:14px;font-size:13.5px}
.su .au-links a{font-weight:500}
.su .au-or{margin:24px 0 12px;font-size:13px}
.su .au-soc{height:52px;background:var(--w-card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent);font-size:15px;font-weight:500}
.su .au-proto{border-radius:18px;font-size:13px}
.su .au-proto b,.su .au-proto a{font-weight:600}
.su .au-chips button{font-family:inherit;font-weight:500}
.su .au-state.au-left .ci{width:56px;height:56px}
.su .au-text{font-size:15px;font-weight:500}
.su .au-note{line-height:1.4}
.su .au-primary + .au-note{margin:14px 0 0}
.su .au-card{font-size:13.5px}
.su .au-card .kv b{font-weight:600}
.su .au-steps li{font-size:12px;font-weight:500}
/* Choose your track in Me's frame: cards outlined like Me's tiles, a 1.5px ink ring when picked, Me's type sizes */
.su .tk-list{gap:10px;margin-top:4px}
.su .tk{gap:14px;padding:14px;border:0;border-radius:18px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent)}
.su .tk:hover{transform:none}
.su .tk.on{box-shadow:inset 0 0 0 1.5px var(--w-ink)}
.su .tk-ic{width:48px;height:48px;border-radius:16px;font-size:22px}
.su .tk-txt b{font-size:15px;font-weight:600}
.su .tk-txt span{font-size:13px;line-height:1.4}
.su .tk-check{font-weight:700}
/* Consent in Me's frame: the set-up step bar, then Privacy-settings rows (needed item marked, optional ones toggle) */
.su .au-onb{margin:0 0 18px}
.su .au-onb li{font-size:12px;font-weight:500}
.cs .cs-list{padding-bottom:0}
.cs .cs-list .st-row:last-child{border-bottom:0}
.cs .cs-need{flex:none;margin-top:2px;font-style:normal;font-size:13px;font-weight:500;color:var(--w-sub)}
.cs .cs-opt{margin-left:4px;font-size:12.5px;font-weight:400;color:var(--w-sub)}
.cs .cs-note{margin:14px 0 0;font-size:13px}
/* Set-up screens (KYC, declaration, business, hub) in Me's frame: DM Sans weights, plain navy buttons, outlined cards and options */
.su b,.su strong{font-weight:600}
.su .qe-h + .muted,.su .qe-h + p.q-why{margin:0 0 18px;font-size:13.5px;line-height:1.4;color:var(--w-sub)}
.su .muted{font-size:13.5px;line-height:1.4}
.su .btn{height:52px;border-radius:18px;font-size:15px;font-weight:500;justify-content:center;box-shadow:none!important}
.su .btn::after{content:none!important}
.su .btn:not(.ghost):not(.small):not(.ok):not(.danger){background:var(--p-navy);color:#fff}
.su .btn.ghost{background:var(--w-card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent)!important}
.su .btn.small{height:auto;padding:7px 14px;border-radius:99px;font-size:13.5px}
.su .btn.small:not(.ghost){background:none!important;color:var(--w-ink)!important;box-shadow:inset 0 0 0 1.3px var(--w-ink)!important}
.su .btn.ok,.su .btn.danger{font-weight:500}
.su .card,.su .tier,.su .au-card{background:var(--w-card);border:0;border-radius:18px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent)}
.su .tier.selected{box-shadow:inset 0 0 0 1.5px var(--w-ink)}
.su .notice{border-radius:18px;font-size:13px;line-height:1.4}
.su .field label{font-size:13.5px;font-weight:600}
.su .input,.su textarea{font-weight:400}
.su .q-eyebrow{font-weight:600;letter-spacing:.02em}
.su .q-card{padding:14px 16px;border:0;border-radius:18px;background:var(--w-card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent)}
.su .q-card.on{box-shadow:inset 0 0 0 1.5px var(--w-ink)}
.su .q-card > span > span{font-size:13px}
.su .q-cards{gap:10px}
.su .q-card b,.su .q-opt .tk-txt b{font-size:15px;font-weight:600}
.su .q-chip{font-weight:500}
.su .q-skip,.su .q-count,.su .q-fold{font-family:inherit;font-weight:500}
.su .q-sec h3{font-size:15px;font-weight:600}
.su .au-input input,.su .q-long textarea{font-weight:500}
.su .dob-col{font-weight:500}
/* Option cards (track, questions, ID picker, role): white, a thin outline, a 1.5px ink ring when picked; the icon still tilts */
.su .tk,.su .kid,.su .choice{background:var(--w-card)!important;border:0!important;border-radius:18px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent)!important}
.su .tk.on,.su .kid.on,.su .choice.selected{box-shadow:inset 0 0 0 1.5px var(--w-ink)!important}
.su .kid-txt b{font-size:15px;font-weight:600}
.su .kid-txt b em{font-weight:600}
.su .kid-txt span{font-size:13px}
.su .kid-sec{font-size:12px;font-weight:600;letter-spacing:.06em}
.su .choice .t{font-size:15px;font-weight:600}
.su .choice .d{font-size:13px;line-height:1.4}
.su .perm-art .ci{width:64px;height:64px}
.su .kid-cap,.su .kid-tips span,.su .kid-no{font-weight:600}
/* Set-up hub: Me's outlined rows */
.su .au-setup{gap:10px}
.su .au-setup li{border:0;border-radius:18px;background:var(--w-card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent)}
.su .au-setup li b{font-size:15px}
.su .au-setup li span{font-size:13px}
.su .au-lock{border-radius:18px}
.su .au-lock b{font-weight:600}
.pf-out{display:block;width:100%;height:52px;margin-top:26px;border:0;border-radius:18px;background:var(--w-card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent);color:var(--w-ink);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
/* Plans: a horizontal strip of plan cards (same pastel cards as Me), each listing what it includes; sticky CTA */
.ps{display:flex;flex-direction:column;min-height:100%}
.ps-title{margin:14px 0 6px;color:var(--w-ink);font-size:24px;font-weight:600;letter-spacing:-.02em}
.ps-sub{margin:2px 0 14px;font-size:14px;line-height:1.4;color:var(--w-sub)}
.ps-swipe{display:flex;gap:10px;margin:0 -16px;padding:2px 16px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.ps-swipe::-webkit-scrollbar{display:none}
.ps-card{flex:0 0 80%;scroll-snap-align:start;scroll-margin-left:16px;display:flex;flex-direction:column;padding:16px;border-radius:20px;color:var(--p-navy);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(24,31,57,.12);transition:box-shadow .15s}
.ps-card.p-butter{--pc:var(--p-butter);background:var(--p-butter)}.ps-card.p-coral{--pc:var(--p-coral);background:var(--p-coral)}.ps-card.p-mint{--pc:var(--p-mint);background:var(--p-mint)}
.ps-card.p-plain{--pc:#fff;background:var(--w-card);color:var(--w-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent)}
.ps-card.p-plain .pf-badge{background:var(--w-ink);color:var(--w-card,#fff)}
.ps-card.p-navy{--pc:var(--p-butter);background:var(--p-navy);color:#fff}
.ps-card.p-navy .pf-badge{background:var(--p-butter);color:var(--p-navy)}
.ps-card .pf-tag{border-color:currentColor}
.ps-card.on{box-shadow:inset 0 0 0 2px var(--w-ink)}.ps-card.p-navy.on{box-shadow:inset 0 0 0 2px var(--p-butter)}
.ps-card .pf-plan-top{margin-bottom:12px}
.ps-hint{margin-top:2px;font-size:13px;opacity:.75}
.ps-desc{margin:0 0 14px;font-size:14px;line-height:1.4}
.ps-card .pf-price b{font-size:26px}
.ps-cmp{margin:0}
.ps .ps-swipe + .pf-h{margin-top:22px}
.ps-cmp-r{display:grid;grid-template-columns:1fr 62px 62px 62px;align-items:center;gap:4px;padding:11px 2px;border-bottom:1.5px dotted color-mix(in srgb,var(--w-ink) 16%,transparent);font-size:14px;color:var(--w-ink)}
.ps-cmp-r:last-child{border-bottom:0}
.ps-cmp-h{padding:0 2px 8px;align-items:end}
.ps-cmp-h b{font-size:11.5px;font-weight:500;line-height:1.2;text-align:center;color:var(--w-sub);transition:color .15s}
.ps-cmp-r i{display:flex;justify-content:center;font-style:normal;font-size:14px;font-weight:600;color:color-mix(in srgb,var(--w-ink) 28%,transparent);transition:color .15s}
.ps-cmp-r .li{width:17px;height:17px;stroke-width:2}
.ps-cmp[data-tier="0"] .c0,.ps-cmp[data-tier="1"] .c1,.ps-cmp[data-tier="2"] .c2{color:var(--w-ink)}
.ps-cmp-h b.c0,.ps-cmp-h b.c1,.ps-cmp-h b.c2{padding:4px 0}
.ps-cmp[data-tier="0"] .ps-cmp-h .c0,.ps-cmp[data-tier="1"] .ps-cmp-h .c1,.ps-cmp[data-tier="2"] .ps-cmp-h .c2{font-weight:700}
.ps-fine{margin:16px 2px 0;font-size:12px;line-height:1.45;color:var(--w-sub)}
.ps-cta{position:sticky;bottom:0;margin:auto -16px -20px;padding:14px 16px 18px;background:linear-gradient(to bottom,transparent,var(--w-bg) 22%)}
.ps-cta .w-go{width:100%;justify-content:center;border:0;font-family:inherit;cursor:pointer}
.ps-cta .w-go:disabled{opacity:.45}
.ps-cta .q-skip{display:block;margin:10px auto 0}
/* Lifestyle profile (Bumble-style edit list): section subtitle, chip and bio cards, value rows */
.lp .pf-h{margin-bottom:4px}
.lp > .pf-h:first-child{margin-top:6px}
.lp-sub{margin:0 0 12px;font-size:13.5px;line-height:1.4;color:var(--w-sub)}
.lp .me-row em{max-width:48%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:right}
.lp .me-row em.lp-add{color:var(--w-ink);font-weight:500}
.lp .me-row.lp-fixed em{margin-right:30px}
.lp-card{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 16px;border:1.5px solid color-mix(in srgb,var(--w-ink) 12%,transparent);border-radius:18px;color:var(--w-ink);text-decoration:none}
.lp-card .li{width:18px;height:18px;flex:0 0 auto;color:var(--w-sub)}
.lp-bio{align-items:flex-start;min-height:72px;font-size:15px;line-height:1.45}
.lp-bio span{flex:1}.lp-ph{color:var(--w-sub)}
.lp-foot{margin:26px 4px 8px;font-size:12.5px;line-height:1.5;text-align:center;color:var(--w-sub)}

/* ---------- Settings: grouped panels on a soft tint, tinted round icons, toggles with one plain line ---------- */
/* Settings sub-screens: drawn like Me and the profile pages — plain dotted rows under 18px section headings */
.st{padding-bottom:10px;font-family:"DM Sans",Manrope,sans-serif;letter-spacing:-.01em;color:var(--w-ink)}
.st-h{margin:28px 0 12px;color:var(--w-ink);font-size:18px;font-weight:600;letter-spacing:-.02em}
.st > .st-h:first-child{margin-top:6px}
.st-g{background:none}
.st-row{display:flex;align-items:center;gap:14px;width:100%;padding:14px 0;border:0;border-bottom:1.5px dotted color-mix(in srgb,var(--w-ink) 18%,transparent);background:none;font:inherit;text-align:left;color:var(--w-ink);text-decoration:none;cursor:pointer}
.st-g > .st-row:last-child{border-bottom:0}
.st-row .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.st-row b{font-size:15px;font-weight:500}
.st-row small{font-size:13.5px;line-height:1.4;color:var(--w-sub)}
.st-row em{font-style:normal;font-size:13.5px;color:var(--w-sub);white-space:nowrap}
.st-row .li.chev{width:16px;height:16px;flex:0 0 auto;color:var(--w-sub)}
.st-tog{cursor:default;align-items:flex-start}.st-tog .toggle{margin-top:2px;border:0;padding:0}
.st-tog .toggle.on{background:var(--w-ink)}
.st-ic{flex:0 0 auto;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;font-style:normal;color:var(--w-ink);background:none}
.st-ic .li{width:21px;height:21px;stroke-width:1.6}
.st-tog .st-ic{margin-top:0}
.st-pav{width:36px;height:36px;font-size:13px}
.st-pick .li{width:20px;height:20px;stroke-width:2.2;color:var(--w-ink)}.st-pick.on b{font-weight:600}
.st-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:52px;margin-top:10px;border:0;border-radius:18px;background:var(--w-card,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent);color:var(--w-ink);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
.st > .st-g + .st-btn,.st > .st-note + .st-btn{margin-top:22px}
.st-btn .li{display:none}
.st-btn.bad{color:#d7321c}
.st-btn:active{background:color-mix(in srgb,var(--w-ink) 5%,var(--w-card))}
.st-foot{display:flex;flex-direction:column;align-items:center;gap:4px;margin:30px 0 4px}
.st-foot .w-word{font-size:26px}.st-foot .w-serif{font-size:17px;color:var(--w-sub)}.st-foot small{margin-top:4px;font-size:11.5px;color:var(--w-sub)}
.st-note{margin:12px 8px 0;font-size:12px;line-height:1.45;text-align:center;color:var(--w-sub)}.st-note.left{text-align:left;font-size:13px}

/* Funnel questions: who it is with, a segmented bar, the question, why we ask, option cards, one quiet note */
.fn-with{display:flex;align-items:center;gap:12px;margin:4px 0 16px}
.fn-with img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.fn-with div{display:flex;flex-direction:column;gap:2px}
.fn-with b{font-size:15px;font-weight:800;color:var(--w-ink)}
.fn-with span{font-size:13px;color:var(--w-sub)}
.fn-bar{display:flex;gap:6px;margin-bottom:28px}
.fn-bar i{flex:1;height:4px;border-radius:99px;background:color-mix(in srgb,var(--w-ink) 12%,transparent)}
.fn-bar i.done,.fn-bar i.now{background:var(--w-ink)}
.fn-bar i.now{opacity:.45}
.fn-q{margin:0 0 8px;font-size:28px;line-height:1.15;font-weight:800;letter-spacing:-.01em;color:var(--w-ink)}
.fn-why{margin:0 0 24px;font-size:15px;line-height:1.45;color:var(--w-sub)}
.fn-note{margin:20px 4px 0;font-size:13px;line-height:1.45;color:var(--w-sub);text-align:center}

/* Chat Wall: photo + name in the top bar, one next-step bar, quiet system lines, a pill composer */
.ch-head{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.ch-head img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.ch-head div{min-width:0;display:flex;flex-direction:column}
.ch-head b{font-size:16px;font-weight:800;color:var(--w-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-head span{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--w-sub)}
.ch-head span svg{width:13px;height:13px}
.ch-next{display:flex;align-items:center;gap:10px;margin:2px 0 14px;padding:12px 14px;border-radius:16px;background:var(--card);color:var(--w-ink);text-decoration:none}
.ch-next span{flex:1;min-width:0;font-size:14.5px;font-weight:700}
.ch-next em{display:block;margin-bottom:1px;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--w-sub)}
.ch-next i{font-style:normal;font-size:22px;line-height:1;color:var(--w-sub)}
.ch-next.wait span{color:var(--w-sub)}
.ch-skip{border:0;background:none;font:inherit;font-size:13px;font-weight:700;color:var(--w-sub);cursor:pointer;padding:4px 6px}
.ch-thread{gap:6px;padding-bottom:12px}
.w-app .ch-thread .bubble{max-width:78%;padding:10px 14px;font-size:15px;line-height:1.4}
.ch-sys{align-self:center;max-width:86%;margin:6px 0 10px;font-size:12px;line-height:1.45;text-align:center;color:var(--w-sub)}
.ch-compose{position:sticky;bottom:0;display:flex;align-items:center;gap:8px;margin:0 -16px -20px;padding:10px 16px 16px;background:var(--w-bg)}
.ch-compose input{flex:1;min-width:0;height:46px;padding:0 18px;border-radius:99px;border:1.5px solid transparent;background:var(--card);font:inherit;font-size:15px;color:var(--w-ink);outline:0}
.ch-compose input:focus{border-color:color-mix(in srgb,var(--w-ink) 30%,transparent)}
.ch-send{flex:none;width:46px;height:46px;border:0;border-radius:50%;background:var(--w-cta);color:var(--w-cta-ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.ch-ro{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border-radius:16px;background:var(--card);font-size:13.5px;color:var(--w-sub)}
.ch-ro b{color:var(--w-ink);font-size:14.5px}.ch-ro .btn{margin-top:8px;align-self:flex-start}
.ch-sh-t{margin:0 0 4px;font-size:20px;font-weight:800}
.ch{display:flex;flex-direction:column;min-height:100%}
.ch-compose,.ch-ro{margin-top:auto}
.ch-empty{display:flex;flex-direction:column;align-items:center;gap:6px;margin:36px auto 12px;max-width:260px;text-align:center}
.ch-empty img{width:72px;height:72px;border-radius:50%;object-fit:cover;margin-bottom:6px}
.ch-empty b{font-size:18px;font-weight:800;color:var(--w-ink)}
.ch-empty span{font-size:13.5px;line-height:1.45;color:var(--w-sub)}
/* Explore in Me's frame: DM Sans tabs and headings, outlined interest chips, dotted Services rows, outlined cards */
.ex .utabs a{font-weight:500}
.ex .utabs a.on{font-weight:600}
.ex .ex-h{margin:22px 0 6px;color:var(--w-ink);font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
.ex .utabs + .ex-h,.ex > .ex-h:first-child{margin-top:4px}
.ex .ex-sub{margin:0 0 16px}
.ex .ichip{font-family:inherit;font-size:14px;font-weight:500}
.ex .ichip.on{background:var(--w-ink);border-color:var(--w-ink);color:var(--w-bg)}
.ex .card.warn{padding:14px 16px}
.ex .card.warn b{font-size:15px}
.ex .card.warn .muted{margin:4px 0 12px}
.ex .sec-h{margin:26px 0 4px;color:var(--w-ink);font-size:18px;font-weight:600;letter-spacing:-.02em}
.ex .sec-h em{font-weight:500}
.ex .crow-top b{font-weight:600}
.ex .tag,.ex .pill{font-weight:500}
.ex .foot-note{margin-top:26px;font-size:12.5px;line-height:1.5}
.ex .svc-list .me-row em{font-style:normal}
.ex .card.center h2{margin:8px 0 6px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.ex .card.center .btn{width:100%;margin-top:14px}
.ex .empty b{font-weight:600}
.w-app .topbar.tb-home.tb-pf:has(.back) .title{font-size:18px;font-weight:600;letter-spacing:-.015em}   /* inner Explore pages keep the tab bar but take Me's inner-screen title */
/* Chats in Me's frame: DM Sans rows, Me's outlined pill with a red dot for "Your move" */
.ch .mq b{font-weight:500}
.ch .mq em{font-weight:400}
.ch .mq.mine em{font-weight:500}
.ch .mq-n{font-weight:600;vertical-align:2px}
.ch .crow-top b{font-weight:600}
.ch .crow-msg{font-size:13.5px}
.ch .ym-tag{position:relative;padding:3px 10px;border:1.3px solid var(--w-ink);background:none;color:var(--w-ink);font-size:12.3px;font-weight:400}
.ch .ym-tag::after{content:"";position:absolute;top:-3px;right:-3px;width:7px;height:7px;border-radius:50%;background:#d7321c}
.ch .pill{font-weight:500}
.ch .empty b{font-weight:600}
.ch .crow.ym .crow-msg b{font-weight:500}
/* Discover in Me's frame: photo cards unchanged, DM Sans on them; set-up card outlined like Me's tiles */
.dcv .dc-tag{font-weight:600}
.dcv .dc-info h2{font-weight:700}
.dcv .dc-meta span{font-weight:500}
.dcv .dc-poke{font-weight:600}
.dcv .dc-filter{font-weight:500;font-family:inherit}
.dcv .dc-end b{font-weight:600}
.pf .next-card{padding:14px 16px;border:0;border-radius:18px;background:var(--w-card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent)}
.pf .next-card .row b{font-size:15px;font-weight:600}
.pf .next-card .pill{font-weight:500}
.pf .checklist a{font-size:13.5px;font-weight:500;color:var(--w-ink)}
.pf .checklist a.done{color:var(--w-sub)}
.pf .checklist em{font-size:11.5px;font-weight:400}
.pf .stepper-sub i{background:var(--w-ink)}
.pf .next-card .btn.small{margin-top:14px}
.pf .next-card .btn.small::after{content:none}
/* Forum and Relationship in Me's frame: outlined chips (dark when picked), outlined stat tiles, DM Sans weights */
.su .chip{border:0;background:var(--w-card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 18%,transparent);color:var(--w-ink);font-weight:500;font-size:13.5px}
.su .chip.selected{background:var(--w-ink);color:var(--w-bg);box-shadow:none}
.su .stat{background:var(--w-card);border:0;border-radius:18px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent)}
.su .stat b{font-size:22px;font-weight:600}
.su .stat span{font-size:12px;color:var(--w-sub)}
.su .card h2,.su .card h3{font-weight:600;letter-spacing:-.015em}
.su .card h3{font-size:16px}
.su .card .pill{font-weight:500}
.su .card .muted.small,.su .muted.tiny{font-size:12.5px}
.su .notice.info{background:none;padding:0;color:var(--w-sub);font-size:13px}
.su .btn-row{gap:10px}
.su .btn + .btn-row,.su .btn-row + .btn{margin-top:10px}
.fm .row.between.mb .btn.small{padding:8px 16px}
.fm .card.tap{cursor:pointer}
.fm .card b,.fm .card strong{font-weight:600}
.rl .avatar.lg{width:64px;height:64px;font-size:22px}
.rl .card .row{gap:14px}
.rl .card h2{font-size:20px;margin:0 0 6px}
/* Someone's profile in Me's frame: the photo card outlined like Me's tiles, DM Sans name and details */
.pr .feed-card{background:var(--w-card);border:0;border-radius:18px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent)}
.pr .feed-card .photo{margin:6px 6px 0;border-radius:14px}
.pr .feed-card .body{padding:14px 16px 16px}
.pr .feed-card h2{font-size:22px;font-weight:600;letter-spacing:-.02em}
.pr .badge-verified{font-weight:500;font-size:12.5px}
.pr .feed-card p{font-size:14.5px;line-height:1.45}
.pr .kv{font-size:13.5px}
.pr .kv b{font-weight:500;color:var(--w-ink)}
.pr .kv span{color:var(--w-sub)}
.pr .card b{font-size:15px}
.pr .card.flat{background:none;box-shadow:none;padding:16px 0 0}
.pr .card.flat > b{font-size:15px;font-weight:600}
.pr .mini-steps b{font-size:12px;font-weight:600}
.pr .mini-steps span{font-size:11px}
/* Post a job, My posts and a job's page in Me's frame: Me's input fields (soft fill, ink ring on focus), DM Sans labels */
.su select{border:1.5px solid transparent;border-radius:18px;background:color-mix(in srgb,var(--w-ink) 6%,transparent);font-size:16px;padding:15px 16px;color:var(--w-ink)}
.su .input,.su textarea{background:color-mix(in srgb,var(--w-ink) 6%,transparent)}
.su select:focus{outline:0;border-color:color-mix(in srgb,var(--w-ink) 50%,transparent)}
.su .field{margin-bottom:14px}
.su .hint{margin:-4px 0 16px;font-size:13px;line-height:1.4;color:var(--w-sub)}
.jb .card h2{font-size:22px}
.jb .kv{font-size:13.5px}
.jb .kv b{font-weight:500;color:var(--w-ink)}
.jb .kv span[style]{font-weight:600!important}
.jb .card.flat{background:none;box-shadow:none;padding:14px 0 0;font-size:13.5px}
.jb .card.soft .btn.small{margin-top:12px}
.su select{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b6b70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.jb .btn-row{flex-wrap:wrap;margin-top:12px}
.jb .btn-row .btn.small{flex:0 0 auto;width:auto;margin:0;white-space:nowrap}
/* Apply, Task contract and Payment in Me's frame: contract outlined like Me's tiles, DM Sans headings, a quiet signature box */
.jb .contract{background:var(--w-card);border:0;border-radius:18px;padding:16px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent);font-size:13.5px;line-height:1.45}
.jb .contract > b:first-child{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--w-sub)}
.jb .contract h3{margin:16px 0 4px;font-size:15px;font-weight:600}
.jb .contract .notice{margin-top:14px}
.jb .sig-pad{border:1.5px dashed color-mix(in srgb,var(--w-ink) 22%,transparent);border-radius:18px;background:none;color:var(--w-sub);font-style:normal;font-size:14px}
.jb .timeline{margin:18px 0 6px}
.jb .timeline .tl b{font-size:15px;font-weight:500}
.jb .timeline .tl.now::before{background:var(--w-ink);box-shadow:0 0 0 4px color-mix(in srgb,var(--w-ink) 12%,transparent)}
.jb > p.muted:first-child{margin:2px 0 18px}
.jb .notice{display:block}
.jb .kv .pill{justify-self:start}
.jb .sig-pad{font-family:inherit}
.jb .badge-verified{display:inline;font-weight:500}
/* Send a Poke in Me's frame: DM Sans header row, outlined reason chips (dark when picked), the request note as grey text */
.pk > .row.mb{gap:14px;margin-bottom:22px}
.pk > .row.mb b{font-size:17px;font-weight:600}
.pk .chips{display:flex;flex-wrap:wrap;gap:8px}
.pk .notice.warn{background:none;padding:0;margin-top:4px;font-size:13px;color:var(--w-sub)}
/* The questions after a Poke in Me's frame: DM Sans question at 22px, outlined option cards, plain navy Next, a quiet step count */
.fn .fn-with b{font-weight:600}
.fn .fn-bar{margin-bottom:22px}
.fn .fn-q{font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
.fn .fn-why{margin:0 0 18px;font-size:13.5px;line-height:1.4}
.fn .fn-note{font-size:12.5px}
.fn .center h2{font-size:22px;font-weight:600}
.w-app .topbar.tb-pf .step{background:none;padding:0;font-size:13px;font-weight:500;color:var(--w-sub)}
/* Interaction category: Me's spacing between the choice cards and the follow-up cards */
.ct > p.muted:first-child{margin:2px 0 16px}
.ct .choice{margin-bottom:10px}
.ct .card{margin-top:14px}
.ct .card > b{font-size:15px}
.ct .chips{display:flex;flex-wrap:wrap;gap:8px}
.ct .notice.bad{background:none;padding:0;color:var(--bad);font-size:13px}
.ct > .btn{margin-top:16px}
/* Journey tracker inside Me's frame: an outlined card, DM Sans labels, the next step under a dotted line */
.pf .journey{margin:0 0 18px;padding:12px 12px 10px;background:var(--w-card);border:0;border-radius:18px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent)}
.pf .j span{font-size:11px;font-weight:500;color:var(--w-ink)}
.pf .j.now i{background:var(--w-ink);color:var(--w-bg);box-shadow:none}
.pf .j.now span{color:var(--w-ink);font-weight:600}
.pf .j-next{margin-top:8px;padding:10px 2px 0;border-radius:0;background:none;border-top:1.5px dotted color-mix(in srgb,var(--w-ink) 18%,transparent)}
.pf .j-next b{font-size:13.5px;font-weight:600;color:var(--w-ink)}
.pf .j-next span{font-size:13px;color:var(--w-sub)}
.rl .rl-pav{width:64px;height:64px;flex:0 0 auto}
.rl .btn-row .btn.small{padding:8px 6px;white-space:nowrap;font-size:13px}
/* Suggested venue: Me's meet-check card, the SOS pill kept red */
.vn .code-sm{font-size:20px;font-weight:600;color:var(--w-ink)}
.vn .card .muted.small{margin:6px 0 0}
.vn .btn-row{margin-top:12px}
.vn .btn-row .btn.small{padding:8px 10px;white-space:nowrap}
.vn .btn.small.danger{color:var(--bad)!important;box-shadow:inset 0 0 0 1.3px var(--bad)!important}
.vn > .notice.info:first-child{margin:2px 0 16px}
.vn > .btn.ghost{margin-top:10px}
/* Chat Wall in Me's frame: DM Sans header and thread, the next step as an outlined card, a quieter composer */
.tb-pf .ch-head{font-family:"DM Sans",Manrope,sans-serif}
.tb-pf .ch-head b{font-weight:600;letter-spacing:-.015em}
.tb-pf .ch-head span{font-weight:500}
.cw .ch-next{margin:2px 0 16px;padding:12px 14px;border-radius:18px;background:var(--w-card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent)}
.cw .ch-next span{font-size:15px;font-weight:500}
.cw .ch-next em{font-size:11.5px;font-weight:600;letter-spacing:.05em}
.cw .ch-skip{font-family:inherit;font-weight:500}
.cw .bubble{font-size:14.5px;line-height:1.4;box-shadow:none}
.cw .bubble:not(.me){background:color-mix(in srgb,var(--w-ink) 6%,transparent)}
.cw .bubble.me{background:var(--p-navy);color:#fff}
.cw .ch-empty b{font-weight:600}
.cw .ch-compose input{font-family:inherit;background:color-mix(in srgb,var(--w-ink) 6%,transparent)}
.cw .ch-send{background:var(--p-navy);color:#fff}
.cw .ch-ro{background:var(--w-card);border-radius:18px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent)}
.cw .ch-ro b{font-weight:600}
.cw .card.soft{margin-top:14px}
.cw .card.soft > b{font-size:15px}
.cw .chips{display:flex;flex-wrap:wrap;gap:8px}
.ch-sh-t{font-family:"DM Sans",Manrope,sans-serif;font-weight:600}
/* Continue · Upgrade · Edit in Me's frame: the question in DM Sans, outlined options, ending options in red */
.cu > p.muted:first-child{margin:2px 0 6px;font-size:13.5px}
.cu .cu-q{margin:0 0 16px;font-size:22px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
.cu .choice.bad .t{color:var(--bad)}
.cu .choice.bad.selected{box-shadow:inset 0 0 0 1.5px var(--bad)!important}
.cu > .btn.ghost{margin-top:10px}
/* Upgrade proposed sheet in Me's frame: the from → to change as an outlined card, plain navy accept, outlined Wait */
.up-sh .muted{margin:0 0 14px}
.up-sh .up-ft{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:14px 16px;font-size:15px}
.up-sh .up-ft span{color:var(--w-sub)}
.up-sh .up-ft .li{width:16px;height:16px;color:var(--w-sub)}
.up-sh .up-ft b{color:var(--w-ink)}
.up-sh .btn + .btn{margin-top:10px}
/* Liable Form, E-sign, E-Stamp, Video, End relationship, Feedback, Report and Flow map in Me's frame */
.cf > p.muted:first-child{margin:2px 0 16px}
.cf h2{font-size:20px;font-weight:600;letter-spacing:-.02em}
.cf .field label{display:block;margin-bottom:6px}
.cf .field .choice{margin-bottom:10px}
.cf .card{margin-bottom:12px}
.cf .card > b{font-size:15px}
.cf .chips{display:flex;flex-wrap:wrap;gap:8px}
.cf .notice{margin-bottom:14px}
.cf > .btn,.cf > a.btn{margin-top:12px}
.cf .btn-row .btn{flex:1}
.cf .contract{padding:16px;border-radius:18px;background:var(--w-card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent);font-size:13.5px;line-height:1.45}
.cf .contract > .row b{font-size:14px;font-weight:600;letter-spacing:.04em}
.cf .contract h3{margin:14px 0 4px;font-size:14.5px;font-weight:600}
.cf .contract .clause{color:var(--w-sub)}
.cf .contract .clause b{color:var(--w-ink)}
.cf .sig-pad{border-radius:18px;background:var(--w-card);border:1.5px dashed color-mix(in srgb,var(--w-ink) 22%,transparent)}
.cf .stat{border-radius:18px;background:var(--w-card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent)}
.cf .stat b{font-weight:600}
.cf .thumb{border-radius:18px;background:var(--w-card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent)}
.cf .thumb.selected{box-shadow:inset 0 0 0 1.5px var(--w-ink)}
.cf .center h2{margin:4px 0 6px}
.cf .kv{margin-top:12px}
.cf .kv b{font-weight:600}
.cf .kv span{color:var(--w-sub)}
/* Every bottom sheet in Me's frame: DM Sans title, plain navy and outlined buttons */
.sheet.pf h2{margin:0 0 6px;font-size:20px;font-weight:600;letter-spacing:-.02em}
.sheet.pf p.muted{margin:0 0 14px}
.sheet.pf .btn + .btn{margin-top:10px}
/* Step count beside the title (funnel questions, KYC) in DM Sans */
.w-app .topbar.tb-pf .step{font-family:"DM Sans",Manrope,sans-serif}
.cf .scan-box .cap{left:16px;right:16px;text-align:center;line-height:1.4}
/* Chat Wall stays private: the rule prompt sits under the message box and opens the Liable Rules chat */
.ch-compose{flex-wrap:wrap}
/* The Liable Rules prompt, pinned under the chat header while the thread scrolls */
.ch-top{position:sticky;top:-4px;z-index:3;margin:-4px -16px 6px;padding:6px 16px 10px;background:var(--w-bg)}
.ch-top .ch-rule{margin-top:0}
.ch-rule{flex-basis:100%;display:flex;align-items:center;gap:8px;margin-top:2px;padding:8px 12px;border-radius:14px;background:var(--w-card);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent);color:var(--w-ink);text-decoration:none;font-size:13px}
.ch-rule .li{width:18px;height:18px;flex:none;color:var(--w-sub)}
.ch-rule span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--w-sub)}
.ch-rule b{font-weight:600;color:var(--w-ink)}
.ch-rule em{flex:none;font-style:normal;font-weight:600;font-size:13px;padding:4px 12px;border-radius:99px;background:var(--w-cta);color:var(--w-cta-ink)}
/* Liable Rules chat: the rule engine on the left, your answers on the right, choices as chips above the composer */
.ch-head .ru-av{width:38px;height:38px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--w-cta);color:var(--w-cta-ink)}
.ch-head .ru-av .li{width:20px;height:20px}
.ru .bubble.bot{align-self:flex-start;max-width:86%;background:var(--w-card);color:var(--w-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--w-ink) 12%,transparent)}
.ru .bubble.bot .card{margin:6px 0 0;box-shadow:none;padding:0;background:transparent}
.ru .bubble.bot .req{color:var(--bad)}
.ru .ru-edit{border:0;font:inherit;text-align:left;cursor:pointer}
.ru-opts{position:sticky;bottom:0;margin:auto -16px -20px;padding:12px 16px 16px;display:flex;flex-wrap:wrap;gap:8px;background:var(--w-bg)}
.ru-opts .btn{flex:1 1 100%}
.ru-opts .chip{cursor:pointer;font:inherit;font-size:14px}
.ru-link{display:inline-block;margin-top:10px;font-weight:600;color:var(--w-ink);text-decoration:none}
.ru-skip{flex:none;border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:var(--w-sub);cursor:pointer}
.ru-quiet{margin:auto 0 0;padding:12px 0 4px;text-align:center;font-size:12.5px;color:var(--w-sub)}
/* Liable Form in the rules chat: a document card, the signing card set apart, OTP composer, fee table */
.ru-doc{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--w-bg);color:var(--w-ink);text-decoration:none}
.ru-doc .li{width:22px;height:22px;flex:none;color:var(--w-sub)}
.ru-doc span{flex:1;min-width:0;display:flex;flex-direction:column}
.ru-doc b{font-size:14px;font-weight:600}
.ru-doc em{font-style:normal;font-size:12px;color:var(--w-sub)}
.ru-doc i{font-style:normal;font-size:20px;color:var(--w-sub)}
.ru .bubble.bot:has(.ru-sign){max-width:100%;width:100%;padding:0;background:none;box-shadow:none}
.ru-sign{display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:18px;background:var(--w-cta);color:var(--w-cta-ink)}
.ru-sign b{font-size:16px;font-weight:600}
.ru-sign span{font-size:13.5px;line-height:1.45;opacity:.85}
.ru-otp input:not(:placeholder-shown){letter-spacing:.3em}
.ru-otp .btn{width:auto;flex:none;padding:0 22px;height:46px}
.ru-otp .ru-why{flex:none}
.ru-kv{grid-template-columns:auto 1fr;gap:6px 16px;font-size:13.5px}
.ru-kv span{color:var(--w-sub)}
.ru-opts .ru-why{background:none;box-shadow:none;color:var(--w-sub)}
.ru-opts .chip.selected{background:var(--w-cta);color:var(--w-cta-ink)}
.ru-opts .btn + .btn{margin-top:0}

/* Company verification (Hiring): the field opens under the picked way, a verified result card, and the job badge */
.cv-field{padding:2px 4px 4px}
.cv-field .au-input{margin-bottom:6px}
.cv-field .q-why{margin:0 0 10px}
.cv-done{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.cv-done b{font-size:16px;color:var(--w-ink)}.cv-done span{font-size:13px;color:var(--w-sub)}
.cv-done .cv-mail{color:var(--ok);font-weight:600}
.cv-ok{color:var(--ok);font-weight:700;white-space:nowrap}
.cv-nudge{display:block;text-decoration:none;color:inherit}
.tk-foot .q-skip{display:block;margin:14px auto 0}
.cv-reg{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.cv-reg b{font-size:16px;color:var(--w-ink)}.cv-reg>span{font-size:13px;color:var(--w-sub)}
.cv-reg dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:12px 0 0;font-size:13px}
.cv-reg dt{color:var(--w-sub)}.cv-reg dd{margin:0;color:var(--w-ink);font-weight:600;word-break:break-all}
.cv-link{margin:14px 2px 0;font-size:13px;line-height:1.45;color:var(--warn-ink,#9a5b13)}
.cv-link.ok{color:var(--ok);font-weight:700}
.cv-doc{display:flex;align-items:center;gap:8px;width:100%;margin-top:12px;padding:14px 16px;border-radius:18px;border:1.5px dashed color-mix(in srgb,var(--w-ink) 25%,transparent);background:transparent;color:var(--w-ink);font:inherit;font-size:14px;cursor:pointer;text-align:left}
.cv-doc.on{border-style:solid;border-color:var(--w-ink)}
.cv-doc em{margin-left:auto;font-style:normal;font-size:13px;color:var(--w-sub);text-decoration:underline}
p.q-why.cv-rename{margin-top:14px}
.cv-mailrow{display:flex;gap:8px;align-items:center}.cv-mailrow .au-input{flex:1;min-width:0;margin:0}.cv-mailrow .btn.small{flex:none}
.cv-field .kid-sec{margin-top:10px}

/* Forum by role: Hiring (your jobs, people looking for work) and Find work (skill matches first) */
.ig .utabs{margin-bottom:12px}
.fm .dc{height:calc(100cqh - 170px);min-height:360px;scroll-margin-top:56px}
.fm:has(.utabs) .dc{height:calc(100cqh - 222px)}
.fm .ig-stories,.fm .utabs{scroll-snap-align:start}
.fm .dc-info h2{font-size:26px}
.fm .dc-tag.fm-hit,.dsc .dc-tag.fm-hit{background:#C3E07A;color:#2F5527}
.fm .dc-meta span.fm-on{background:#fff;color:#181F39;font-weight:600}
.fm button.dc-poke{border:0;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.fm .dc-poke.fm-sent{background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(8px)}
.ig-stories{display:flex;gap:14px;overflow-x:auto;margin:0 -16px 6px;padding:2px 16px 8px;scrollbar-width:none}
.ig-stories::-webkit-scrollbar{display:none}
.ig-story{flex:none;width:68px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;font:inherit;color:var(--w-ink);text-decoration:none;cursor:pointer}
.ig-story small{width:100%;font-size:11.5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-ring{position:relative;width:64px;height:64px;border-radius:50%;padding:2.5px;background:color-mix(in srgb,var(--w-ink) 16%,transparent);display:flex;align-items:center;justify-content:center}
.ig-ring.on{background:conic-gradient(from 200deg,#FEDA90,#FDA597,#C3E07A,#ADD8CE,#FEDA90)}
.ig-ring.sel{outline:2px solid var(--w-ink);outline-offset:2px}
.ig-ring img,.ig-job{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2.5px solid var(--w-bg);background:#EEF0F6;display:flex;align-items:center;justify-content:center}
.ig-ring.add{background:none;border:1.5px dashed color-mix(in srgb,var(--w-ink) 35%,transparent)}
.ig-ring .li{width:24px;height:24px}
.ig-ring i{position:absolute;right:-2px;bottom:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:#E5484D;color:#fff;border:2px solid var(--w-bg);font:700 11px/16px inherit;font-style:normal;text-align:center}
.ig-chips{position:sticky;top:0;z-index:3;display:flex;gap:8px;overflow-x:auto;margin:0 -16px 8px;padding:8px 16px;background:var(--w-bg);scrollbar-width:none}
.ig-chips::-webkit-scrollbar{display:none}
.ig-chips button{flex:none;padding:7px 13px;border:0;border-radius:8px;background:color-mix(in srgb,var(--w-ink) 7%,transparent);color:var(--w-ink);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap}
.ig-chips button.on{background:var(--w-ink);color:var(--w-bg)}
.ig-post{margin:0 0 26px}
.ig-head{display:flex;align-items:center;gap:10px;padding:4px 0 10px}
.ig-head .grow{min-width:0}
.ig-head b{display:flex;align-items:center;gap:4px;font-size:14.5px;font-weight:600;color:var(--w-ink)}
.ig-head b .vtick{width:15px;height:15px}
.ig-head span:not(.ig-av){display:block;font-size:12.5px;color:var(--w-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-av{flex:none;width:38px;height:38px;border-radius:50%;overflow:hidden;background:#EEF0F6;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--w-ink)}
.ig-av img{width:100%;height:100%;object-fit:cover}
.ig-ic{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:none;color:var(--w-ink);cursor:pointer}
.ig-ic .li{width:24px;height:24px}
.ig-ic.on .li{fill:currentColor}
.ig-media{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:#2a2f45;cursor:pointer}
.ig-media img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;display:block}
.ig-noph{display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(160deg,#3b4470,#181F39)}
.ig-noph b{color:#fff;font-size:24px;font-weight:700;text-align:center;line-height:1.2}
.ig-badge{position:absolute;padding:5px 10px;border-radius:8px;font-size:12.5px;font-weight:600;background:rgba(10,12,22,.78);color:#fff;backdrop-filter:blur(6px)}
.ig-badge.tl{top:10px;left:10px}
.ig-badge.br{right:10px;bottom:10px;background:#FEDA90;color:#181F39;font-weight:700}
.ig-badge.ok{background:#C3E07A;color:#2F5527}
.ig-acts{display:flex;align-items:center;gap:2px;padding:10px 0 6px}
.ig-cta{flex:1;height:42px;display:flex;align-items:center;justify-content:center;margin-right:6px;border:0;border-radius:12px;background:var(--w-ink);color:var(--w-bg);font:inherit;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer}
.ig-cta.ghost{background:color-mix(in srgb,var(--w-ink) 7%,transparent);color:var(--w-ink)}
.ig-cap{cursor:pointer}
.ig-cap b{display:block;font-size:16px;font-weight:600;color:var(--w-ink);margin-bottom:3px}
.ig-sub{font-size:13.5px;color:var(--w-sub);line-height:1.45}
.ig-cap p{margin:6px 0 0;font-size:14px;line-height:1.45;color:var(--w-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ig-tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px}
.ig-tags span{padding:3px 10px;border-radius:99px;font-size:12.5px;background:color-mix(in srgb,var(--w-ink) 7%,transparent);color:var(--w-sub)}
.ig-tags span.on{background:var(--w-ink);color:var(--w-bg);font-weight:600}
/* Applicants for one of your jobs: job summary, New / Shortlisted / Not a fit tabs, a card per applicant */
.ap-job{display:flex;flex-direction:column;gap:2px;margin:0 0 14px}
.ap-job b{font-size:18px;font-weight:700;color:var(--w-ink)}
.ap-job span{font-size:13.5px;color:var(--w-sub)}
.jb .utabs small{margin-left:4px;padding:1px 7px;border-radius:99px;background:color-mix(in srgb,var(--w-ink) 9%,transparent);font-size:11.5px;font-weight:600}
.jb .card.ap{padding:14px}
.ap-top{display:flex;align-items:center;gap:12px;cursor:pointer}
.ap-top .grow{min-width:0}
.ap-top b{display:flex;align-items:center;gap:4px;font-size:15.5px;font-weight:600;color:var(--w-ink)}
.ap-top b .vtick{width:15px;height:15px}
.ap-top span:not(.ig-av){display:block;font-size:13px;color:var(--w-sub);line-height:1.4}
.ap-top>.li{width:18px;height:18px;color:var(--w-sub);flex:none}
.ig-av.ap-av{width:52px;height:52px}
.ap .ig-tags{margin-top:12px}
.ap-fit{margin-top:8px;font-size:12.5px;font-weight:600;color:#2F7A4F}
.ap-sent{margin-top:10px;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--w-ink) 5%,transparent);font-size:13px;color:var(--w-sub)}
.ap-acts{display:flex;gap:8px;margin-top:12px}
.ap-acts .btn.small{flex:1;margin:0}
.ap-empty{margin:6px 0 4px;font-size:14px;line-height:1.45}
.ap-open{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding:12px 14px;border-radius:12px;background:color-mix(in srgb,var(--w-ink) 5%,transparent);color:var(--w-ink);font-size:14.5px;font-weight:600;text-decoration:none}
.ap-open i{margin-left:6px;padding:2px 8px;border-radius:99px;background:#E5484D;color:#fff;font-size:11.5px;font-style:normal}
.ap-open .li{width:18px;height:18px}
.su .ap-acts .btn.small:not(.ghost){background:var(--w-ink)!important;color:var(--w-bg)!important}
.fm .fm-for{margin:-2px 0 10px;scroll-snap-align:none}
.fm .dc-tag{white-space:nowrap}
.ig-stories:not(:has(.ig-story)){display:none}
/* Discover holds Lifestyle and Business: a Lifestyle | Business switch for people on both tracks, then that mode's tabs */
.dmode{display:flex;gap:4px;margin:0 0 12px;padding:4px;border-radius:14px;background:color-mix(in srgb,var(--w-ink) 7%,transparent);scroll-snap-align:start}
.dmode button{flex:1;height:36px;border:0;border-radius:10px;background:none;color:var(--w-sub);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
.dmode button.on{background:var(--w-bg);color:var(--w-ink);box-shadow:0 1px 3px rgba(24,31,57,.14)}
.dsc .utabs{margin-bottom:12px;scroll-snap-align:start}
.dsc.dcv:not(.fm) .dc{height:calc(100cqh - 76px);scroll-margin-top:0}
.dsc.dcv:not(.fm):has(.dmode) .dc{height:calc(100cqh - 132px)}
.dsc.fm .dc{height:calc(100cqh - 226px)}
.dsc.fm:has(.dmode) .dc{height:calc(100cqh - 280px)}
.dsc.fm:not(:has(.ig-story)) .dc{height:calc(100cqh - 120px)}
.dsc.fm:has(.dmode):not(:has(.ig-story)) .dc{height:calc(100cqh - 174px)}
/* Discover: removable filter pills under the title */
.sv-pills{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.sv-pills button{display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 12px;border:0;border-radius:99px;background:var(--w-ink);color:var(--w-bg);font:inherit;font-size:12.5px;font-weight:500;cursor:pointer}
.sv-pills button i{font-style:normal;opacity:.7;font-size:11px}
.sv-pills .sv-clear{background:none;color:var(--w-ink);text-decoration:underline;padding:6px 4px}
/* Filter sheet: sections with small headings, segmented choices, a live-count button pinned at the bottom */
.svf h4{margin:20px 0 10px;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--w-sub)}
.svf-head{display:flex;align-items:center;justify-content:space-between}
.svf-head h2{margin:0;font-size:20px;font-weight:700}
.svf-head button{border:0;background:none;color:var(--w-ink);font:inherit;font-size:14px;font-weight:600;text-decoration:underline;cursor:pointer}
.svf-seg{display:flex;gap:6px;flex-wrap:wrap}
.svf-seg button{flex:1;min-width:max-content;height:38px;padding:0 12px;border:0;border-radius:10px;background:color-mix(in srgb,var(--w-ink) 6%,transparent);color:var(--w-ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.svf-seg button.on{background:var(--w-ink);color:var(--w-bg);font-weight:600}
.svf-row{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.svf-row b{display:block;font-size:14.5px;font-weight:600}
.svf-row small{display:block;margin-top:2px;font-size:12.5px;color:var(--w-sub);line-height:1.4}
.svf-row input{flex:none;width:22px;height:22px;accent-color:var(--w-ink)}
.svf-foot{position:sticky;bottom:-28px;margin:22px -18px -28px;padding:12px 18px 22px;background:var(--w-bg);box-shadow:0 -1px 0 color-mix(in srgb,var(--w-ink) 10%,transparent)}
/* Discover without tabs: a label naming the view (opens the filter sheet), and chip choices inside the sheet */
.d-ctx{display:inline-flex;align-items:center;gap:4px;margin:0 0 12px;padding:0;border:0;background:none;color:var(--w-ink);font:inherit;font-size:17px;font-weight:700;cursor:pointer;scroll-snap-align:start}
.d-ctx .li{width:16px;height:16px;transform:rotate(90deg);margin-top:2px}
.svf-chips{display:flex;flex-wrap:wrap;gap:8px}
.svf-chips+.svf-row{margin-top:18px}
.svf-chips button{padding:8px 13px;border:0;border-radius:10px;background:color-mix(in srgb,var(--w-ink) 6%,transparent);color:var(--w-ink);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer}
.svf-chips button.on{background:var(--w-ink);color:var(--w-bg);font-weight:600}
.svf-note{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:var(--w-sub)}
/* Discover as one feed: full-height cards like before, the role tags on top, the lead role's price or pay highlighted */
.dsc.dcv .dc{height:calc(100cqh - 14px)}
.dsc .sv-pills{scroll-snap-align:start}
.dsc .dc-tag.dim{background:rgba(24,31,57,.62);color:#fff}
.dsc .dc-meta span.fm-on{background:#fff;color:#181F39;font-weight:600}
.dsc button.dc-poke{border:0;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.dsc .dc-poke.fm-sent{background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(8px)}
.dsc .fm-for{margin:-4px 0 12px}
.svf-grp{margin:26px 0 -6px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--w-ink) 10%,transparent);font-size:16px;font-weight:700;color:var(--w-ink)}
.svf-head+.svf-grp{margin-top:6px;padding-top:0;border-top:0}
.svf-hint{margin:8px 0 0}
/* Discover: skills / meta stay on one line and scroll sideways */
.dsc .dc-meta{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;margin-right:-18px;padding-right:18px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.dsc .dc-meta::-webkit-scrollbar{display:none}
.dsc .dc-meta span{flex:none;white-space:nowrap}
/* Job chat: the job and its steps up top, system notes centred, next step above the composer */
.wk-steps{display:flex;gap:4px;margin-top:10px}
.wk-past{display:grid;gap:2px;padding-top:8px;border-top:1px dashed color-mix(in srgb,var(--w-ink) 15%,transparent);font-size:13px}
.ru .bz-dl{margin-top:4px}
.wk-steps i{flex:1;font-style:normal;font-size:11px;font-weight:600;color:var(--w-sub);padding-top:7px;border-top:3px solid color-mix(in srgb,var(--w-ink) 12%,transparent);white-space:nowrap}
.wk-steps i.done{border-color:var(--p-navy);color:var(--w-ink)}
.wk-steps i.now{border-color:var(--p-coral);color:var(--w-ink)}
.wk .ch-rule{text-decoration:none}
.wk .ru-quiet{flex:1;margin:0;font-size:13px;color:var(--w-sub)}
.ap-inv{font-style:normal;font-size:11px;font-weight:700;padding:2px 7px;border-radius:99px;background:var(--p-coral);color:var(--p-navy);vertical-align:2px}
.wk .ch-rule{box-sizing:border-box;min-width:0;max-width:100%;overflow:hidden}
/* Skill picker: search, then chips grouped by category (Business profile and Post a job) */
.q-find{margin-bottom:6px}
.q-grp{margin:18px 0 10px;color:var(--w-sub);font-size:12.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.sk-sec[hidden],.q-chip[hidden]{display:none}
/* Business skills, drawn like Bumble's interests picker: grey search pill, slim outlined chips with an emoji that
   fill black when picked, bold section titles split by a full-width grey band, Show more on long sections */
.q-skp .q-find{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:0 16px;height:46px;border-radius:99px;background:color-mix(in srgb,var(--w-ink) 6%,transparent);cursor:text}
.q-skp .q-find svg{flex:none;width:20px;height:20px;fill:none;stroke:var(--w-ink);stroke-width:1.8;stroke-linecap:round}
.q-skp .q-find input{flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;font-size:16px;color:var(--w-ink)}
.q-skp .q-find input::placeholder{color:var(--w-sub)}
.q-skp .q-chips{gap:8px}
.q-skp .q-chip{gap:6px;padding:7px 14px 7px 11px;border:1.5px solid var(--w-ink);font-size:15px;font-weight:500;letter-spacing:-.005em}
.q-skp .q-chip span{font-size:16px;line-height:1}
.q-skp .q-chip.own{padding-left:14px}
.q-skp .q-chip i{font-style:normal;font-size:12px;opacity:.7}
.q-skp .q-picked{margin-bottom:6px}
.q-skp .q-sec{margin:0 -16px;padding:20px 16px 22px;border-top:8px solid color-mix(in srgb,var(--w-ink) 5%,transparent)}
.q-skp .q-picked+.q-sec,.q-skp .q-hint+.q-sec,.q-skp .q-add+.q-sec{margin-top:16px}
.q-skp .q-find+.q-add+.q-sec{border-top:0;padding-top:4px}
.q-skp .q-sec h3{margin:0 0 14px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.q-skp .q-fold{margin-top:16px;font-weight:600}
.q-skp.finding .q-sug{display:none}
.q-skp.finding .q-sec.folded .q-more{display:inline-flex}
.q-skp.finding .q-fold{display:none}
.q-skp.finding .sk-sec{border-top:0;padding-top:18px;padding-bottom:4px}
.jb .q-chip{padding:8px 13px;font-size:13.5px}
.jb-more{margin-top:12px}
.jb-more summary{cursor:pointer;color:var(--w-ink);font-size:13.5px;font-weight:600}
/* Custom skills: kept as typed, outlined dashed since they don't match yet */
.q-chip.own.on{background:transparent;color:var(--w-ink);border-style:dashed;border-color:var(--w-ink)}
.ig-tags span.sk-own,.dc-meta span.sk-own{background:transparent;outline:1px dashed currentColor;outline-offset:-1px}
.q-add{display:block;width:100%;margin:4px 0 6px;padding:13px 16px;border-radius:14px;border:1.5px dashed color-mix(in srgb,var(--w-ink) 30%,transparent);background:transparent;color:var(--w-ink);font:inherit;font-size:14.5px;font-weight:700;text-align:left;cursor:pointer}
.q-add[hidden]{display:none}
/* Match breakdown: one check per line item (skills, distance, type, pay) */
.mb{display:flex;flex-wrap:wrap;gap:4px 12px;margin:6px 0 4px;font-size:12.5px;font-weight:600}
.mb .ok{color:#2F7A3B}.mb .no{color:var(--w-sub)}
.dc .mb .ok{color:#C3E07A}.dc .mb .no{color:rgba(255,255,255,.7)}

/* A job's page: the person hiring up top on their photo, the job card, about the hirer, more jobs, a pinned Poke */
.jv-hero{position:relative;height:360px;border-radius:18px;overflow:hidden;isolation:isolate;background:linear-gradient(160deg,#f6c9c0,#c98aa8)}
.jv-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;z-index:-1}
.jv-hero::after{content:"";position:absolute;inset:auto 0 0;height:60%;background:linear-gradient(to top,rgba(10,12,22,.88),rgba(10,12,22,.5) 50%,rgba(10,12,22,0));z-index:-1}
.jv-ini{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:700;color:#fff;z-index:-1}
.jv .dc-tag{font-weight:600}
.jv .dc-tag.fm-hit{background:#C3E07A;color:#2F5527}
.jv-who{position:absolute;left:18px;right:18px;bottom:18px;color:#fff}
.jv-who h2{display:flex;align-items:center;gap:7px;margin:0 0 4px;font-size:26px;font-weight:700;letter-spacing:-.02em;color:#fff}
.jv-who p{margin:0 0 10px;font-size:14.5px;color:rgba(255,255,255,.9)}
.jv-who .dc-meta span{font-weight:500}
.jv .card{margin-top:12px}
.jv-job h2{margin:10px 0 2px}
.jv-pay{font-size:20px;font-weight:600;color:var(--ok)}
.jv-facts{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 2px;font-size:13px;color:var(--w-sub)}
.jv-job p{margin:12px 0 0;font-size:14.5px;line-height:1.45}
.jv h4{margin:16px 0 8px;font-size:13px;font-weight:600;color:var(--w-sub)}
.jv-hirer h4,.jv-more h4{margin-top:0}
.jv-hirer .row{gap:12px;align-items:center}
.jv-hirer .pav{width:44px;height:44px}
.jv-hirer .row b{font-size:15px;font-weight:600}
.jv .kv b{font-weight:500;color:var(--w-ink)}
.jv-row{display:flex;align-items:center;gap:10px;padding:12px 0;color:var(--w-ink);text-decoration:none;border-top:1px solid color-mix(in srgb,var(--w-ink) 10%,transparent)}
.jv-row:first-of-type{border-top:0;padding-top:4px}
.jv-row span{flex:1;display:flex;flex-direction:column;gap:2px}
.jv-row b{font-size:14.5px;font-weight:600}
.jv-row small{font-size:12.5px;color:var(--w-sub)}
.jv-row em{font-style:normal;font-size:13px;font-weight:600;color:var(--ok);white-space:nowrap}
.jv-row .chev{width:16px;height:16px;color:var(--w-sub)}
.jv .mini-steps b{font-size:12px;font-weight:600}
.jv .mini-steps span{font-size:11px;color:var(--w-sub)}
.jv-report{display:block;margin:18px 0 6px;text-align:center;font-size:13px;color:var(--w-sub);text-decoration:underline;text-underline-offset:3px}
.jv-cta{position:sticky;bottom:0;margin:0 -2px;padding:14px 2px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--w-bg) 70%,transparent)}
.jv-cta .btn{margin:0}

/* Pay per skill: a list of rows, the skill as the label on top and one full-width ₹ field with its period picker,
   so long skill names and big amounts (₹1,00,00,000) both fit at any phone width */
.q-pays{border-top:1px solid color-mix(in srgb,var(--w-ink) 9%,transparent)}
.q-pay{display:flex;flex-direction:column;gap:8px;padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--w-ink) 9%,transparent)}
.q-pay-k{font-size:15px;font-weight:600;line-height:1.35;color:var(--w-ink);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.q-pay-f{display:flex;align-items:center;height:50px;padding-left:14px;overflow:hidden;border-radius:16px;background:color-mix(in srgb,var(--w-ink) 6%,transparent);border:1.5px solid transparent;transition:border-color .2s}
.q-pay-f:focus-within{border-color:color-mix(in srgb,var(--w-ink) 50%,transparent)}
.q-pay-f span{font-size:16px;font-weight:600;line-height:1;color:var(--w-ink);padding-right:8px}
.q-pay-f input{flex:1;min-width:0;height:100%;border:0;background:none;outline:0;font:inherit;font-size:16px;font-weight:500;color:var(--w-ink);font-variant-numeric:tabular-nums}
.q-pay-f input::placeholder{color:var(--w-sub);opacity:.6}
.q-pay-f select{flex:none;width:92px;height:100%;padding:0 24px 0 6px;background-color:transparent;color:var(--w-sub);border:0;border-radius:0 14px 14px 0;outline:0;font:inherit;font-size:14px;color:var(--w-sub);cursor:pointer;appearance:none;-webkit-appearance:none;
  background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%237a7f8f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center}
.q-pay-f select:focus,.q-pay-f select:focus-visible{outline:0}   /* the field's soft focus border already shows it */
.q-pay-f select option{color:#222;background:#fff}
.q-pay-f .q-pay-per{flex:none;box-sizing:border-box;width:92px;padding:0 24px 0 6px;font-size:14px;font-weight:400;line-height:normal;letter-spacing:normal;color:var(--w-sub)}   /* same box and text as the period dropdown, without its arrow */
.q-pay-sl{flex:none;font-style:normal;font-size:16px;color:var(--w-sub);padding:0 2px 0 8px}
.q-pay-all[hidden]{display:none}
/* Looking for work: A job / Service work, each opening its fields under its own heading */
.q-work .q-sec{margin-top:28px;padding-top:0;border-top:0}
.q-work .q-sec h3{margin:0 0 6px}
.q-work .q-sec .q-hint{margin:0 0 14px;color:var(--w-sub)}
.q-work .q-chips+.q-pays{margin-top:16px}
.q-work .q-pays{border-top:0}
.q-work .q-pay:last-child{border-bottom:0}
.q-pay-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.q-pay-h .q-pay-k{flex:1;min-width:0}
/* The kind of work for a skill: a small pill picker beside its name; dashed until picked */
select.q-pay-t{flex:none;width:auto;height:34px;max-width:52%;padding:0 28px 0 12px;border-radius:99px;border:1.5px solid transparent;font:inherit;font-size:13.5px;font-weight:600;color:var(--w-ink);cursor:pointer;appearance:none;-webkit-appearance:none;
  background:color-mix(in srgb,var(--w-ink) 8%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%237a7f8f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 11px center}
select.q-pay-t:focus,select.q-pay-t:focus-visible{outline:0;border-color:color-mix(in srgb,var(--w-ink) 50%,transparent)}
select.q-pay-t0{background-color:transparent;border:1.5px dashed color-mix(in srgb,var(--w-ink) 30%,transparent);color:var(--w-sub);font-weight:500}
.q-pay-t option{color:#222;background:#fff}
/* A hirer's terms: each skill with its kind of work, and the usual pay on the right */
.jv-terms{margin:6px 0 4px}
.jv-terms>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid color-mix(in srgb,var(--w-ink) 8%,transparent)}
.jv-terms>div:last-child{border-bottom:0}
.jv-terms span{display:flex;flex-direction:column;min-width:0}
.jv-terms b{font-size:14.5px;font-weight:600}
.jv-terms i{font-style:normal;font-size:12.5px;color:var(--w-sub)}
.jv-terms em{flex:none;font-style:normal;font-size:14.5px;font-weight:600;color:var(--ok);font-variant-numeric:tabular-nums}
.jv-terms .on b{color:var(--ok)}
.ct-pay{height:46px}

/* Job posts (js/posts.js): a post row's second line, the new-Pokes count, and the hirer strip on a post */
.post-sub{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--w-sub)}
.me-row em.post-new{color:var(--w-ink);font-weight:600}
.me-row.post-by{margin-bottom:12px}
.post-by .grow{display:flex;flex-direction:column;gap:2px;min-width:0}
.post-by .grow span{font-size:13px;color:var(--w-sub)}
.post-hit{display:inline-block;margin:0 0 10px}
.post-empty{display:flex;flex-direction:column;gap:6px;margin:8px 0 4px;padding:18px;border:1.5px solid color-mix(in srgb,var(--w-ink) 12%,transparent);border-radius:18px}
.post-empty b{font-size:16px;color:var(--w-ink)}
.post-empty span{font-size:13.5px;line-height:1.45;color:var(--w-sub)}
/* Current work (looking for work): labelled fields under each heading */
.q-lbl{display:block;margin:0 0 6px;font-size:13px;font-weight:700;color:var(--w-sub)}
.q-emp .q-sec .au-input:last-child{margin-bottom:0}
/* Skills (job seekers and Post a job): the picks and an Add skills button; picking happens in the skill sheet */
.sk-form .q-chips{gap:8px;margin-bottom:12px}
.sk-form .q-chip{padding:7px 12px 7px 11px;gap:6px;font-size:15px;font-weight:500}
.sk-form .q-chip i{font-style:normal;font-size:12px;opacity:.7}
.sk-form .q-hint{margin-top:10px}
.sk-form .q-hint+.sk-btn{margin-top:4px}
.q-work .q-sec h3.q-svc-h{margin:28px 0 2px}
.q-rules{margin-top:20px}.q-rules label{gap:10px;align-items:flex-start;cursor:pointer}.q-rules input{margin-top:3px;flex:none}
.sk-btn{display:flex;align-items:center;gap:12px;width:100%;height:56px;padding:0 16px;border:0;border-radius:18px;background:color-mix(in srgb,var(--w-ink) 6%,transparent);font:inherit;font-size:16px;font-weight:600;color:var(--w-ink);cursor:pointer;text-align:left}
.sk-btn>span{flex:1;min-width:0}
.sk-btn em{font-style:normal;font-weight:500;color:var(--w-sub);margin-left:6px}
.sk-btn svg{flex:none;width:20px;height:20px}
.sks .q-find{margin-top:4px}
.sks .q-sec{margin:0 -18px;padding:16px 18px 18px}
.sks .sks-cats.one .q-sec{margin:0;padding:4px 0 0;border-top:0}
.sks #sks_note{margin:0 0 12px;color:var(--w-sub)}
.sks .q-add{margin:0 0 12px}
.sks-flds{margin-top:4px}
.sks-flds[hidden]{display:none}
.sks-flds .q-card{padding:14px 14px 14px 18px}
.sks-flds .q-card>span{flex:1;min-width:0}
.sks-flds .chev{flex:none;width:18px;height:18px;opacity:.5}
/* Post a job: Area sheet */
.sk-btn.ar-empty>span{color:var(--w-sub);font-weight:500}
.ar .q-find{margin-top:4px}
.ar-list{display:flex;flex-direction:column;margin:0 -18px}
.ar-row{display:flex;align-items:center;gap:14px;min-height:52px;padding:0 18px;border:0;border-bottom:1px solid color-mix(in srgb,var(--w-ink) 8%,transparent);background:none;font:inherit;font-size:16px;color:var(--w-ink);text-align:left;cursor:pointer}
.ar-row>span{flex:1;min-width:0}
.ar-row svg{flex:none;width:20px;height:20px;opacity:.6}
.ar-row.on{font-weight:700}
.ar-row.on svg{opacity:1}
.ar-row.ar-use{font-weight:600}
.ar-row>span small{display:block;margin-top:2px;font-size:13px;font-weight:400;color:var(--w-sub)}
.ar-row{padding-top:8px;padding-bottom:8px}
.ar-note{margin:14px 0 4px;padding:0 18px;font-size:14px;color:var(--w-sub)}
/* Chats: Pokes on your job posts, with Accept / Pass in the row */
.crow.jp{flex-direction:column;align-items:stretch;gap:10px;cursor:default}
.jp-who{display:flex;align-items:center;gap:14px;min-width:0;text-decoration:none;color:inherit}
.crow.jp .ap-acts{margin:0}