[hidden]{display:none!important}
/* Shared styles for signup, login and onboarding mockups (same tokens as index.html) */
:root{
  --paper:#f6f3ec; --paper-2:#efeae0; --card:#ffffff;
  --ink:#14130f; --ink-2:#3b3a34; --muted:#77736a; --line:#e2dccf;
  --inv:#14130f; --on-inv:#f6f3ec; --on-inv-2:rgba(246,243,236,.72);
  --ok-tx:#0f7a37; --warn-tx:#8a5a00; --coral-tx:#c4381c; --sky-tx:#1663c7; --violet-tx:#5a3be0;
  --lime:#c6f432; --lime-ink:#2c3a00; --coral:#ff5b3a; --violet:#6b4cff; --sky:#2f8cff;
  --ok:#17a34a; --warn:#e8a200; --bad:#e5383b;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font:16px/1.55 var(--body);-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
h1,h2,h3{font-family:var(--display);letter-spacing:-.025em;line-height:1.05}

.logo{display:inline-flex;align-items:center;gap:10px;font:800 22px var(--display);letter-spacing:-.03em}
.logo-mark{width:34px;height:34px;border-radius:10px;background:var(--ink) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M19 52V15H32a11 11 0 0 1 0 22' fill='none' stroke='%23c6f432' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'/><path d='M32 37c7 0 12 4 16 11' fill='none' stroke='%23ff5b3a' stroke-width='8' stroke-linecap='round'/><path d='M40.6 45.6L48 48l.8-7.6' fill='none' stroke='%23ff5b3a' stroke-width='5.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/86% no-repeat;display:grid;place-items:center;position:relative;overflow:hidden;flex:none}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:12px;font-weight:600;font-size:15.5px;transition:transform .12s,background .15s,box-shadow .15s,opacity .15s;width:100%}
.btn:active{transform:scale(.99)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{box-shadow:0 8px 20px -8px rgba(20,19,15,.55)}
.btn-primary[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-sso{background:var(--card);border:1.5px solid var(--line);color:var(--ink)}
.btn-sso:hover{border-color:var(--ink)}
.btn-sso svg{flex:none}
.btn-text{width:auto;padding:8px 4px;font-weight:600;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.last-used{font:600 10px var(--mono);background:var(--lime);color:var(--lime-ink);padding:3px 7px;border-radius:999px;margin-left:auto}

.field{display:grid;gap:7px;margin-bottom:14px}
.field label{font-weight:600;font-size:14px;display:flex;justify-content:space-between}
.field label a{font-weight:500;color:var(--muted);text-decoration:underline}
.input{width:100%;padding:13px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--card);font-size:15.5px;transition:border-color .15s,box-shadow .15s}
.input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px rgba(198,244,50,.45)}
.input.err{border-color:var(--bad)}
.hint{font-size:13px;color:var(--muted)}
.hint.err{color:var(--bad)}
.hint.ok{color:var(--ok)}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:18px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* split auth layout */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:100vh}
.auth-main{display:flex;flex-direction:column;padding:28px 40px}
.auth-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.auth-top .switch{font-size:14px;color:var(--ink-2)}
.auth-top .switch a{font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.auth-form{width:100%;max-width:400px;margin:auto;padding:40px 0}
.auth-form h1{font-size:40px;font-weight:800;margin-bottom:10px}
.auth-form .sub{color:var(--ink-2);margin-bottom:26px}
.sso{display:grid;gap:10px}
.legal{font-size:12.5px;color:var(--muted);margin-top:18px;text-align:center}
.legal a{text-decoration:underline}
.auth-foot{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.status{display:inline-flex;gap:8px;align-items:center}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(23,163,74,.5);animation:pulse 1.8s infinite}
@keyframes pulse{to{box-shadow:0 0 0 10px rgba(23,163,74,0)}}

.auth-side{background:var(--ink);color:var(--paper);margin:12px;border-radius:28px;padding:48px;display:flex;flex-direction:column;justify-content:space-between;gap:30px;position:relative;overflow:hidden}
.auth-side h2{font-size:clamp(30px,3.2vw,44px);font-weight:800}
.auth-side h2 em{font-style:normal;color:var(--lime)}
.auth-side p{color:#cfcabd}

.plan-chip{display:flex;gap:12px;align-items:center;background:#f3f0ff;border:1px solid #ddd5ff;border-radius:14px;padding:12px 14px;margin-bottom:22px;font-size:14px}
.plan-chip b{display:block}
.plan-chip .ic{width:34px;height:34px;border-radius:10px;background:var(--violet);color:#fff;display:grid;place-items:center;font-weight:800;flex:none}
.plan-chip a{margin-left:auto;font-weight:600;text-decoration:underline;font-size:13px;white-space:nowrap}

/* code input */
.code{display:flex;gap:8px;margin:6px 0 14px}
.code input{width:100%;min-width:0;aspect-ratio:1/1.15;text-align:center;font:700 24px var(--mono);border-radius:12px;border:1.5px solid var(--line);background:var(--card)}
.code input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px rgba(198,244,50,.45)}
.code.ok input{border-color:var(--ok);background:#effbea}

.pw-meter{display:flex;gap:4px;margin-top:2px}
.pw-meter i{flex:1;height:4px;border-radius:4px;background:var(--line);transition:background .2s}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(30px);opacity:0;background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:12px;font-size:14px;font-weight:500;transition:.25s;z-index:99;pointer-events:none;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translateX(-50%)}

.help{position:fixed;right:20px;bottom:20px;z-index:60;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 14px 9px 9px;display:flex;align-items:center;gap:10px;font-weight:600;font-size:13.5px;box-shadow:0 14px 30px -14px rgba(0,0,0,.35)}
/* phones: pages with the bottom tab bar keep the button above it, so it never covers a tab */
@media (max-width:860px){body:has(nav.nav) .help{bottom:calc(76px + env(safe-area-inset-bottom))!important;right:12px!important}}
.help .faces{display:flex}
.help .faces i{width:24px;height:24px;border-radius:50%;border:2px solid var(--card);margin-left:-8px;display:block}
.help .faces i:first-child{margin-left:0;background:#ffb199}.help .faces i:nth-child(2){background:#8ec5fc}.help .faces i:nth-child(3){background:var(--lime)}

.n-x{background:#111}.n-li{background:#0a66c2}.n-ig{background:linear-gradient(45deg,#f9a825,#e1306c,#833ab4)}.n-tt{background:#25f4ee;box-shadow:inset -4px 0 #fe2c55}.n-yt{background:#ff0000}.n-fb{background:#1877f2}.n-bs{background:#0085ff}.n-th{background:#000}.n-pi{background:#e60023}.n-rd{background:#ff4500}.n-ma{background:#6364ff}.n-tg{background:#29a9eb}.n-gb{background:#34a853}.n-dc{background:#5865f2}.n-md{background:#222}.n-wp{background:#21759b}

@media (max-width:900px){
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
  .auth-main{padding:20px 16px}
  .auth-form h1{font-size:34px}
  .help span{display:none}.help{padding:8px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- engagement upgrades (shared) ---------- */
:root[data-theme="dark"]{--ok-tx:#4ade80;--warn-tx:#f5c04a;--coral-tx:#ff8a70;--sky-tx:#6aaeff;--violet-tx:#c3b5ff;--inv:#26241f;--on-inv:#f3efe6;--on-inv-2:rgba(243,239,230,.72);--paper:#121110;--paper-2:#1c1b18;--card:#1a1916;--ink:#f3efe6;--ink-2:#cfcabd;--muted:#8d887d;--line:#2e2b25}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ok-tx:#4ade80;--warn-tx:#f5c04a;--coral-tx:#ff8a70;--sky-tx:#6aaeff;--violet-tx:#c3b5ff;--inv:#26241f;--on-inv:#f3efe6;--on-inv-2:rgba(243,239,230,.72);--paper:#121110;--paper-2:#1c1b18;--card:#1a1916;--ink:#f3efe6;--ink-2:#cfcabd;--muted:#8d887d;--line:#2e2b25}}
.auth-side{background:#14130f;color:#f6f3ec}
:root[data-theme="dark"] .auth-side{border:1px solid #2e2b25}
:root[data-theme="dark"] .logo-mark{background-color:#2a2823}
:root[data-theme="dark"] .plan-chip{background:#211d33;border-color:#3a3160}
:root[data-theme="dark"] .code.ok input{background:#15291a}
:root[data-theme="dark"] .btn-sso svg path[fill="#111"]{fill:#f3efe6}
.top-r{display:flex;align-items:center;gap:14px}
.theme-btn{width:36px;height:36px;border-radius:10px;border:1.5px solid var(--line);display:grid;place-items:center;font-size:16px;background:var(--card)}
.theme-btn:hover{border-color:var(--ink)}

.stepper{display:flex;align-items:center;gap:10px;font:600 11.5px var(--mono);color:var(--muted);margin-bottom:18px;letter-spacing:.04em}
.stepper .dots{display:flex;gap:5px}
.stepper .dots i{width:22px;height:5px;border-radius:5px;background:var(--line);transition:background .3s}
.stepper .dots i.on{background:var(--ink)}

.promise-row{display:flex;flex-wrap:wrap;gap:8px}
.promise-row span{white-space:nowrap;font-size:12.5px;font-weight:600;padding:6px 10px;border-radius:999px;background:var(--card);border:1px solid var(--line);color:var(--ink-2)}
.auth-side .promise-row span{background:#1c1b17;border-color:#2e2b25;color:#cfcabd}
.m-strip{display:none;margin:4px 0 22px}

/* workspace preview */
.wsp{background:#1c1b17;border:1px solid #2e2b25;border-radius:20px;padding:16px;display:grid;gap:12px}
.wsp-h{display:flex;gap:12px;align-items:center}
.wsp-logo{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font:800 18px var(--display);color:#fff;background:#6b4cff;transition:background .4s,transform .3s}
.wsp-logo.bump{transform:scale(1.12)}
.wsp-h b{color:#fff;display:block;font-size:15px;transition:opacity .2s}
.wsp-h span{color:#8d887d;font-size:12.5px}
.wsp-h em{margin-left:auto;font:600 10px var(--mono);font-style:normal;background:var(--lime);color:var(--ink);padding:4px 8px;border-radius:999px;color:#14130f}
.wsp-week{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.wsp-week div{background:#26241f;border-radius:9px;padding:7px;min-height:62px;font-size:10.5px;color:#cfcabd;display:flex;flex-direction:column;gap:4px}
.wsp-week small{font:600 9px var(--mono);color:#8d887d}
.wsp-week .p{background:#33302a;border-radius:6px;padding:4px 5px;animation:pop .4s ease both}
.wsp-week .p i{display:inline-block;width:8px;height:8px;border-radius:3px;margin-right:3px;vertical-align:0}
@keyframes pop{from{opacity:0;transform:scale(.7)}}

/* lifecycle demo */
.life{background:#1c1b17;border:1px solid #2e2b25;border-radius:20px;padding:16px}
.life-top{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.life-top .nets{display:flex;gap:4px}
.life-top .nets i{width:18px;height:18px;border-radius:6px}
.life-top b{color:#fff;font-size:14px}
.life-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.life-steps div{font:600 10px var(--mono);color:#6f6b62;padding-top:9px;position:relative;transition:color .3s}
.life-steps div::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;border-radius:4px;background:#2e2b25}
.life-steps div::after{content:"";position:absolute;top:0;left:0;height:4px;border-radius:4px;background:var(--lime);width:0;transition:width .9s ease}
.life-steps div.on{color:#e9e5da}
.life-steps div.on::after{width:100%}
.life-out{margin-top:12px;display:flex;gap:10px;align-items:center;font-size:13.5px;color:#cfcabd;min-height:22px}
.life-out b{color:var(--lime)}

/* proof cards */
.proof{position:relative;min-height:112px}
.proof-card{position:absolute;inset:0;background:#1c1b17;border:1px solid #2e2b25;border-radius:20px;padding:16px;display:flex;gap:14px;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.proof-card.on{opacity:1;transform:none}
.proof-card .av{width:44px;height:44px;border-radius:50%;flex:none}
.proof-card p{color:#e9e5da;font-size:14.5px;margin-bottom:6px}
.proof-card small{color:#8d887d;font-size:12.5px}
.proof-card .res{font:700 12px var(--mono);color:var(--lime);margin-left:6px}
.sample-tag{font:600 9.5px var(--mono);color:#6f6b62;letter-spacing:.06em;text-align:right;margin-top:6px}

/* success check */
.okburst{display:none;justify-content:center;margin:6px 0 4px}
.okburst.on{display:flex}
.okburst svg circle{stroke-dasharray:160;stroke-dashoffset:160;animation:draw .5s ease forwards}
.okburst svg path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .35s .45s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* cookie banner */
.cookie{position:fixed;right:20px;bottom:76px;z-index:70;max-width:360px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:0 24px 50px -20px rgba(0,0,0,.4);font-size:13.5px;color:var(--ink-2);transform:translateY(20px);opacity:0;transition:.35s}
.cookie.on{transform:none;opacity:1}
.cookie b{color:var(--ink);display:block;margin-bottom:4px;font-size:14.5px}
.cookie .acts{display:flex;gap:8px;margin-top:12px}
.cookie .acts .btn{padding:10px 12px;font-size:13.5px}

/* login feed animation */
.feed.anim{opacity:0;transform:translateX(16px);transition:opacity .45s,transform .45s}
.feed.anim.in{opacity:1;transform:none}
.since{display:flex;align-items:baseline;gap:10px;color:#cfcabd;font-size:14px}
.since b{font:800 44px var(--display);color:var(--lime);letter-spacing:-.03em}

@media (max-width:900px){.m-strip{display:block}.cookie{left:12px;right:12px;bottom:12px;max-width:none}}