/* Athra onboarding — same product, first chapter. Scoped to .ob-host / .ob / .tour / .qa.
   Every rule here is prefixed so nothing leaks into the shell (grep-first rule). */

/* ---- canonical avatar as a reusable component --------------------------- */
/* The topbar .acctbtn glyph reads these vars. They are exactly what onboard.js
   applyAvatar() computes for AV_DEFAULT (#7C63FF, the approved purple) — the third copy of
   this list, and the one that decides what the avatar looks like before any script has run.
   They used to be a DIFFERENT purple from the JS default, so the glyph changed shade a frame
   after load; the values now agree. */
:root{--av-a:#b3a5ff;--av-b:#7C63FF;--av-c:#e5e0ff;--av-d:#a695ff;--av-ring:#d8d0ff}
.athra-av{--av-size:28px;width:var(--av-size);height:var(--av-size);border-radius:999px;
  background:#FFFFFF;border:1px solid var(--av-ring);position:relative;overflow:hidden;
  display:inline-block;flex:none;transition:border-color .18s ease-out}
.athra-av::before{content:"";position:absolute;width:46%;height:46%;border-radius:999px;left:50%;
  top:17%;transform:translateX(-50%);
  background:linear-gradient(90deg,var(--av-a) 0%,var(--av-a) 50%,var(--av-b) 50%,var(--av-b) 100%);
  transition:background .18s ease-out}
.athra-av::after{content:"";position:absolute;width:62%;height:26%;left:50%;bottom:6%;
  transform:translateX(-50%);border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,var(--av-c) 0%,var(--av-c) 50%,var(--av-d) 50%,var(--av-d) 100%);
  transition:background .18s ease-out}
.athra-av.av-x::before,.athra-av.av-x::after{content:none}
.athra-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:999px}

/* ---- host + shell --------------------------------------------------------- */
.ob-host{display:block;overflow:auto}
.ob{min-height:100%;background:#FFFFFF;color:#272725;display:flex;flex-direction:column}
.ob-hd{height:52px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;border-bottom:1px solid #EFEFEE}
.ob-hd .lockup{gap:0}.ob-hd .lockup-mark{width:20px;height:20px}
.ob-dots{display:flex;gap:6px}.ob-dots i{width:6px;height:6px;border-radius:999px;background:#E3E3E1}
.ob-dots i.on{background:#272725}
.ob-body{flex:1;display:flex;align-items:stretch;min-height:0}

.ob-art{position:relative;overflow:hidden;border-radius:18px;background:#EFEFEE}
.ob-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ONE stage for every screen: the art column is a fixed 440px wide and the
   full height, so nothing shifts between Welcome, Identity, Business and Target */
.ob-card.ob-welcome-c{align-self:center}
.ob-mark{width:28px;height:28px;margin-bottom:22px}
.ob-stage{display:grid;grid-template-columns:440px minmax(420px,1fr);gap:36px;
  padding:28px;width:100%;min-height:calc(100vh - 52px)}
.ob-stage .ob-art{position:sticky;top:28px;height:calc(100vh - 52px - 56px);min-height:420px}
.ob-copy{position:absolute;left:0;right:0;bottom:0;padding:120px 28px 28px;color:#FFFFFF;
  background:linear-gradient(180deg,rgba(20,20,18,0) 0%,rgba(20,20,18,.55) 100%)}
.ob-copy b{display:block;font-size:26px;line-height:30px;font-weight:600;letter-spacing:-.015em;text-wrap:balance;margin-bottom:10px}
.ob-copy p{margin:0;font-size:13px;line-height:19px;color:rgba(255,255,255,.88);max-width:36ch}
.ob-card{max-width:560px;width:100%;align-self:start;padding:8px 8px 8px 0}
.ob-card h1{font-size:24px;line-height:30px;font-weight:500;letter-spacing:-.01em;margin:0 0 8px;text-wrap:balance}
.ob-lede{font-size:13px;line-height:19px;color:#74746F;margin:0 0 22px;max-width:46ch}
.ob-lab{font-size:11px;line-height:15px;font-weight:500;color:#92928D;letter-spacing:.02em;
  text-transform:uppercase;margin:18px 0 8px}
.ob-h2{font-size:14px;line-height:20px;font-weight:500;margin:22px 0 8px}
.ob-note{font-size:12px;color:#5D5D58;background:#F7F7F6;border:1px solid #ECECEA;border-radius:10px;padding:8px 10px;margin:0 0 12px}
.ob-muted{font-size:12px;color:#74746F;margin:8px 0}.ob-bad{font-size:12px;color:#B84A3A;margin:8px 0}
.ob-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
/* secondary actions must look like buttons: white, 1px border, same pill as primary */
.ob .btn.quiet,.tour-card .btn.quiet{background:#FFFFFF;border:1px solid #DADAD7;color:#272725;border-radius:999px;padding:0 14px}
.ob .btn.quiet:hover,.tour-card .btn.quiet:hover{background:#FAFAFA;border-color:#B6B6B3}
.ob-opt .btn{margin-top:10px}

/* reveal / motion — opacity + tiny translate only */
.ob-in{animation:ob-in .22s ease-out both}
@keyframes ob-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ob-up{transition:opacity .22s ease-out,transform .22s ease-out;opacity:0;transform:translateY(-10px)}
.ob-seq{opacity:0;animation:ob-in .26s ease-out both;animation-delay:var(--d,0ms)}

/* identity */
.ob-opts{display:flex;flex-direction:column;gap:10px}
.ob-opt{border:1px solid #E8E8E8;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;background:#FFF}
.ob-opt b{font-size:13px;font-weight:500}.ob-opt>span{font-size:12px;line-height:17px;color:#74746F}
.ob-opt .btn{align-self:flex-start;margin-top:8px}
.ob-hrow{display:flex;gap:8px;margin-top:10px}
.ob-hrow input{flex:1;height:34px;border:1px solid #E3E3E1;border-radius:9px;padding:0 12px;font:inherit;font-size:13px;color:#272725;background:#FFF}
.ob-hrow input:focus{outline:none;border-color:#B6B6B3;box-shadow:0 0 0 3px rgba(39,39,37,.06)}
.ob-found{display:flex;gap:12px;align-items:center;margin-top:12px}
.ob-found .av{width:44px;height:44px;border-radius:999px;object-fit:cover;background:#EFEFEE}
.ob-found .pk{display:flex;flex-direction:column}.ob-found .pk b{font-size:14px;font-weight:500}
.ob-found .pk .h{font-size:12px;color:#74746F}.ob-found .pk .ok{font-size:11px;color:#2F7D4F;margin-top:2px}
.ob-foundyou{font-size:13px;color:#272725;margin:10px 0 0;font-weight:500}
.ob-hout .btn{margin-top:10px}

/* personalise */
.ob-bigav{display:flex;justify-content:center;margin:6px 0 14px}
.ob-src{display:flex;gap:8px;justify-content:center}
.ob-srcb{height:30px;padding:0 12px;border-radius:999px;border:1px solid #E3E3E1;background:#FFF;font:inherit;font-size:12px;color:#272725;cursor:pointer}
.ob-srcb.on{background:#272725;color:#FFF;border-color:#272725}
.ob-sw{display:flex;gap:10px;flex-wrap:wrap}
.ob-swb{width:28px;height:28px;border-radius:999px;border:0;cursor:pointer;position:relative;
  transition:transform .12s ease-out;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.ob-swb:hover{transform:scale(1.06)}
.ob-swb.on{box-shadow:0 0 0 2px #FFF,0 0 0 4px #272725;transform:scale(.96)}
.ob-swb.on::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:10px;
  border:solid #FFF;border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}
.ob-swb:focus-visible{outline:2px solid #272725;outline-offset:3px}
.ob-plus{background:#FFF;border:1px dashed #C9C9C6;color:#74746F;font-size:16px;line-height:1}
.ob-custom{display:flex;align-items:center;gap:10px;margin-top:10px}
.ob-crow{display:flex;gap:8px;align-items:center}
.ob-crow input[type=color]{width:28px;height:28px;border:0;padding:0;background:none;cursor:pointer}
.ob-crow input[type=text]{width:92px;height:28px;border:1px solid #E3E3E1;border-radius:8px;padding:0 8px;font:inherit;font-size:12px;font-family:var(--mono,ui-monospace,monospace)}
.ob-prev{position:relative;height:150px;border-radius:14px;overflow:hidden;margin-top:18px}
.ob-prev .ob-art{position:absolute;inset:0;border-radius:0}
.ob-prevbar{position:absolute;left:14px;right:14px;top:34px;height:44px;background:#FFF;border:1px solid #E8E8E8;
  border-radius:10px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.ob-prevbar .lockup-mark{width:18px;height:18px}

/* business */
.ob-f{margin-bottom:14px}.ob-f .fl{display:block;font-size:12px;font-weight:500;color:#272725;margin-bottom:6px}
.ob-f textarea,#ob-nl{width:100%;min-height:40px;resize:vertical;border:1px solid #E3E3E1;border-radius:10px;padding:9px 12px;
  font:inherit;font-size:13px;line-height:20px;color:#272725;background:#FFF}
.ob-f textarea:focus,#ob-nl:focus{outline:none;border-color:#B6B6B3;box-shadow:0 0 0 3px rgba(39,39,37,.06)}
.ob-f textarea::placeholder,#ob-nl::placeholder{color:#A6A6A2}

/* target */
.ob-tools{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.ob-tools input{flex:1;height:32px;border:1px solid #E3E3E1;border-radius:9px;padding:0 10px;font:inherit;font-size:12px}
.ob-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ob-g{flex-basis:100%;font-size:11px;color:#92928D;text-transform:uppercase;letter-spacing:.02em;margin:8px 0 2px}
.ob-chip{height:28px;padding:0 11px;border-radius:999px;border:1px solid #E3E3E1;background:#FFF;font:inherit;font-size:12px;
  color:#272725;cursor:pointer;white-space:nowrap;transition:background .12s ease-out,border-color .12s ease-out}
.ob-chip:hover{background:#FAFAFA}
.ob-chip.on{background:#EAF2FB;border-color:#B6D9F7;color:#1F3A5A}
.ob-other{margin-top:8px;height:30px;border:1px dashed #D3D3D0;border-radius:999px;padding:0 12px;font:inherit;font-size:12px;width:140px;background:#FFF}
.ob-roles{margin-top:6px}
.ob-sum{font-size:15px;line-height:22px;font-weight:500;color:#272725;margin:0 0 14px}
#ob-nl{margin-top:6px}

/* working + aha overlay — over the REAL app, which keeps running underneath */
.ob-over{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:28px}
/* the real app keeps running underneath and stays faintly visible through the art */
/* No backdrop blur: blurring the live app every frame was the lag. A plain dim reads the same. */
.ob-overbg{position:absolute;inset:0;background:rgba(248,247,244,.86)}
.ob-overbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.ob-overbg img.on{opacity:.62}
.ob-over .ob-card{position:relative;align-self:center;justify-self:center;background:#FFF;border:1px solid #E8E8E8;border-radius:18px;padding:26px 28px;
  box-shadow:0 20px 60px rgba(0,0,0,.10);width:min(560px,100%);max-height:calc(100vh - 56px);overflow:auto}
.ob-work h1{font-size:20px;line-height:26px;margin-bottom:16px}
.ob-worklog .lw-log{margin:0}
.ob-worklog .lw-log > summary{font-size:13px}
.ob-worklog .lw-step{height:34px;font-size:13px}
.ob-worklog .lw-step .si{width:22px;height:22px;border-radius:6px}.ob-worklog .lw-step .si svg{width:13px;height:13px}
.ob-worklog .lw-log-b::before{left:11px}
.ob-over.ob-out{transition:opacity .26s ease-out;opacity:0;pointer-events:none}
.ob-steps{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ob-steps li{font-size:13px;line-height:19px;color:#A6A6A2;padding-left:16px;position:relative;transition:color .3s}
.ob-steps li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:999px;background:#E3E3E1}
.ob-steps li.on{color:#272725}.ob-steps li.on::before{background:#272725}
.ob-counts{font-size:12px;color:#74746F;margin:16px 0 0;font-variant-numeric:tabular-nums}
.ob-aha .ob-lede{margin-bottom:14px}
.ob-stack{display:flex;margin-bottom:14px}.ob-stack .av{width:28px;height:28px;border-radius:999px;object-fit:cover;background:#EFEFEE;border:2px solid #FFF;margin-left:-8px}
.ob-stack .av:first-child{margin-left:0}
.ob-res{display:flex;flex-direction:column;gap:10px}
.ob-r{border:1px solid #E8E8E8;border-radius:14px;padding:12px 14px;display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;
  opacity:0;animation:ob-in .28s ease-out both;animation-delay:var(--d,0ms)}
.ob-rw{display:flex;gap:10px;align-items:center}.ob-rw .av{width:34px;height:34px;border-radius:999px;object-fit:cover;background:#EFEFEE}
.ob-rw b{display:block;font-size:13px;font-weight:500}.ob-rw span{display:block;font-size:11px;color:#74746F}
.ob-pill{font-size:11px;height:20px;line-height:20px;padding:0 8px;border-radius:6px;background:#F1F1F0;color:#5D5D58}
.ob-pill.s{background:#E6F4EC;color:#2F7D4F}.ob-pill.g{background:#EEF3F8;color:#3A587A}
.ob-why{grid-column:1/-1;display:flex;flex-direction:column;gap:2px}
.ob-why i{font-style:normal;font-size:10px;letter-spacing:.03em;text-transform:uppercase;color:#92928D;margin-bottom:2px}
.ob-why span{font-size:12px;line-height:17px;color:#272725}
.ob-link{grid-column:1/-1;justify-self:start;background:none;border:0;padding:0;font:inherit;font-size:12px;color:#272725;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ob-noticed{margin-top:12px;padding:12px 14px;border-radius:12px;background:#FBF6EE;border:1px solid #F0E2C8;display:flex;flex-direction:column;gap:4px}
.ob-noticed b{font-size:12px;font-weight:500}.ob-noticed span{font-size:12px;line-height:17px;color:#5D5D58}
.ob-aha>.btn{margin-top:18px}

/* Athra mark breathes while the real search runs; settles exactly when it stops */
body.ob-thinking .lockup-mark{animation:ob-breathe 2.6s ease-in-out infinite;transform-origin:50% 50%}
@keyframes ob-breathe{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(3deg) scale(1.03)}}

/* ---- contextual tour ----------------------------------------------------- */
.tour{position:fixed;inset:0;z-index:95;pointer-events:none}
.tour-hole{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(25,25,23,.30),0 0 0 2px var(--av-b,#d3602c);
  pointer-events:none;transition:left .2s ease-out,top .2s ease-out,width .2s ease-out,height .2s ease-out}
.tour-target{position:relative}
.tour-card{position:fixed;width:340px;background:#FFF;border:1px solid #E8E8E8;border-radius:14px;padding:14px 16px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);pointer-events:auto;z-index:97;transition:left .18s ease-out,top .18s ease-out}
.tour-card b{display:block;font-size:13px;line-height:18px;font-weight:500;margin-bottom:4px}
.tour-card p{font-size:12px;line-height:17px;color:#5D5D58;margin:0}
.tour-f{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:8px}
.tour-n{font-size:11px;color:#92928D}.tour-b{display:flex;gap:6px}
.tour-b .btn{height:28px;padding:0 10px;font-size:12px}

/* ---- quick actions ------------------------------------------------------- */
.qa{position:fixed;right:20px;bottom:20px;z-index:96;width:280px;background:#FFF;border:1px solid #E8E8E8;border-radius:14px;
  padding:12px 12px 8px;box-shadow:0 12px 30px rgba(0,0,0,.08);animation:ob-in .22s ease-out both}
.qa>b{display:block;font-size:12px;font-weight:500;margin:0 4px 6px}
.qa-r{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:7px 6px;border-radius:8px;font:inherit;font-size:12px;color:#272725;cursor:pointer;text-align:left}
.qa-r:hover{background:#FAFAFA}.qa-r i{font-style:normal;width:16px;text-align:center;color:#74746F}
.qa-x{position:absolute;right:8px;top:6px;border:0;background:none;font-size:16px;color:#92928D;cursor:pointer;width:24px;height:24px;border-radius:6px}
.qa-x:hover{background:#F5F5F5}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:900px){
  .ob-stage{grid-template-columns:1fr;padding:16px}
  .ob-stage .ob-art{position:relative;top:auto;height:260px;min-height:0}
  .ob-stage{min-height:0}.ob-card.ob-welcome-c{align-self:start}
  .ob-copy{padding:60px 18px 18px}.ob-copy b{font-size:20px;line-height:24px}
  .ob-card{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .ob-in,.ob-seq,.ob-r,.qa{animation:none;opacity:1}
  .ob-up,.ob-overbg img,.tour-card,.ob-swb,.athra-av,.athra-av::before,.athra-av::after{transition:none}
  body.ob-thinking .lockup-mark{animation:none}
}

.setup.ob-host{display:block;overflow:auto}

/* aha teaser: face and name are real, the analysis is blurred until you enter */
.ob-blur{display:flex;flex-direction:column;gap:2px;filter:blur(5px);user-select:none;pointer-events:none;opacity:.85}
.ob-more{align-self:center;margin-left:8px;font-size:12px;color:#5D5D58;font-weight:500}
.ob-rest{display:flex;align-items:center;gap:8px;margin-top:12px;padding:10px 14px;border:1px dashed #DADAD7;border-radius:12px;font-size:12px;color:#5D5D58}
.ob-rest b{font-size:13px;color:#272725;font-weight:500}

.ob-sug{display:flex;flex-direction:column;gap:4px;margin:4px 0 6px}
.ob-sug .ob-lab{margin-top:14px}

.ob-why-q{font-size:12px;line-height:17px;color:#5D5D58;margin:6px 0 0;padding-left:10px;border-left:2px solid #E3E3E1}
.ob-why-q i{font-style:normal;color:#92928D}
.ob-opt .ob-pill{align-self:flex-start;margin-top:8px}

/* ---- 2026-09-10 onboarding clarity (Dawood's physical walk) ---------------- */
/* chips are choices: pointer, hover, and an unmistakable selected state with a check */
.ob-chip{cursor:pointer;transition:background .12s ease-out,border-color .12s ease-out,color .12s ease-out}
.ob-chip:focus-visible{outline:2px solid #272725;outline-offset:2px}
.ob-chip.on{background:#272725;border-color:#272725;color:#FFF}
.ob-chip.on::before{content:"\2713";font-size:11px;margin-right:6px}
.ob-pickhint{margin-top:6px}
/* the one obvious way forward once a profile is found */
.ob-go{margin-top:12px;height:38px;padding:0 18px;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.ob-found+.ob-foundyou+.ob-go,.ob-found+.ob-go{margin-top:12px}
.ob-hout .ob-link{display:block;margin-top:10px;font-size:12px;color:#74746F;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
/* a disabled primary looks disabled, not broken */
.ob-foot .btn.primary:disabled,.ob-hout .btn.primary:disabled{opacity:.45;cursor:not-allowed}
/* Athra is working: a quiet pulse on the ellipsis, no percentages */
.ob-live{display:flex;align-items:center;gap:2px;color:#272725}
.ob-dotsy{display:inline-block;letter-spacing:1px;animation:ob-dotsy 1.4s ease-in-out infinite}
@keyframes ob-dotsy{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.ob-dotsy{animation:none;opacity:1}}

/* Waitlist "Follow Athra on X" (one class deeper than the app's `.btn:not(.primary):not(.quiet)`, which painted it white): a solid ink pill with a slow light sweep, not a black outline. */
.ob .ob-foot .btn.ob-xbtn{position:relative;overflow:hidden;display:inline-flex;align-items:center;height:30px;padding:0 14px;
  border-radius:999px;border:0;background:#161615;color:#fff;text-decoration:none;font-weight:500;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.18),0 4px 12px -4px rgba(0,0,0,.25);
  transition:transform .16s cubic-bezier(.23,1,.32,1),background .16s ease}
.ob .ob-foot .btn.ob-xbtn:hover{background:#262624}
.ob .ob-foot .btn.ob-xbtn:active{transform:scale(.97)}
.ob .ob-foot .btn.ob-xbtn::after{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  animation:obshimmer 3.2s cubic-bezier(.4,0,.2,1) infinite 1s}
@keyframes obshimmer{0%{transform:translateX(-120%)}45%,100%{transform:translateX(120%)}}
@media (prefers-reduced-motion:reduce){.ob .ob-foot .btn.ob-xbtn::after{animation:none}}