/* Withdo site. Colours are the app's dark tokens (docs/design/ui-spec.md, Tokens); the motif is the
   app icon's 12 x 12 pixel tile: a square with its four corner pixels cut, and the pixel check. */
@font-face{font-family:"Inter";src:url("fonts/inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  --ground:#111113;--ground-2:#18191b;--ground-3:#212225;--ground-4:#272a2d;
  --ink:#edeef0;--muted:#b0b4ba;
  --accent:#5b5bd6;--accent-ink:#b1a9ff;--accent-soft:#202248;
  --doing:#0090ff;--blocked:#e5484d;--review:#ffc53d;--done:#30a46c;
  --on-status:#111113;
  --margin:clamp(16px,3.2vw,48px);
  --s-small:16px;--s-body:18px;--s-title:clamp(24px,2.2vw,32px);--s-display:clamp(52px,6.6vw,108px);--s-giant:clamp(110px,24vw,420px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{background:var(--ground);color:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;font:400 var(--s-body)/1.55 "Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;font-feature-settings:"cv11","ss01"}
a{color:var(--accent-ink)}
img,video{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}
::selection{background:var(--accent);color:#fff}
.notch{--n:8px;clip-path:polygon(var(--n) 0,calc(100% - var(--n)) 0,calc(100% - var(--n)) var(--n),100% var(--n),100% calc(100% - var(--n)),calc(100% - var(--n)) calc(100% - var(--n)),calc(100% - var(--n)) 100%,var(--n) 100%,var(--n) calc(100% - var(--n)),0 calc(100% - var(--n)),0 var(--n),var(--n) var(--n))}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Bar */
.bar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:24px var(--margin)}
.mark{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-weight:800;font-size:var(--s-title);letter-spacing:-.03em}
.mark img{width:30px;height:30px;image-rendering:pixelated}
.bar nav{display:flex;gap:28px;font-size:var(--s-small);font-weight:600}
.bar nav a{color:var(--ink);text-decoration:none}
.bar nav a:hover{color:var(--accent-ink)}

/* Buttons: the tile's notched square */
.btn{--n:6px;display:inline-flex;align-items:center;gap:10px;padding:16px 26px;background:var(--accent);color:#fff;font-weight:700;font-size:var(--s-body);text-decoration:none;transition:transform .15s var(--ease),background .15s}
.btn:hover{background:#6e6ade}
.btn:active{transform:translateY(2px)}
.link{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:2px solid var(--accent)}
.link:hover{color:var(--accent-ink)}

/* Hero */
.hero{position:relative;min-height:100svh;overflow:hidden;display:grid;align-items:center;padding:120px var(--margin) 72px}
.hero-shape{position:absolute;height:124vh;aspect-ratio:1;left:max(52vw,calc(100vw - 124vh * .62));top:50%;transform:translateY(-46%)}
.hero-shape rect{transform-box:fill-box;transform-origin:center}
.hero-copy{position:relative;max-width:min(46vw,640px)}
h1,h2{font-weight:800;letter-spacing:-.035em;line-height:.98;margin:0}
h1{font-size:var(--s-display)}
.hero p{font-size:var(--s-body);max-width:34em;margin:32px 0 0}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px;margin-top:36px}
.fine{font-size:var(--s-small);color:var(--muted);margin:24px 0 0}
.fine a{color:var(--muted)}

/* Showcase */
.show{display:grid;grid-template-columns:1fr 1fr;min-height:88svh;background:var(--ground-2);margin-top:clamp(64px,8vw,120px)}
.plate-wrap{display:flex;align-items:center;padding:40px}
.plate{--n:16px;position:relative;width:100%;aspect-ratio:3/2;background:var(--accent-soft);overflow:hidden}
.plate>*{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}
.plate .phone{object-fit:contain;object-position:center;padding:24px 0}
.plate [hidden]{display:none}
.sound{position:absolute;inset:auto auto 16px 16px;width:auto;height:auto;--n:4px;padding:8px 14px;background:rgba(17,17,19,.86);color:var(--ink);border:0;font:600 var(--s-small) "Inter",sans-serif;cursor:pointer}
.sound:hover{background:var(--ground)}
.show-text{display:flex;flex-direction:column;justify-content:space-between;padding:56px var(--margin) 56px 24px;gap:48px}
.tabs{display:flex;gap:28px;font-size:var(--s-body)}
.tabs button{all:unset;cursor:pointer;color:var(--muted);font-weight:600;padding-bottom:6px;border-bottom:3px solid transparent}
.tabs button[aria-selected="true"]{color:var(--ink);border-color:var(--accent)}
.tabs button:hover{color:var(--ink)}
.tabs button:focus-visible{outline:3px solid var(--accent-ink);outline-offset:4px}
h2.title{font-size:var(--s-title);letter-spacing:-.02em;line-height:1.15}
.show-text p{max-width:34ch;margin:24px 0 0;min-height:5em}
.cells{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cells a{--n:6px;display:flex;align-items:center;padding:0 24px;height:72px;font-weight:700;text-decoration:none;transition:transform .15s var(--ease)}
.cells a:active{transform:translateY(2px)}
.cells .ink{background:var(--ink);color:var(--ground)}
.cells .tone{background:var(--ground-4);color:var(--ink)}
.cells a:hover{filter:brightness(1.08)}

/* How a day goes: the stages as one bar */
.day{padding:clamp(120px,14vw,200px) var(--margin) 0}
.day h2{font-size:var(--s-display);margin-bottom:64px}
.stages{display:flex;gap:6px}
.st{flex:var(--grow) 1 0;min-width:12%}
.stage{--n:8px;margin:0;height:22vh;min-height:170px;padding:20px;color:var(--on-status);font-size:var(--s-title);font-weight:800;letter-spacing:-.02em;line-height:1.1}
.st p{margin:20px 0 0;max-width:22ch;padding-right:12px}

/* What's inside: close-ups on a board */
.board{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:104px;gap:8px;padding:0 var(--margin);margin-top:clamp(120px,14vw,200px)}
.tile{--n:10px;position:relative;overflow:hidden;padding:20px;display:flex;flex-direction:column;justify-content:flex-end}
.tile .cap{position:relative;z-index:2;margin:0}
.tile .cap b{display:block;font-size:var(--s-body);font-weight:600}
.tile .cap span{display:block;font-size:var(--s-small)}
.tile .shot{position:absolute;top:0;right:0;width:86%;height:50%;object-fit:cover;object-position:left top}
.t-head{grid-column:1/7;grid-row:1/3;background:var(--ground-2);justify-content:flex-start}
.t-head h2{font-size:var(--s-display)}
.t-input{grid-column:1/7;grid-row:3/6;background:var(--ground-3)}
.t-input .shot{width:100%;height:68%}
.t-live{grid-column:7/13;grid-row:1/6;background:var(--accent-soft);justify-content:space-between}
.t-agents{grid-column:1/4;grid-row:6/10;background:var(--accent);color:#fff}
.t-status{grid-column:4/7;grid-row:6/8;background:var(--blocked);color:var(--on-status)}
.t-hand{grid-column:4/7;grid-row:8/10;background:var(--review);color:var(--on-status)}
.t-code{grid-column:7/13;grid-row:6/8;background:var(--ground-3)}
.t-sync{grid-column:7/10;grid-row:8/10;background:var(--done);color:var(--on-status)}
.t-idle{grid-column:10/13;grid-row:8/10;background:var(--doing);color:var(--on-status)}
.t-agents .sprites{position:absolute;top:-22px;right:-30px;display:grid;grid-template-columns:repeat(2,96px);gap:18px}
.t-agents .sprites img{width:96px;height:96px;image-rendering:pixelated}
.frag{--n:8px;position:absolute;top:20px;left:20px;background:var(--ground);padding:10px 18px 14px}
.frag .num{display:block;color:var(--accent-ink);font-size:var(--s-display);font-weight:800;letter-spacing:-.04em;line-height:.9}
.tray{--n:8px;position:absolute;top:20px;right:-28px;display:flex;gap:16px;background:var(--ground);padding:26px 28px}
.tray img{width:72px;height:72px;image-rendering:pixelated}

/* The code, enlarged (a real command, so monospace) */
.t-code pre{position:absolute;top:24px;left:28px;margin:0;font:500 var(--s-title)/1.45 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--ink);white-space:pre}
.t-code pre .c{color:var(--muted)}

/* The live board */
.live{--n:10px;font-size:var(--s-body);background:var(--ground);padding:8px 8px 4px}
.live-head{display:flex;align-items:center;gap:10px;margin:8px 12px 10px;font-weight:600}
.live-head img{width:24px;height:24px;image-rendering:pixelated}
.live-head span{color:var(--muted);font-weight:500}
.card{padding:14px 12px}
.card.ask{--n:8px;background:var(--ground-3);clip-path:polygon(var(--n) 0,calc(100% - var(--n)) 0,calc(100% - var(--n)) var(--n),100% var(--n),100% calc(100% - var(--n)),calc(100% - var(--n)) calc(100% - var(--n)),calc(100% - var(--n)) 100%,var(--n) 100%,var(--n) calc(100% - var(--n)),0 calc(100% - var(--n)),0 var(--n),var(--n) var(--n))}
.card .row{display:flex;align-items:center;gap:12px}
.card img{width:28px;height:28px;image-rendering:pixelated;flex:none}
.card .t{font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-s{--n:3px;font-size:var(--s-small);font-weight:700;padding:3px 10px;color:var(--on-status);flex:none}
.chip-s.doing{background:var(--doing)}.chip-s.blocked{background:var(--blocked)}.chip-s.review{background:var(--review)}.chip-s.done{background:var(--done)}
.card .meta{color:var(--muted);font-size:var(--s-small);margin:6px 0 0 40px}
.card .q{margin:12px 0 0 40px}
.answers{display:flex;gap:8px;margin:14px 0 0 40px}
.answers button{--n:4px;border:0;cursor:pointer;font:700 var(--s-small) "Inter",sans-serif;padding:10px 16px;background:var(--ground-4);color:var(--ink);transition:transform .15s var(--ease),background .15s}
.answers button:hover{background:var(--accent);color:#fff}
.answers button:active{transform:translateY(2px)}
.again{background:none;border:0;padding:0;margin:12px 0 0 40px;font:600 var(--s-small) "Inter",sans-serif;color:var(--accent-ink);cursor:pointer;text-decoration:underline}
.flash{animation:flash .6s var(--ease)}
@keyframes flash{from{transform:translateX(6px);opacity:.4}to{transform:none;opacity:1}}

/* The action, one word */
.cta{--n:24px;display:block;position:relative;height:60svh;min-height:380px;margin-top:clamp(120px,14vw,200px);background:var(--accent);color:#fff;text-decoration:none;overflow:hidden;clip-path:polygon(var(--n) 0,calc(100% - var(--n)) 0,calc(100% - var(--n)) var(--n),100% var(--n),100% 100%,0 100%,0 var(--n),var(--n) var(--n))}
.cta:hover,.cta:focus-visible{background:var(--ink);color:var(--accent)}
.cta:focus-visible{outline:none}
.cta p{position:absolute;top:40px;left:var(--margin);margin:0;max-width:26ch;font-size:var(--s-title);font-weight:700;letter-spacing:-.02em;line-height:1.2}
.cta svg{position:absolute;top:40px;right:var(--margin);width:48px;height:48px}
.cta .word{position:absolute;left:calc(var(--margin) - .05em);bottom:24px;font-size:var(--s-giant);font-weight:900;letter-spacing:-.06em;line-height:.74}

/* Footer: the wordmark built from the app's pixels */
footer.close{padding:clamp(64px,8vw,120px) var(--margin) 40px;background:var(--ground-2)}
.wordmark{display:block;width:100%;height:auto}
.cols{display:grid;grid-template-columns:repeat(12,1fr);gap:32px 24px;margin-top:56px;font-size:var(--s-small)}
.cols div{grid-column:span 2}
.cols .install{grid-column:9/13}
.cols b{display:block;margin-bottom:10px;font-size:var(--s-small)}
.cols ul{list-style:none;margin:0;padding:0}
.cols li{margin:0 0 8px;padding-left:16px;position:relative}
.cols li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--accent)}
.cols a{color:var(--ink);text-decoration:none}
.cols a:hover{color:var(--accent-ink)}
.cols p{margin:0 0 10px;max-width:60ch}
.last{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:56px;font-size:var(--s-small);color:var(--muted)}
.last .btn{padding:10px 16px;font-size:var(--s-small)}

/* Entrances (only when the script runs) */
.js [data-in]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.js [data-in].on{opacity:1;transform:none}
.js .plate.shut{clip-path:inset(0 0 0 100%)}
.js .plate{transition:clip-path 1.1s var(--ease)}
.js .plate>img,.js .plate>video{transition:transform 1.4s var(--ease)}
.js .plate.shut>img,.js .plate.shut>video{transform:scale(1.12)}
.js .hero-shape rect{animation:pix .5s var(--ease) both;animation-delay:calc(var(--d) * 1ms)}
@keyframes pix{from{opacity:0;transform:scale(.4)}}
@media (prefers-reduced-motion:reduce){
  .js [data-in]{opacity:1;transform:none;transition:none}
  .js .plate.shut{clip-path:none}.js .plate.shut>*{transform:none}
  .js .hero-shape rect{animation:none}
}

/* Tablet */
@media (max-width:1000px){
  .show{grid-template-columns:1fr}
  .plate-wrap{padding:var(--margin) var(--margin) 0}
  .show-text{padding:40px var(--margin) 56px}
  .hero{align-items:start;padding-top:120px;padding-bottom:min(84vw,640px);min-height:0}
  .hero-copy{max-width:36em}
  .hero-shape{height:auto;width:min(112vw,860px);left:auto;right:-10vw;top:auto;bottom:calc(min(84vw,640px) - min(112vw,860px) - 24px);transform:none}
  .stages{flex-direction:column}
  .stage{height:auto;min-height:max(64px,calc(var(--grow) * 4svh))}
  .st p{margin:10px 0 22px;max-width:44ch}
  .board{grid-template-columns:repeat(6,1fr)}
  .t-head{grid-column:1/7;grid-row:auto/span 2}
  .t-live{grid-column:1/7;grid-row:auto/span 5}
  .t-input{grid-column:1/7;grid-row:auto/span 3}
  .t-code{grid-column:1/7;grid-row:auto/span 2}
  .t-agents{grid-column:1/4;grid-row:auto/span 4}
  .t-status,.t-hand{grid-column:4/7;grid-row:auto/span 2}
  .t-sync{grid-column:1/4;grid-row:auto/span 2}
  .t-idle{grid-column:4/7;grid-row:auto/span 2}
  .cols{grid-template-columns:repeat(2,1fr)}
  .cols div,.cols .install{grid-column:auto}
  .cols .install{grid-column:1/3}
}
/* Phone */
@media (max-width:640px){
  .bar nav a:not(:last-child){display:none}
  .hero{padding-top:104px;padding-bottom:96vw}
  .hero-shape{width:130vw;left:-15vw;right:auto;bottom:calc(-34vw - 24px)}
  h1{font-size:13vw}
  .hero p{margin-top:24px}
  .actions{margin-top:28px}
  .tabs{gap:20px}
  .cells{grid-template-columns:1fr}
  .cells a{height:60px}
  .day h2{font-size:13vw;margin-bottom:40px}
  .board{grid-template-columns:1fr 1fr;grid-auto-rows:28vw;gap:6px}
  .t-head{grid-column:1/3;grid-row:auto/span 2}
  .t-head h2{font-size:13vw}
  .t-live{grid-column:1/3;grid-row:auto/span 6}
  .t-input{grid-column:1/3;grid-row:auto/span 2}
  .t-code{grid-column:1/3;grid-row:auto/span 2}
  .t-agents{grid-column:1/3;grid-row:auto/span 3}
  .t-status,.t-hand,.t-sync,.t-idle{grid-column:auto;grid-row:auto/span 3}
  .t-agents .sprites{grid-template-columns:repeat(3,72px)}
  .t-agents .sprites img{width:72px;height:72px}
  .card .meta,.card .q,.answers,.again{margin-left:0}
  .frag{left:14px;top:14px;padding:8px 12px 10px}
  .frag .num{font-size:13vw}
  .tray{top:14px;padding:16px 18px;gap:10px}
  .tray img{width:48px;height:48px}
  .cta{height:46svh;min-height:300px;--n:16px}
  .cta p{top:24px;max-width:16ch}
  .cta svg{top:24px;width:32px;height:32px}
  .cta .word{font-size:34vw}
  .cols{grid-template-columns:1fr 1fr}
}

/* Legal pages */
.doc main{max-width:720px;margin:0 auto;padding:56px 24px 72px}
.doc header{display:flex;align-items:center;gap:12px}
.doc header img{image-rendering:pixelated}
.doc header a{color:inherit;text-decoration:none;font-weight:800;font-size:20px}
.doc h1{font-size:44px;margin:48px 0 12px}
.doc h2{font-size:24px;letter-spacing:-.02em;margin:40px 0 8px;line-height:1.2}
.doc .lede{color:var(--muted)}
.doc footer{margin-top:56px;padding-top:24px;background:var(--ground-2);padding:20px 24px;color:var(--muted);font-size:var(--s-small)}
.doc footer a{color:var(--muted)}