/* Live desk homepage (Adam, October 28, 2026): loose threads flow into a live demo that drafts,
   then stops and waits for the owner. The logo's mint block is the cursor that writes each draft.
   Loaded after site-fixes.css on the homepage only. Colors come from tokens so theme.css can relight them. */

:root{
  --mint-text:var(--mint);--cyan-text:var(--cyan);--lilac-text:var(--lilac);
  --desk-fill:rgb(16 18 23 / .82);--desk-inner:rgb(8 9 11 / .7);--desk-sheet:rgb(255 255 255 / .03);
  --desk-rim:rgb(255 255 255 / .1);--desk-shadow:rgb(0 0 0 / .7);
  --thread-loose:#f1f0f7;--thread-a:var(--mint);--thread-b:var(--cyan);--thread-c:var(--lilac);--on-mint:#07170f;
}

/* ---------- Hero ---------- */
.live .hero{padding-block:24px 72px}
/* The dusk horizon, one still in the screenprint style: decorative and behind the threads. theme.css relights it. */
.live .hero::after{z-index:-2;height:clamp(78px,12vh,136px);background:url(media/horizon.webp) 12% 100%/cover no-repeat}
/* Shows the low sun on first view: the hero ends at the fold on a normal laptop. */
@media (min-width:981px){.live .hero{padding-block:24px 18px}}
.live .hero .wrap{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:56px;min-height:min(820px,calc(100svh - 120px))}
.live .threads{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
/* Capped so the last line of "approachable." stays clear of the desk on wide screens. */
.live .motto{font-size:clamp(50px,7vw,100px);font-weight:400}
/* One solid accent instead of the gradient sweep: the movement now lives in the threads and the demo. */
.live .motto em{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--mint-text);animation:none}
.live .hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.live .hero .actions .text-link{color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:5px}

/* ---------- The desk ---------- */
/* "Watch it run" lands the desk just under the sticky header. */
#desk{scroll-margin-top:12px}
.desk{position:relative;min-width:0;padding:22px;border-radius:18px;background:var(--desk-fill);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  box-shadow:inset 0 0 0 1px var(--desk-rim),0 40px 120px -40px var(--desk-shadow);transition:box-shadow .45s var(--ease)}
.desk::before{content:"";position:absolute;left:22px;right:22px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--mint),var(--cyan),var(--lilac),transparent)}
/* Amber is "not yet done": the desk holds it while it waits for the owner and turns mint only on approval. */
.desk:has(.d-state.wait){box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--amber) 62%,transparent),0 40px 120px -40px var(--desk-shadow)}
.desk:has(.d-state.sent){box-shadow:inset 0 0 0 1.5px var(--mint),0 40px 120px -40px var(--desk-shadow)}
.desk:has(.d-state.wait)::before{background:linear-gradient(90deg,transparent,var(--amber),transparent)}
.desk:has(.d-state.sent)::before{background:linear-gradient(90deg,transparent,var(--mint),transparent)}
.d-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.d-tabs{display:flex;gap:4px;padding:4px;border-radius:11px;background:var(--desk-inner);box-shadow:inset 0 0 0 1px var(--line)}
.d-tabs button{min-height:36px;padding:0 14px;border:0;border-radius:8px;background:none;color:var(--muted);font:600 14px/1 var(--body);cursor:pointer}
.d-tabs button[aria-pressed="true"]{background:var(--panel);color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mint) 35%,transparent)}
.d-label{font-size:12px;letter-spacing:.06em;color:var(--muted)}
.d-in{margin-top:18px;padding:16px 18px;border-radius:12px;background:var(--desk-inner);box-shadow:inset 0 0 0 1px var(--line)}
.d-in small{display:block;font-size:13px;color:var(--muted)}
.d-in p{margin-top:6px;font-family:var(--display);font-size:20px;line-height:1.3;letter-spacing:-.01em}
.d-steps{list-style:none;display:grid;gap:6px;margin:16px 4px;padding:0;min-height:74px;font-size:14px;color:var(--muted)}
.d-steps li{display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s var(--ease)}
.d-steps li.on{opacity:1;transform:none}
.d-steps li::before{content:"";flex:none;width:14px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--line)}
.d-steps li.ok::before{background:var(--mint);box-shadow:none}
.d-draft{padding:16px 18px;border-radius:12px;background:var(--desk-sheet);box-shadow:inset 0 0 0 1px var(--line)}
.d-draft-h{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted)}
.d-state{display:inline-flex;align-items:center;gap:8px;color:var(--ink)}
.d-state::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--muted);transition:background-color .25s}
.d-state.wait::before{background:var(--amber)}
.d-state.sent::before{background:var(--mint)}
.d-state.held::before{background:var(--lilac)}
@media (prefers-reduced-motion:no-preference){.d-state.wait::before{animation:d-pulse 1.8s infinite}}
@keyframes d-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--amber) 60%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
#d-draft{margin-top:10px;min-height:6.3em;font-size:17px;line-height:1.55;border-radius:6px;outline:none}
#d-draft[contenteditable="true"]{box-shadow:0 0 0 2px var(--mint);padding:4px 6px;margin-inline:-6px}
.d-src{display:inline-block;margin-top:8px;font-size:13px;color:var(--muted)}
.d-src[hidden]{display:none}
/* The cursor is the logo's mint block. */
.caret{display:inline-block;width:.62em;height:.62em;margin-left:3px;border-radius:.14em;background:var(--mint);vertical-align:-.02em}
@media (prefers-reduced-motion:no-preference){.caret{animation:d-blink 1s steps(1) infinite}}
@keyframes d-blink{50%{opacity:.3}}
.d-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.d-act:empty{display:none}
.live .d-act button{min-height:40px;padding:0 14px;border:0;border-radius:9px;font:600 14px/1 var(--body);cursor:pointer;color:var(--ink);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.live .d-act button.go{background:var(--mint);color:var(--on-mint);box-shadow:none}
.live .d-act button:disabled{opacity:.35;cursor:default}
.d-foot{margin-top:12px;font-size:13px;color:var(--muted)}
/* A row item beside the buttons, so it can't land on the message, a button or the note below. */
.d-stamp{margin-left:auto;padding:9px 12px;border:2px solid var(--mint-text);border-radius:8px;color:var(--mint-text);font:700 14px/1 var(--display);letter-spacing:.08em;white-space:nowrap;transform:rotate(-6deg);animation:d-stamp .35s var(--ease)}
@keyframes d-stamp{from{opacity:0;transform:rotate(-6deg) scale(.6)}}

/* ---------- Examples: an index of three, each can run in the desk ---------- */
.ex-rows{list-style:none;margin:48px 0 0;padding:0;border-top:1px solid var(--line)}
.ex-row{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr) minmax(0,1.2fr) auto;gap:12px 36px;align-items:baseline;padding-block:30px;border-bottom:1px solid var(--line)}
.ex-row::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:linear-gradient(90deg,var(--mint),var(--cyan),var(--lilac));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.ex-row:hover::after,.ex-row:focus-within::after{transform:scaleX(1)}
.ex-row .tag{justify-self:start;padding:0;border:0;border-radius:0;background:none;text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;color:var(--mint-text)}
.ex-row.t-time .tag{color:var(--cyan-text)}
.ex-row.t-team .tag{color:var(--lilac-text)}
.ex-row h3{font-size:clamp(28px,3vw,42px);line-height:1.05}
.ex-row h3 a{color:inherit;text-decoration:none}
.ex-row h3 a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.ex-row p{color:var(--muted)}
.ex-row button{justify-self:start;min-height:44px;padding:0;border:0;background:none;color:var(--ink);font:600 15px/1 var(--body);white-space:nowrap;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:6px}
.ex-row button:hover{text-decoration-color:var(--mint)}
@media (prefers-reduced-motion:reduce){.ex-row::after{transition:none}}

/* ---------- How we work with you ---------- */
.approach-title{font-size:clamp(26px,2.4vw,34px);color:var(--muted);margin-bottom:20px}
.approach>div{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:10px 56px;align-items:baseline;padding-block:24px;border-bottom:1px solid var(--line)}
.approach h3{font-size:clamp(40px,6vw,92px);line-height:1}
.approach h3 em{font-style:normal}
.approach>div:nth-child(1) h3 em{color:var(--mint-text)}
.approach>div:nth-child(2) h3 em{color:var(--cyan-text)}
.approach>div:nth-child(3) h3 em{color:var(--lilac-text)}
.approach p{max-width:38ch;color:var(--muted);font-size:19px}

/* ---------- Five questions: one at a time, written by the cursor ---------- */
.qs{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px 72px;align-items:start;margin-top:48px}
.q-big{min-height:3.1em;font-family:var(--display);font-size:clamp(38px,5vw,74px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.q-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.q-list button{display:flex;gap:16px;width:100%;min-height:48px;padding:14px 0;border:0;border-bottom:1px solid var(--line);background:none;color:var(--muted);font:400 17px/1.4 var(--body);text-align:left;cursor:pointer;transition:color .2s}
.q-list button span{min-width:1.2em;font-variant-numeric:tabular-nums}
.q-list button:hover,.q-list button[aria-current="true"]{color:var(--ink)}
.q-list button[aria-current="true"] span{color:var(--mint-text)}

@media (max-width:980px){
  .live .hero .wrap{grid-template-columns:minmax(0,1fr);gap:40px;min-height:0;padding-top:24px}
  .ex-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .approach>div,.qs{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:540px){
  .desk{padding:16px;border-radius:14px}
  .desk::before{left:16px;right:16px}
  .q-big{min-height:4.2em}
}

/* ---------- "Don't see what you need?": the three rows are a start, not the menu (Adam, October 29, 2026) ---------- */
.ex-note{margin-top:18px;font-size:14px;color:var(--quiet)}
.ex-more{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px 56px;align-items:end;margin-top:40px;padding:clamp(28px,4vw,52px);border-radius:18px;
  background:var(--desk-fill);box-shadow:inset 0 0 0 1px var(--desk-rim),0 40px 100px -50px var(--desk-shadow)}
.ex-more::before{content:"";position:absolute;left:24px;right:24px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--mint),var(--cyan),var(--lilac),transparent)}
.ex-more h3{font-size:clamp(40px,5.4vw,80px);line-height:.98;letter-spacing:-.035em;text-wrap:balance}
.ex-more h3 em{font-style:normal;color:var(--mint-text)}
.ex-more p{max-width:40ch;font-size:19px;line-height:1.55;color:var(--text-soft,var(--muted))}
.ex-more-go{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:24px}
.ex-more-go .btn{margin:0}
.ex-more-go .text-link{display:inline-flex;gap:12px;align-items:center;min-height:44px;color:var(--ink);font-size:15px;text-decoration:none;border-bottom:1px solid var(--line)}
.ex-more-go .text-link:hover{border-bottom-color:var(--mint)}
.ex-more-go .text-link svg{width:20px;height:20px}
@media (max-width:980px){.ex-more{grid-template-columns:minmax(0,1fr);align-items:start}}

/* ---------- What we build: four kinds of work, not a menu (Adam, November 3, 2026) ---------- */
.build-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
.build-list li{position:relative;padding-top:26px;border-top:1px solid var(--line)}
.build-list li::before{content:"";position:absolute;left:0;top:-1px;width:56px;height:2px;background:var(--mint)}
.build-list .b-flow::before{background:var(--cyan)}
.build-list .b-report::before{background:var(--lilac)}
.build-list .b-site::before{background:linear-gradient(90deg,var(--mint),var(--cyan),var(--lilac))}
.build-list h3{font-size:clamp(24px,2.2vw,32px);line-height:1.08;margin-bottom:12px}
.build-list p{color:var(--muted)}
@media (max-width:980px){.build-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 32px}}
@media (max-width:540px){.build-list{grid-template-columns:minmax(0,1fr);gap:28px}}
.build-more{margin-top:36px;color:var(--muted);font-size:17px}
.build-more a{color:var(--ink);text-underline-offset:5px;text-decoration-color:var(--mint)}