/* "What people hand over" (src/site/work.tsx, home-work.js): request, steps, result, one card each.
   Scoped to .home like the rest of the home page. */
.home .w-grid{display:flex;flex-direction:column;gap:24px;margin-top:44px}
.home .w-card{position:relative;display:flex;flex-direction:column;gap:18px;background:oklch(0.962 0.014 85);border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 1px 0 rgba(20,22,28,.04),0 24px 48px -36px rgba(20,22,28,.45)}
.home .w-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.home .w-card h3{font-family:var(--display);font-size:1.5rem;line-height:1.12;letter-spacing:-.02em;max-width:30ch}
.home .w-k-window h3,.home .w-k-split h3{font-size:1.75rem}
.home .w-replay{flex:none;font-size:.78rem;font-weight:700;color:var(--muted);padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:#fff}
.home .w-replay:hover{color:var(--ink)}

/* the window: the app itself, conversation and computer (home-work.js plays it) */
.home .w-window{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:10px;padding:10px;height:660px;border-radius:22px;background:#e9e1cf}
.home .w-wchat{border-radius:16px;box-shadow:0 0 0 1px oklch(0.271 0.012 78/6%)}
.home .w-wchat .h-face{width:30px;height:30px}
.home .w-window .pc{border-radius:16px}
.home .w-window .dbc-thread{font-size:14px}
.home .w-window .w-shot{width:460px}
.home .w-window .dbc-step b{margin-left:4px}

/* split: the conversation beside what it made */
.home .w-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.home .w-made{position:sticky;top:100px}

/* a conversation outside the window: the same pieces, nothing cut off */
.home .w-convo{background:none}
.home .w-convo .dbc-thread{justify-content:flex-start;padding:0;overflow:visible;-webkit-mask-image:none;mask-image:none}
.home .w-result{display:flex;flex-direction:column;gap:12px}
.home .w-shot{display:block;max-width:100%;height:auto}

/* the small ones, two columns, each as tall as it is */
.home .w-masonry{columns:2;column-gap:24px}
.home .w-masonry .w-card{break-inside:avoid;margin-bottom:24px}

/* Playing: hidden until their turn, then in. Without script everything simply shows. */
.home .w-js .w-convo [data-step],.home .w-js .w-convo .w-result,.home .w-js .w-k-split [data-later],.home .w-js .w-k-small [data-later],.home .w-js .w-k-window .w-made [data-later]{opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
.home .w-js .w-convo [data-step].in,.home .w-js .w-convo .w-result.in,.home .w-js [data-later].in{opacity:1;transform:none}
.home .w-js .w-convo [data-step].now{opacity:1;transform:none}
.home .w-js .w-convo [data-step].now .db-eye{fill:oklch(0.883 0.165 92)}
.home .w-js .w-convo .w-result:not(.in){height:0;overflow:hidden}
.home .w-js .w-convo .dbc-steps[data-later]:not(.in) [data-step]{opacity:0}

.home .w-btn{align-self:flex-start;display:inline-flex;align-items:center;padding:9px 16px;border-radius:10px;background:var(--ink);color:#fff;font-weight:700;font-size:.82rem;transition:transform .15s,background .15s}
.home a.w-btn{align-self:center}
.home .w-note{font-size:.8rem;color:var(--muted)}

/* the bakery's site, on a desktop and on a phone */
.home .w-devices{position:relative;padding:0 0 70px}
.home .w-browser{border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line),0 30px 50px -30px rgba(20,22,28,.45)}
.home .w-bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;background:oklch(0.947 0.018 86)}
.home .w-bar i{width:9px;height:9px;border-radius:50%;background:oklch(0.271 0.012 78/.15)}
.home .w-bar span{margin-left:10px;flex:1;height:20px;display:flex;align-items:center;padding:0 10px;border-radius:999px;background:#fff;font:11px ui-monospace,Menlo,monospace;color:oklch(0.514 0.028 83)}
.home .w-browser .w-page{position:relative;aspect-ratio:16/10;overflow:hidden}
.home .w-mobile{position:absolute;right:-6px;bottom:0;width:31%;padding:7px;border-radius:26px;background:#1d1b19;box-shadow:0 30px 40px -20px rgba(0,0,0,.5)}
.home .w-mobile .w-page{position:relative;aspect-ratio:9/18.5;border-radius:20px;overflow:hidden;background:#fff8ef}
.home .w-page>.pc-site{position:absolute;left:0;top:0;transform-origin:0 0}

/* canvases */
.home .w-stage{display:flex;flex-direction:column;gap:10px}
.home .w-stage canvas{width:100%;height:auto;aspect-ratio:16/9;border-radius:14px;cursor:grab;touch-action:pan-y}
.home .w-stage canvas:active{cursor:grabbing}
.home .w-stage > small{color:var(--muted);font-size:.76rem;text-align:center}
.home .w-file{display:flex;gap:12px;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.home .w-file b{display:block;font-family:var(--mono);font-size:.78rem}
.home .w-file small{color:var(--muted);font-size:.74rem}

/* app */
.home .w-app{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.home .w-app-bar{display:flex;justify-content:space-between;align-items:baseline;padding:12px 16px;border-bottom:1px solid var(--line)}
.home .w-app-bar b{font-family:var(--display);font-size:1.1rem}
.home .w-app-bar span{font-size:.78rem;color:var(--muted)}
.home .w-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:14px 16px;background:#faf7ef}
.home .w-cols > div{display:flex;flex-direction:column;gap:8px}
.home .w-cols p{font-size:.72rem;font-weight:700;color:var(--muted)}
.home .w-deal{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 10px;font-size:.8rem;display:flex;flex-direction:column;gap:2px}
.home .w-deal span{color:var(--muted);font-size:.74rem}
.home .w-deal em{font-style:normal;font-size:.7rem;font-weight:700;color:#b25e00}
.home .w-won{border-color:#2f8f5b;box-shadow:inset 3px 0 0 #2f8f5b}
.home .w-app > .w-note{padding:10px 16px;border-top:1px solid var(--line)}
.home .w-app q{font-weight:700;color:var(--ink)}

.home .w-also{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:26px;font-size:.88rem}
.home .w-also span{padding:7px 13px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}

@media (max-width:980px){
  .home .w-window{grid-template-columns:1fr;height:auto}
  .home .w-wchat{height:440px}
  .home .w-window .pc{min-height:420px}
  .home .w-split{grid-template-columns:1fr}
  .home .w-made{position:static}
}
@media (max-width:860px){
  .home .w-masonry{columns:1}
  .home .w-cols{grid-template-columns:1fr}
  .home .w-card{padding:22px 18px 18px}
}