/* Sfatosu sign-up card: a calm sheet that slides up in a corner and never covers the whole page.
   Every rule is scoped to .sfx so the project pages keep their own styles. */
.sfx{
  --sfx-bg:rgba(255,255,255,.92); --sfx-fg:#1d1d1f; --sfx-muted:#6e6e73; --sfx-line:#d2d2d7; --sfx-field:#ffffff;
  --sfx-accent:#0071e3; --sfx-accent-h:#0077ed; --sfx-link:#0066cc; --sfx-err:#b3261e; --sfx-pill:#e8e8ed;
  --sfx-shadow:0 12px 40px rgba(0,0,0,.16),0 2px 8px rgba(0,0,0,.08);
  position:fixed; z-index:2147483000; right:20px; bottom:20px; width:360px; max-width:calc(100vw - 24px);
  box-sizing:border-box; padding:22px 22px 18px; border-radius:18px; border:1px solid var(--sfx-line);
  background:var(--sfx-bg); color:var(--sfx-fg); box-shadow:var(--sfx-shadow);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px);
  font:400 15px/1.45 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-align:left; letter-spacing:normal;
  opacity:0; transform:translateY(28px); transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sfx{
  --sfx-bg:rgba(29,29,31,.92); --sfx-fg:#f5f5f7; --sfx-muted:#a1a1a6; --sfx-line:#424245; --sfx-field:#2c2c2e;
  --sfx-link:#2997ff; --sfx-err:#ff8a80; --sfx-pill:#3a3a3c; --sfx-shadow:0 12px 40px rgba(0,0,0,.5)}}
:root[data-theme="dark"] .sfx{
  --sfx-bg:rgba(29,29,31,.92); --sfx-fg:#f5f5f7; --sfx-muted:#a1a1a6; --sfx-line:#424245; --sfx-field:#2c2c2e;
  --sfx-link:#2997ff; --sfx-err:#ff8a80; --sfx-pill:#3a3a3c; --sfx-shadow:0 12px 40px rgba(0,0,0,.5)}
.sfx.sfx-in{opacity:1; transform:none}
.sfx *{box-sizing:border-box; font:inherit; color:inherit; letter-spacing:inherit}
.sfx h2{margin:0 28px 6px 0; font:600 19px/1.25 -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif; letter-spacing:-.01em}
.sfx p{margin:0}
.sfx .sfx-p{color:var(--sfx-muted); font-size:14px; margin-bottom:14px}
.sfx .sfx-x{position:absolute; top:12px; right:12px; width:28px; height:28px; border:0; border-radius:50%; padding:0;
  background:var(--sfx-pill); color:var(--sfx-muted); cursor:pointer; display:grid; place-items:center}
.sfx .sfx-x svg{width:10px; height:10px; display:block}
.sfx input[type=email]{display:block; width:100%; height:44px; padding:0 14px; margin:0 0 12px; border-radius:12px;
  border:1px solid var(--sfx-line); background:var(--sfx-field); color:var(--sfx-fg); font-size:16px; outline:none; box-shadow:none}
.sfx input[type=email]:focus{border-color:var(--sfx-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--sfx-accent) 25%,transparent)}
.sfx .sfx-c{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.4; cursor:pointer; margin:0 0 4px}
.sfx .sfx-c input{flex:none; width:18px; height:18px; margin:1px 0 0; accent-color:var(--sfx-accent); cursor:pointer}
.sfx .sfx-err{min-height:18px; font-size:13px; color:var(--sfx-err); margin:4px 0 6px}
.sfx .sfx-row{display:flex; gap:10px; align-items:center}
.sfx .sfx-go{border:0; border-radius:980px; background:var(--sfx-accent); color:#fff; padding:0 20px; height:38px; font-weight:500; cursor:pointer}
.sfx .sfx-go:hover{background:var(--sfx-accent-h)}
.sfx .sfx-go[disabled]{opacity:.6; cursor:default}
.sfx .sfx-no{border:0; background:none; color:var(--sfx-link); padding:0 8px; height:38px; cursor:pointer}
.sfx .sfx-no:hover{text-decoration:underline}
.sfx .sfx-fine{margin-top:12px; font-size:12px; color:var(--sfx-muted)}
.sfx a{color:var(--sfx-link); text-decoration:none}
.sfx a:hover{text-decoration:underline}
.sfx :focus-visible{outline:2px solid var(--sfx-accent); outline-offset:2px}
.sfx .sfx-vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.sfx .sfx-sup{margin:12px 0 0}
.sfx .sfx-sup a{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:980px;border:1px solid var(--sfx-line);color:var(--sfx-fg);font-size:14px}
.sfx .sfx-sup a:hover{background:var(--sfx-pill);text-decoration:none}
/* The home page's "Keep me updated" section: the same form, in the page. */
.sfx.sfx-inline{position:relative; z-index:auto; right:auto; bottom:auto; width:auto; max-width:520px; margin:0 auto;
  opacity:1; transform:none; transition:none; box-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none}
.sfx.sfx-inline h2{margin-right:0}
.sfx.sfx-inline .sfx-c{margin-bottom:4px}

/* The bar: one slim line above everything, in the page's flow (it scrolls away with the page). */
.sfxbar{
  --sfxb-bg:#1d1d1f; --sfxb-fg:#f5f5f7; --sfxb-link:#2997ff; --sfxb-x:#a1a1a6;
  position:relative; z-index:auto; display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:36px; box-sizing:border-box; padding:6px 44px; margin:0; background:var(--sfxb-bg); color:var(--sfxb-fg);
  font:400 13px/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif; letter-spacing:normal;
  -webkit-font-smoothing:antialiased; text-align:center}
:root[data-theme="dark"] .sfxbar{--sfxb-bg:#2c2c2e}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .sfxbar{--sfxb-bg:#2c2c2e}}
.sfxbar *{box-sizing:border-box; font:inherit; letter-spacing:inherit}
.sfxbar p{margin:0}
.sfxbar .sfxbar-a{display:inline; margin:0 0 0 10px; padding:0; border:0; background:none; color:var(--sfxb-link); text-decoration:none; cursor:pointer; white-space:nowrap}
.sfxbar .sfxbar-a:hover{text-decoration:underline}
.sfxbar .sfxbar-x{position:absolute; right:8px; top:50%; transform:translateY(-50%); width:28px; height:28px; padding:0; border:0; border-radius:50%;
  background:none; color:var(--sfxb-x); cursor:pointer; display:grid; place-items:center}
.sfxbar .sfxbar-x:hover{color:var(--sfxb-fg); background:rgba(255,255,255,.1)}
.sfxbar .sfxbar-x svg{width:10px; height:10px; display:block}
.sfxbar :focus-visible{outline:2px solid var(--sfxb-link); outline-offset:2px}
@media (max-width:520px){.sfxbar{padding:6px 40px 6px 12px; font-size:12.5px} .sfxbar .sfxbar-t{display:block}
  .sfxbar .sfxbar-a{margin:0 6px}}
@media print{.sfxbar{display:none}}

@media (max-width:520px){.sfx{left:12px; right:12px; width:auto; max-width:none;
  bottom:max(12px,env(safe-area-inset-bottom,0px)); padding:20px 18px 16px}}
@media (prefers-reduced-motion: reduce){.sfx{transition:opacity .2s ease; transform:none}}
@media print{.sfx{display:none}}