/* First-visit welcome (intro.js): icons pop in, the "Read me first" note, then the cursor walks to Start. */
.intro-ui{position:fixed;inset:0;z-index:150;pointer-events:none}
.intro-ui.out{opacity:0;transition:opacity .35s ease}
.intro-cursor{position:fixed;left:0;top:0;width:22px;height:30px;opacity:0;transition-property:transform,opacity;transition-timing-function:cubic-bezier(.45,.05,.25,1);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 30'%3E%3Cpath d='M2 2v22l6-6 4 10 4-2-4-10h8z' fill='%23fff' stroke='%2317191B' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
  filter:drop-shadow(2px 3px 0 rgba(0,0,0,.18))}
.intro-cursor.in{opacity:1}
.intro-desk #wins,.intro-desk #dock{opacity:0}
#icons > .icon.intro-pop{animation:intro-pop .42s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes intro-pop{from{opacity:0;transform:translateY(10px) scale(.6)}to{opacity:1;transform:none}}
#icons > .icon.intro-hit svg{transform:scale(.88)}
#icons > .icon.intro-hit span{background:var(--lime);color:var(--lime-ink,var(--ink));border-color:var(--line)}
.intro-glow{outline:3px solid var(--lime);outline-offset:3px;border-radius:6px;transition:outline-color .2s}
@media (prefers-reduced-motion:reduce){#icons > .icon.intro-pop{animation:none}.intro-cursor{display:none}}

/* the note */
.intro-ui.noting,.intro-ui.noted{pointer-events:auto}
.intro-ui.noted{pointer-events:none}
.intro-scrim{position:fixed;inset:0;background:rgba(23,25,27,.22);opacity:0;transition:opacity .35s ease}
.intro-ui.noting .intro-scrim{opacity:1}
.intro-ui.noted .intro-scrim{opacity:0}
.intro-note{position:fixed;left:50%;top:50%;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;transform:translate(-50%,-46%) scale(.96);opacity:0;
  background:var(--win,#fff);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:6px 6px 0 var(--line);
  transition:opacity .3s ease,transform .38s cubic-bezier(.2,.9,.3,1.2);visibility:hidden}
.intro-ui.noting .intro-note{opacity:1;transform:translate(-50%,-50%);visibility:visible}
.intro-note.closing{opacity:0 !important;transform:translate(-50%,-50%) scale(.94) !important;transition:opacity .22s ease,transform .22s ease}
.intro-note .tb{display:flex;align-items:center;gap:8px;height:28px;padding:0 10px;border-bottom:1px solid var(--line);background:var(--paper-2,var(--paper))}
.intro-note .tb .stripes{flex:1;height:9px;background:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 3px);opacity:.55}
.intro-note .tb .title{font-family:var(--display);font-weight:700;font-size:13px}
.intro-note .tb .box{width:13px;height:13px;border:1px solid var(--line);background:var(--win,#fff);border-radius:2px;padding:0;cursor:pointer}
.intro-note .tb .box:hover,.intro-note .tb .box:focus-visible{background:var(--lime);outline:none}
.intro-body{padding:26px 30px 24px;display:grid;gap:12px}
.intro-mark{width:22px;height:22px;background:var(--lime);border:1px solid var(--line);transform:rotate(45deg);box-shadow:2px 2px 0 var(--line);border-radius:3px;margin:2px 0 4px 3px}
.intro-eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.intro-note h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(24px,4.4vw,32px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.intro-note h2 em{font-style:normal;background:var(--lime);color:var(--lime-ink);padding:0 .14em;border-radius:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.intro-note p{margin:0;font-size:16px;line-height:1.5;color:var(--ink-2,var(--ink));max-width:60ch}
.intro-note .intro-turn{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink);margin-bottom:6px}
.intro-steps{list-style:none;margin:6px 0 2px;padding:0;display:flex;flex-wrap:wrap;gap:6px;counter-reset:s}
.intro-steps li{counter-increment:s;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:4px 10px;background:var(--paper)}
.intro-steps li::before{content:counter(s,decimal-leading-zero) " ";color:var(--muted)}
.intro-steps li:not(:last-child)::after{content:"  \2192";color:var(--muted)}
.intro-note .intro-foot{font-size:14px;color:var(--muted);text-wrap:pretty}
.intro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px}
.intro-actions .intro-go{font-size:16px;padding:10px 20px}
.intro-actions .intro-login{font-size:15px;padding:9px 16px}
.intro-self{font:inherit;font-size:14px;background:none;border:0;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 2px}
.intro-self:hover,.intro-self:focus-visible{color:var(--ink);background:var(--lime);outline:none;border-radius:4px}
.intro-toast{position:fixed;left:50%;bottom:calc(86px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);max-width:calc(100vw - 32px);opacity:0;
  background:var(--ink);color:var(--paper);border-radius:10px;padding:10px 16px;font-family:var(--display);font-weight:600;font-size:15px;transition:opacity .25s,transform .25s}
.intro-toast.in{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.intro-note,.intro-scrim,.intro-toast{transition:none}}
.intro-note h2 .intro-punch{display:block;margin-top:6px}

/* compact note: the desk stays in view around it */
.intro-scrim{background:rgba(23,25,27,.08)}
.intro-note{width:min(380px,calc(100vw - 32px))}
.intro-body{padding:18px 20px 18px;gap:10px}
.intro-note h2{font-size:clamp(20px,3.4vw,24px);line-height:1.12}
.intro-note h2 .intro-punch{margin-top:4px}
.intro-note p{font-size:14.5px;line-height:1.45}
.intro-actions{margin-top:2px;gap:12px}
.intro-actions .intro-go{font-size:15px;padding:8px 16px}
.intro-actions .intro-login{font-size:14px;padding:7px 14px}
.intro-self{font-size:13.5px}
body.phone .intro-note{top:auto;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px) scale(.98)}
body.phone .intro-ui.noting .intro-note{transform:translate(-50%,0)}
body.phone .intro-note.closing{transform:translate(-50%,0) scale(.94) !important}

.intro-look{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.intro-look span{margin-right:6px}
.intro-look button{font:inherit;letter-spacing:.04em;text-transform:none;font-family:var(--display);font-weight:600;font-size:13px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:3px 10px;cursor:pointer}
.intro-look button.on{background:var(--lime);color:var(--lime-ink);box-shadow:1px 1px 0 var(--line)}
.intro-look button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}



/* the early-adopter note: tiny, in the corner, until closed */
.psst-note{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:60;width:min(250px,calc(100vw - 32px));
  background:var(--win,#fff);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:4px 4px 0 var(--line);
  opacity:0;transform:translateY(10px);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.9,.3,1.2)}
.psst-note.in{opacity:1;transform:none}
.psst-note .tb{display:flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-bottom:1px solid var(--line);background:var(--lime)}
.psst-note .tb .stripes{flex:1;height:7px;background:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px 3px);opacity:.45}
.psst-note .tb .title{font-family:var(--display);font-weight:700;font-size:12px;color:var(--lime-ink,var(--ink))}
.psst-note .tb .box{width:11px;height:11px;border:1px solid var(--line);background:var(--win,#fff);border-radius:2px;padding:0;cursor:pointer;display:grid;place-items:center;color:var(--ink)}
.psst-note .tb .box::before,.intro-note .tb .box::before{content:"";width:7px;height:7px;background:linear-gradient(45deg,transparent 43%,currentColor 43% 57%,transparent 57%),linear-gradient(-45deg,transparent 43%,currentColor 43% 57%,transparent 57%)}
.intro-note .tb .box{display:grid;place-items:center;color:var(--ink)}
.psst-body{padding:10px 12px 12px;display:grid;gap:4px}
.psst-body b{font-family:var(--display);font-weight:800;font-size:15px;line-height:1.2}
.psst-body span{font-size:12.5px;line-height:1.4;color:var(--ink-2,var(--ink))}
.psst-go{justify-self:start;margin-top:4px;font:inherit;font-family:var(--display);font-weight:700;font-size:12.5px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:4px 10px;box-shadow:2px 2px 0 var(--line);cursor:pointer}
.psst-go:hover,.psst-go:focus-visible{background:var(--lime);outline:none}
/* phones: a small tag in the corner, never a banner over the desk */
body.phone .psst-note{right:max(10px,env(safe-area-inset-right,0px));width:206px;bottom:calc(66px + env(safe-area-inset-bottom,0px))}
body.phone .psst-note .tb{height:30px;padding:0 4px 0 2px}
body.phone .psst-note .tb .box{width:18px;height:18px;border-radius:4px}
body.phone .psst-note .tb .box::before{width:8px;height:8px}
body.phone .psst-body{padding:8px 10px 10px;gap:2px}
body.phone .psst-body b{font-size:14px}
body.phone .psst-body .psst-more{display:none}
body.phone .psst-go{font-size:12.5px;padding:5px 10px}
@media (prefers-reduced-motion:reduce){.psst-note{transition:none}}

/* phones: the hook stays a small note so the desktop shows around it */
body.phone .intro-note{width:min(340px,calc(100vw - 24px))}
body.phone .intro-body{padding:14px 16px 14px;gap:8px}
body.phone .intro-note h2{font-size:19px}
body.phone .intro-note p{font-size:13.5px}
body.phone .intro-note .tb{height:34px}
body.phone .intro-note .tb .box{width:18px;height:18px;border-radius:4px}
body.phone .intro-note .tb .box::before{width:8px;height:8px}
body.has-win .psst-note{display:none}
/* touch screens: finger-sized close boxes on the notes */
@media (pointer:coarse){
  .psst-note .tb,.intro-note .tb{height:32px}
  .psst-note .tb .box,.intro-note .tb .box{width:18px;height:18px;border-radius:4px}
  .psst-note .tb .box::before,.intro-note .tb .box::before{width:8px;height:8px}
}
/* The Psst note shows alongside the hook, above the intro's scrim (intro.js puts it just above the hook on phones). */
body.intro-on .psst-note{z-index:160}
/* "In a hurry? What it is → Price → Start free": the one-line path to the price and the start, as plain buttons */
.intro-path{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink-2,var(--ink))}
.intro-path .intro-path-k{font-family:var(--mono);font-weight:500;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.intro-path button{font:inherit;color:var(--ink);background:none;border:0;border-bottom:1.5px solid var(--lime);padding:2px 1px;min-height:32px;cursor:pointer}
.intro-path button:hover,.intro-path button:focus-visible{background:var(--lime);color:var(--lime-ink);outline:none;border-radius:4px}
.intro-path span[aria-hidden]{color:var(--muted)}