/* PixelStaff public site: landing, sign-in / sign-up, legal drafts.
   Same pixel language as the app (styles.css): squared corners, crisp pixel art, Silkscreen
   for headings, a normal face for reading, the #0d0d0f night office by default. */
@font-face { font-family:"Silkscreen"; src:url("/static/fonts/silkscreen-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }

:root {
  color-scheme: dark;
  --bg:#0d0d0f; --panel:#141417; --panel2:#1b1b20; --line:#26262c; --line2:#3a3a44;
  --text:#ececf1; --muted:#9a9aa5; --faint:#6e6e78;
  --green:#5cd08a; --green-ink:#5cd08a; --green-deep:#2f9e63; --on-green:#07130c;
  --amber:#ffb648; --blue:#60a5fa; --red:#ff6b6b;
  --hard:#000000; --focus:#5cd08a; --grid:rgba(255,255,255,.035);
  /* the office scene */
  --wall:#17171c; --wall2:#1d1d23; --trim:#26262e; --floor:#121216; --floor2:#18181d;
  --desk:#6b4a33; --desk2:#4e3524; --desk3:#3a271a; --mon:#2a2a31; --mon2:#3a3a44;
  --scr:#0f2a1c; --scr-ln:#5cd08a; --scr-ln2:#2f9e63; --win:#101a2c; --win2:#1b2a46; --star:#c8d6f0;
  --plant:#2f9e63; --plant2:#5cd08a; --pot:#8a5a3c;
  --font: -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --px: "Silkscreen", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg:#ffffff; --panel:#f6f6f8; --panel2:#eeeef2; --line:#dedee4; --line2:#c4c4cd;
    --text:#1a1a1f; --muted:#5d5d68; --faint:#80808a;
    --green-ink:#157a48; --focus:#157a48; --hard:#1a1a1f; --grid:rgba(17,24,39,.05);
    --wall:#e9e6dc; --wall2:#e1ddd1; --trim:#cfc9b8; --floor:#d8d2c2; --floor2:#cec7b5;
    --desk:#b07a4f; --desk2:#8f5f3b; --desk3:#6e472b; --mon:#3a3a44; --mon2:#55555f;
    --scr:#123222; --win:#8fc3f0; --win2:#b9dcf7; --star:#ffffff; --pot:#a8663f;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#ffffff; --panel:#f6f6f8; --panel2:#eeeef2; --line:#dedee4; --line2:#c4c4cd;
  --text:#1a1a1f; --muted:#5d5d68; --faint:#80808a;
  --green-ink:#157a48; --focus:#157a48; --hard:#1a1a1f; --grid:rgba(17,24,39,.05);
  --wall:#e9e6dc; --wall2:#e1ddd1; --trim:#cfc9b8; --floor:#d8d2c2; --floor2:#cec7b5;
  --desk:#b07a4f; --desk2:#8f5f3b; --desk3:#6e472b; --mon:#3a3a44; --mon2:#55555f;
  --scr:#123222; --win:#8fc3f0; --win2:#b9dcf7; --star:#ffffff; --pot:#a8663f;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px; }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.6 var(--font); }
img, svg { display:block; }
a { color:var(--green-ink); text-underline-offset:3px; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.wrap { width:min(1120px, 100% - 32px); margin-inline:auto; }
.skip { position:absolute; left:16px; top:-60px; z-index:50; padding:8px 14px; background:var(--green); color:var(--on-green);
  font-weight:600; text-decoration:none; }
.skip:focus { top:12px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* headings: Silkscreen on its 8px grid so the glyphs stay crisp */
h1, h2, h3, .px { font-family:var(--px); font-weight:400; letter-spacing:.01em; }
h1 { font-size:48px; line-height:56px; margin:0 0 20px; }
h2 { font-size:32px; line-height:40px; margin:0 0 16px; }
h3 { font-size:16px; line-height:24px; margin:0 0 8px; }
p { margin:0 0 16px; }
.lede { font-size:19px; line-height:1.6; color:var(--muted); max-width:36em; }
.muted { color:var(--muted); }
@media (max-width:720px) {
  h1 { font-size:32px; line-height:40px; }
  h2 { font-size:24px; line-height:32px; }
  .lede { font-size:17px; }
}

/* buttons: squared, a hard offset shadow, a 2px press */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 18px;
  font:600 15px/1.2 var(--font); text-decoration:none; color:var(--text); background:var(--panel2);
  border:2px solid var(--line2); box-shadow:0 4px 0 var(--hard); cursor:pointer; transition:transform .08s steps(2), box-shadow .08s steps(2); }
.btn:hover { border-color:var(--faint); }
.btn:active { transform:translateY(2px); box-shadow:0 2px 0 var(--hard); }
.btn.go { background:var(--green); color:var(--on-green); border-color:var(--green); box-shadow:0 4px 0 var(--green-deep); }
.btn.go:active { box-shadow:0 2px 0 var(--green-deep); }
.btn.quiet { box-shadow:none; background:transparent; }
.btn.quiet:active { transform:none; }
.btn[disabled] { opacity:.55; cursor:not-allowed; }

/* top bar */
.top { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; gap:16px; min-height:64px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-family:var(--px); font-size:16px; }
.brand img { width:32px; height:32px; image-rendering:pixelated; }
.nav { display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav a.nl { color:var(--muted); text-decoration:none; padding:8px 10px; font-size:15px; }
.nav a.nl:hover { color:var(--text); }
.nav .btn { min-height:38px; padding:7px 14px; font-size:14px; }
.theme-btn { width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted);
  background:none; border:2px solid transparent; cursor:pointer; }
.theme-btn:hover { color:var(--text); border-color:var(--line); }
@media (max-width:860px) { .nav a.nl { display:none; } }
@media (max-width:420px) { .brand span { display:none; } .nav .btn.quiet { padding-inline:8px; } }

/* sections */
section { padding:96px 0; border-top:1px solid var(--line); }
section.hero { border-top:0; padding:48px 0 64px; }
.sec-head { max-width:40em; margin-bottom:40px; }
.sec-head p { color:var(--muted); font-size:18px; }
@media (max-width:720px) { section { padding:64px 0; } section.hero { padding:40px 0 48px; } }

/* hero */
.hero-copy { max-width:44em; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; margin:28px 0 12px; }
.status { display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); }
.status i { width:8px; height:8px; background:var(--amber); display:inline-block; }

/* the pixel office */
.office { position:relative; margin-top:36px; border:2px solid var(--line2); box-shadow:6px 6px 0 var(--hard); background:var(--wall); }
.office svg.room { width:100%; height:auto; shape-rendering:crispEdges; }
.office .cap { position:absolute; left:12px; bottom:10px; font-size:12px; color:var(--muted); }
.room .w { fill:var(--wall); } .room .w2 { fill:var(--wall2); } .room .tr { fill:var(--trim); }
.room .fl { fill:var(--floor); } .room .fl2 { fill:var(--floor2); }
.room .dk { fill:var(--desk); } .room .dk2 { fill:var(--desk2); } .room .dk3 { fill:var(--desk3); }
.room .mon { fill:var(--mon); } .room .mon2 { fill:var(--mon2); } .room .scr { fill:var(--scr); }
.room .ln { fill:var(--scr-ln); } .room .ln2 { fill:var(--scr-ln2); } .room .amb { fill:var(--amber); } .room .blu { fill:var(--blue); }
.room .win { fill:var(--win); } .room .win2 { fill:var(--win2); } .room .star { fill:var(--star); }
.room .pl { fill:var(--plant); } .room .pl2 { fill:var(--plant2); } .room .pot { fill:var(--pot); }
.room .plate { fill:var(--panel); stroke:none; } .room text { font-family:var(--px); fill:var(--text); }
.room .ok { fill:var(--green); }
/* screens: lines type out in steps; a check replaces them while a card is approved */
.room .type { animation:type 2.4s steps(6) infinite; transform-box:fill-box; transform-origin:left; }
.room .type.d2 { animation-delay:-.8s; } .room .type.d3 { animation-delay:-1.6s; }
@keyframes type { 0% { transform:scaleX(.15); } 100% { transform:scaleX(1); } }
.room .bar { animation:bar 3s steps(3) infinite; transform-box:fill-box; transform-origin:bottom; }
.room .bar.d2 { animation-delay:-1s; } .room .bar.d3 { animation-delay:-2s; }
@keyframes bar { 0% { transform:scaleY(.4); } 50% { transform:scaleY(1); } 100% { transform:scaleY(.6); } }
.room .done { display:none; } .room .desk.approved .done { display:inline; } .room .desk.approved .work { display:none; }
.room .av .eye { fill:#1b1b20; }
.room .av .eyes-inner { transform-box:fill-box; transform-origin:center; animation:blink 5s ease infinite; }
@keyframes blink { 0%, 92%, 100% { transform:scaleY(1); } 96% { transform:scaleY(.08); } }
.room .mug { fill:#ececf1; }
/* the mascot has no legs, so it hovers: a slow 1px bob over its shadow, in whole pixels */
.m-float { animation:float 2.4s steps(1) infinite; }
@keyframes float { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-1px); } }
.mascot-svg { image-rendering:pixelated; }
/* a standalone mascot (sign-in, sign-up): 3px per cell, bobbing 3px */
span.m-float { display:inline-block; margin:0 0 12px; animation-name:float3; }
@keyframes float3 { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }

/* the approval card the mascot brings you */
.ask { position:absolute; width:min(300px, 62%); padding:12px 14px 14px; background:var(--panel); border:2px solid var(--line2);
  box-shadow:4px 4px 0 var(--hard); font-size:14px; line-height:1.45; }
.ask .who { display:flex; align-items:center; gap:8px; font-family:var(--px); font-size:12px; margin-bottom:6px; color:var(--muted); }
.ask .who svg { width:20px; height:20px; }
.ask .what { margin:0 0 10px; color:var(--text); }
.ask .acts { display:flex; gap:8px; }
.ask .acts span { padding:5px 12px; font-weight:600; font-size:13px; border:2px solid var(--line2); }
.ask .acts .ap { background:var(--green); border-color:var(--green); color:var(--on-green); }
.ask.approved .acts .ap { box-shadow:inset 0 0 0 2px var(--on-green); }
.ask .result { display:none; font-weight:600; color:var(--green-ink); }
.ask.approved .acts { display:none; } .ask.approved .result { display:block; }
.ask.in { animation:pop .32s steps(4) both; }
@keyframes pop { from { transform:translateY(12px); opacity:0; } to { transform:none; opacity:1; } }
@media (max-width:560px) { .ask { position:static; width:auto; margin:0; border-width:2px 0 0; box-shadow:none; } .office .cap { display:none; } }

/* how it works: a real sequence, so numbered */
.steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:0; border:2px solid var(--line2); }
.steps li { padding:24px 22px 26px; border-right:2px solid var(--line2); }
.steps li:last-child { border-right:0; }
.steps .n { font-family:var(--px); font-size:32px; line-height:40px; color:var(--green-ink); display:block; margin-bottom:12px; }
.steps p { color:var(--muted); margin:0; font-size:16px; }
@media (max-width:900px) { .steps { grid-template-columns:1fr 1fr; } .steps li:nth-child(2) { border-right:0; }
  .steps li:nth-child(-n+2) { border-bottom:2px solid var(--line2); } }
@media (max-width:560px) { .steps { grid-template-columns:1fr; } .steps li { border-right:0; border-bottom:2px solid var(--line2); }
  .steps li:last-child { border-bottom:0; } }

/* template gallery: desk nameplates */
.tpls { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:20px; }
.tpl { padding:18px 18px 20px; background:var(--panel); border:2px solid var(--line2); box-shadow:4px 4px 0 var(--hard); }
.tpl .faces { display:flex; gap:4px; margin-bottom:14px; padding:6px; background:var(--bg);
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:8px 8px; border:1px solid var(--line); width:max-content; }
.tpl .faces svg { width:42px; height:42px; }
.tpl p { margin:0; color:var(--muted); font-size:15px; }
.note { margin-top:24px; font-size:15px; color:var(--muted); }

/* split feature rows */
.split { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:56px; align-items:center; }
.split.flip { grid-template-columns:minmax(0, 6fr) minmax(0, 5fr); }
.split.flip .copy { order:2; }
@media (max-width:900px) { .split, .split.flip { grid-template-columns:1fr; gap:32px; } .split.flip .copy { order:0; } }
.ticks { list-style:none; padding:0; margin:20px 0 0; }
.ticks li { display:flex; gap:12px; align-items:flex-start; margin:0 0 12px; }
.ticks li svg { flex:none; margin-top:3px; color:var(--green-ink); }
.soon { display:inline-block; margin-left:6px; padding:0 6px; font-size:12px; line-height:20px; color:var(--amber);
  border:1px solid currentColor; vertical-align:1px; white-space:nowrap; }
:root[data-theme="light"] .soon { color:#8f5a00; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .soon { color:#8f5a00; } }

/* the cloud computer mock: browser + terminal */
.computer { border:2px solid var(--line2); box-shadow:6px 6px 0 var(--hard); background:var(--panel); }
.computer .bar { display:flex; align-items:center; gap:6px; padding:8px 10px; border-bottom:2px solid var(--line2); background:var(--panel2);
  font-family:var(--px); font-size:12px; color:var(--muted); }
.computer .bar i { width:10px; height:10px; background:var(--line2); display:inline-block; }
.computer .bar span { margin-left:6px; }
.computer .panes { display:grid; grid-template-columns:1fr 1fr; min-height:260px; }
.computer .browser { border-right:2px solid var(--line2); display:flex; flex-direction:column; min-width:0; }
.computer .url { margin:10px; padding:5px 8px; border:1px solid var(--line); background:var(--bg); font:13px var(--mono); color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.computer .page { flex:1; margin:0 10px 10px; border:1px solid var(--line); background:var(--bg); padding:12px; display:flex; flex-direction:column; gap:8px; }
.computer .page b { display:block; height:8px; background:var(--line2); }
.computer .page b.s { width:55%; } .computer .page b.m { width:80%; }
.computer .chart { display:flex; align-items:flex-end; gap:6px; height:84px; margin-top:6px; }
.computer .chart i { flex:1; background:var(--green-deep); }
.computer .chart i:nth-child(3n) { background:var(--green); }
.computer .term { background:#0a0a0c; color:#cfe9d9; font:13px/1.65 var(--mono); padding:12px; overflow:hidden; min-width:0; }
.computer .term .pr { color:#5cd08a; } .computer .term .dim { color:#8c8c96; }
.computer .term p { margin:0; white-space:pre-wrap; word-break:break-word; }
.computer .term .cur { display:inline-block; width:8px; height:15px; background:#cfe9d9; vertical-align:-2px; animation:cur 1s steps(1) infinite; }
@keyframes cur { 50% { opacity:0; } }
.computer figcaption { padding:8px 12px; border-top:2px solid var(--line2); font-size:13px; color:var(--muted); }
@media (max-width:560px) { .computer .panes { grid-template-columns:1fr; } .computer .browser { border-right:0; border-bottom:2px solid var(--line2); } }

/* your own Claude */
.claude-flow { display:flex; flex-direction:column; gap:0; border:2px solid var(--line2); box-shadow:6px 6px 0 var(--hard); background:var(--panel); }
.claude-flow > div { display:flex; gap:14px; align-items:center; padding:18px 20px; }
.claude-flow > div + div { border-top:2px dashed var(--line2); }
.claude-flow .ic { flex:none; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:var(--bg); border:2px solid var(--line2); color:var(--green-ink); }
.claude-flow .ic svg.av { width:36px; height:36px; }
.claude-flow strong { display:block; font-family:var(--px); font-weight:400; font-size:14px; }
.claude-flow span.d { color:var(--muted); font-size:15px; }

/* customise: four parts, a 2x2 */
.parts { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); border:2px solid var(--line2); }
.parts > div { padding:28px 26px; }
.parts > div:nth-child(odd) { border-right:2px solid var(--line2); }
.parts > div:nth-child(-n+2) { border-bottom:2px solid var(--line2); }
.parts .k { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.parts .k svg { color:var(--green-ink); }
.parts p { margin:0; color:var(--muted); font-size:16px; }
@media (max-width:720px) { .parts { grid-template-columns:1fr; } .parts > div:nth-child(odd) { border-right:0; }
  .parts > div:not(:last-child) { border-bottom:2px solid var(--line2); } }

/* approvals mock */
.cardmock { background:var(--panel); border:2px solid var(--line2); box-shadow:6px 6px 0 var(--hard); padding:18px 20px; }
.cardmock .who { display:flex; align-items:center; gap:10px; font-family:var(--px); font-size:13px; color:var(--muted); margin-bottom:10px; }
.cardmock .who svg { width:28px; height:28px; }
.cardmock .draft { border:1px solid var(--line); background:var(--bg); padding:12px 14px; font-size:15px; margin:10px 0 14px; }
.cardmock .draft .h { color:var(--muted); font-size:13px; margin-bottom:4px; }
.cardmock .acts { display:flex; gap:10px; flex-wrap:wrap; }
.cardmock .acts span { padding:7px 14px; font-weight:600; font-size:14px; border:2px solid var(--line2); }
.cardmock .acts .ap { background:var(--green); border-color:var(--green); color:var(--on-green); }

/* pricing */
.price { display:flex; flex-wrap:wrap; gap:16px 40px; align-items:center; justify-content:space-between; padding:32px 28px;
  border:2px dashed var(--line2); }
.price .big { font-family:var(--px); font-size:32px; line-height:40px; }
.price p { margin:0; color:var(--muted); max-width:34em; }

/* FAQ */
.faq { max-width:52em; border-top:2px solid var(--line2); }
.faq details { border-bottom:2px solid var(--line2); }
.faq summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center;
  padding:18px 4px; font-weight:600; font-size:17px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary svg { flex:none; color:var(--muted); transition:transform .12s steps(2); }
.faq details[open] summary svg { transform:rotate(180deg); }
.faq .a { padding:0 4px 18px; color:var(--muted); max-width:44em; }
.faq .a p:last-child { margin:0; }

/* footer */
footer { border-top:1px solid var(--line); padding:40px 0 56px; color:var(--muted); font-size:14px; }
footer .wrap { display:flex; flex-wrap:wrap; gap:16px 32px; align-items:center; }
footer nav { display:flex; flex-wrap:wrap; gap:8px 20px; margin-left:auto; }
footer a { color:var(--muted); }
footer a:hover { color:var(--text); }

/* auth pages */
.auth { min-height:calc(100vh - 65px); min-height:calc(100dvh - 65px); display:grid; place-items:center; padding:40px 16px 64px;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:16px 16px; }
.auth-card { width:min(400px, 100%); background:var(--panel); border:2px solid var(--line2); box-shadow:6px 6px 0 var(--hard); padding:32px 28px 28px; }
.auth-card h1 { font-size:24px; line-height:32px; margin:0 0 8px; }
.auth-card .sub { color:var(--muted); margin:0 0 20px; font-size:15px; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label { font-size:14px; font-weight:600; }
.field input { min-height:44px; padding:10px 12px; font:16px var(--font); color:var(--text); background:var(--bg);
  border:2px solid var(--line2); border-radius:0; }
.field input:focus { outline:none; border-color:var(--focus); }
.field .hint { font-size:13px; color:var(--muted); }
.check { display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--muted); margin:4px 0 18px; }
.check input { width:18px; height:18px; margin:2px 0 0; accent-color:var(--green-deep); }
.auth-card .btn.go { width:100%; }
.auth-msg { margin:14px 0 0; padding:10px 12px; font-size:14px; border:2px solid var(--line2); background:var(--bg); }
.auth-msg[hidden] { display:none; }
.auth-alt { margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); }
.auth-alt p { margin:0 0 6px; }

/* legal drafts */
.legal { padding:48px 0 80px; }
.legal .wrap { max-width:760px; }
.draft-banner { margin:0 0 32px; padding:14px 16px; border:2px solid var(--amber); background:color-mix(in srgb, var(--amber) 12%, transparent);
  color:var(--text); font-weight:600; }
.legal h2 { font-size:16px; line-height:24px; margin:32px 0 8px; }
.legal .ph { color:var(--muted); font-style:italic; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  html { scroll-behavior:auto; }
}