/* Pointless mobile theme: light, iOS-native feel (system font, inset grouped lists, sticky bottom CTA).
   Components for connect.html; tokens are in tokens.css (link it first). Light only for now: dark tokens come later. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.4 var(--sans);letter-spacing:-.01em;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%}
button,input{font:inherit;color:inherit;letter-spacing:inherit}button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* App shell: a phone-width column with a nav bar, scrolling content and a sticky footer. */
.app{width:min(440px,100%);margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-top:var(--safe-t)}
.navbar{height:52px;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:0 8px;position:sticky;top:0;z-index:5;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.navbar .ttl{text-align:center;font-weight:600;font-size:17px}
.iconbtn{width:44px;height:44px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.iconbtn:active{background:var(--fill)}.iconbtn svg{width:22px;height:22px}
.stepbar{display:flex;gap:6px;padding:2px 20px 0}
.stepbar i{flex:1;height:4px;border-radius:4px;background:var(--line);overflow:hidden;position:relative}
.stepbar i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--f,0));transform-origin:left;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.stepbar i.on{--f:1}
.screen{flex:1;display:flex;flex-direction:column;padding:20px 20px 0;animation:push .32s cubic-bezier(.2,.8,.2,1)}
@keyframes push{from{opacity:0;transform:translateX(18px)}}
.screen.center{align-items:center;text-align:center;padding-top:9vh}
.screen.center .footer{align-self:stretch}
.footer{position:sticky;bottom:0;margin:auto -20px 0;padding:12px 20px calc(14px + var(--safe-b));background:linear-gradient(rgba(255,255,255,0),#fff 22%);display:flex;flex-direction:column;gap:10px}

/* Type */
.eyebrow{font-size:13px;font-weight:600;color:var(--accent);margin:0 0 6px}
.title{font:700 30px/1.12 var(--display);letter-spacing:-.025em;margin:0 0 10px}
.title.sm{font-size:26px}
.sub{font-size:16px;line-height:1.45;color:var(--muted);margin:0 0 22px}.sub b{color:var(--ink);font-weight:600}
.fine{font-size:12.5px;line-height:1.45;color:var(--muted);text-align:center;margin:0}
.wordmark{font-weight:700;font-size:17px;letter-spacing:-.03em}.wordmark i{font-style:normal;color:var(--accent)}

/* Buttons: 52px, full width, press feedback like a native control. */
.btn{width:100%;height:52px;border-radius:var(--r);border:0;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:17px;text-decoration:none;transition:transform .12s,opacity .12s}
.btn:active{transform:scale(.98);opacity:.9}
.btn.primary{background:var(--ink);color:var(--on-ink)}
.btn.accent{background:var(--accent);color:#fff}
.btn.secondary{background:var(--fill);color:var(--ink)}
.btn.text{background:transparent;color:var(--accent);height:40px;font-size:16px}
.btn .spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:sp .8s linear infinite}
.btn.loading:disabled{background:var(--ink);color:var(--on-ink)}
.btn:disabled{background:var(--line);color:var(--faint);transform:none;cursor:default}

/* Inset grouped list (iOS Settings style) */
.group{background:var(--card);border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.group.filled{background:var(--fill);box-shadow:none}
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;min-height:52px;position:relative}
.row+.row::before{content:"";position:absolute;top:0;right:0;left:var(--inset,14px);border-top:1px solid var(--sep)}
.row .grow{flex:1;min-width:0}
.row.wrap .t,.row.wrap .s{white-space:normal}
.row .t{display:block;font-size:16px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .s{display:block;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none}.ico svg{width:18px;height:18px}
.ico.green{background:var(--good-soft);color:var(--good)}.ico.coral{background:var(--accent-soft);color:var(--accent)}

/* Fields: grouped inputs with floating-style labels */
.fields{background:var(--fill);border-radius:var(--r);overflow:hidden}
.field{display:block;padding:9px 14px 8px;position:relative}
.field+.field::before{content:"";position:absolute;top:0;left:14px;right:0;border-top:1px solid var(--sep)}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:1px}
.field input{width:100%;border:0;background:transparent;padding:0;height:26px;font-size:17px;outline:0}
.fields:focus-within{box-shadow:inset 0 0 0 2px var(--ink)}
.msg{font-size:14px;color:var(--danger);min-height:20px;margin:10px 2px 0}

/* OTP: one real input laid over six boxes, so autofill and paste still work. */
.otp{position:relative;display:flex;gap:8px;justify-content:center;margin:4px 0 0}
.otp .box{width:48px;height:58px;border-radius:12px;background:var(--fill);display:grid;place-items:center;font:600 26px var(--display);transition:box-shadow .15s}
.otp .box.cur{box-shadow:inset 0 0 0 2px var(--ink)}
.otp .box.cur:empty::after{content:"";width:2px;height:26px;background:var(--ink);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.otp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;font-size:16px;caret-color:transparent}

/* Badges, spinners, status */
.badge{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;margin:0 0 22px}
.badge svg{width:32px;height:32px}
.badge.good{background:var(--good);color:#fff;animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
.badge.soft{background:var(--accent-soft);color:var(--accent)}
.badge.warn{background:#fdecea;color:var(--danger);font:700 30px var(--display)}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.ring{width:84px;height:84px;position:relative;display:grid;place-items:center;margin:0 0 24px}
.ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--line);border-top-color:var(--ink);animation:sp .9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.pill{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:999px;background:var(--fill);font-size:13.5px;font-weight:500;color:var(--text2)}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}
.brandmark{border-radius:12px;display:grid;place-items:center;font-weight:700;flex:none}
.brandmark.amazon{background:var(--navy);color:#fff;font-size:11px}
.brandmark.pointless{background:var(--card);color:var(--ink);font-size:13px;letter-spacing:-.03em;width:auto!important;padding:0 12px;display:flex;align-items:center;justify-content:center;white-space:nowrap}.brandmark.pointless i{font-style:normal;color:var(--accent)}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Connect-type intros (connect, bank): logo pair, title and subtitle centered */
.handshake{justify-content:center}
#s-intro>.title,#s-intro>.sub{text-align:center;text-wrap:balance}