/* slacker.chat. Tokens from the look book (ops/look/look-book-v2.html), accent from the app's green
   bubble (ChatLook.greenBubble/greenText in app/app/Sources/Kite/TeamChat.swift). No web fonts: the display face
   is the system's rounded font where there is one, so the site asks nothing of any other server. Light only. */
:root{
  --accent:#9EF29F; --on-accent:#072307; --accent-ink:#29B561;
  --bg:#F6F4EF; --window:#FBFAF7; --panel:#F0EEE8; --theirs:#ECEAE4;
  --ink:#1B1A17; --muted:#6E6A62; --line:#E2DFD7; --on:#1F9D4C;
  --display:ui-rounded,"SF Pro Rounded","Nunito",system-ui,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1}  /* keeps the footer at the bottom of the window */
a{color:inherit;text-underline-offset:3px}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
h1,h2{font-family:var(--display);font-weight:900;letter-spacing:-.015em;line-height:1.08;text-wrap:balance;margin:0}
h3{margin:0;font-size:17px}
p{margin:0}
.muted{color:var(--muted)}

.wrap{width:100%;max-width:1040px;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.narrow{max-width:720px}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:18px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
.brand .mark{width:40px;height:40px}
.word{font-family:var(--display);font-weight:900;font-size:26px;letter-spacing:-.02em;line-height:1}
.word b{color:var(--accent-ink)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:999px;font-weight:700;font-size:16px;
  text-decoration:none;border:1px solid var(--line);background:var(--window);color:var(--ink)}
.btn.p{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn[aria-disabled="true"]{cursor:default}

/* home */
.lede{font-size:clamp(18px,2.4vw,21px);color:var(--muted);margin-top:16px;max-width:30em}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}

/* home: a poster, after the Herman Miller picnic screen prints. The float fills the page behind the words,
   which sit small in the bottom left. Grey and the green dot are darker so they read on the blue. */
.home{--bg:#47C6E6;--muted:#08323B;--accent-ink:#0B6B33}
.home .art{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.home .top,.home main,.home footer{position:relative;z-index:1}
.home .top,.home footer{padding-inline:max(24px,4vw)}
.poster{display:flex;flex-direction:column;justify-content:flex-end;width:min(620px,100%);
  padding:48px max(24px,4vw) 0}
.poster h1{font-size:clamp(30px,4vw,44px)}
.poster .lede{font-size:17px;margin-top:8px}
.poster .join{justify-content:flex-start;margin:18px 0 0;max-width:420px}
.poster .join-done{margin-top:18px}
.home footer{justify-content:flex-end;padding-block:20px 5vh}

/* waitlist */
.join{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%;max-width:440px;margin:26px auto 0}
.join input{flex:1 1 220px;min-width:0;font:inherit;font-size:16px;padding:12px 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--window);color:var(--ink)}
.join input::placeholder{color:var(--muted)}
.join input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
button.btn{font-family:inherit;cursor:pointer}
button.btn:disabled{opacity:.6;cursor:default}
.join-note{margin-top:14px;font-size:15px;min-height:1.55em}
.join-done{font-family:var(--display);font-weight:900;font-size:21px;margin-top:26px}
.vh,.hp{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (max-width:480px){.join .btn{flex:1 1 100%;justify-content:center}}

/* long text (privacy) */
.doc{padding-block:20px 56px}
.doc h1{font-size:clamp(36px,7vw,52px)}
.doc h2{font-size:24px;margin-top:40px}
.doc p,.doc li{color:var(--ink)}
.doc p+p{margin-top:12px}
.doc .lede{margin-top:12px}
.doc ul{padding-left:1.2em;margin:12px 0 0}
.doc li+li{margin-top:6px}
.table{width:100%;border-collapse:collapse;margin-top:16px;font-size:15px}
.table th,.table td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-bottom:1px solid var(--line)}
.table th{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.table td:first-child{font-family:ui-monospace,Menlo,monospace;font-size:14px;white-space:nowrap}
.scroll{overflow-x:auto}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;
  border:1px solid var(--line);background:var(--panel);color:var(--muted);vertical-align:middle;margin-left:6px}
.note{border-left:3px solid var(--accent);padding:4px 0 4px 14px;margin-top:18px;color:var(--muted)}


/* consent stub */
.consent{max-width:420px;margin:8vh auto 0;text-align:center}
.consent h1{font-size:30px}
.consent .cta{justify-content:center}
.doc h2+p,.doc h2+ul{margin-top:10px}
.doc .muted{color:var(--muted)}
.consent .btn[aria-disabled="true"]{opacity:.5}
.big-mark{display:block;width:120px;height:120px;margin:0 auto 10px}

footer{padding-block:24px 40px;font-size:14px;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:8px 20px}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}