/* chrismai.ai UX refresh (Oct 2026): calmer spacing and type, unified status pills, the Work → "Now building" board.
   Loaded last. Visual only: no checkout / portal / webhook selectors are touched. */
:root{
  --st-live:#1f9d55; --st-live-bg:rgba(31,157,85,.11);
  --st-prev:#c26a1b; --st-prev-bg:rgba(255,159,107,.16);
  --st-prog:#6a4cf0; --st-prog-bg:rgba(139,123,255,.14);
  --st-pitch:#6e6e73; --st-pitch-bg:rgba(127,127,127,.12);
  --card-r:22px; --card-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px -18px rgba(20,16,40,.22);
  --card-shadow-h:0 2px 4px rgba(0,0,0,.05),0 26px 50px -24px rgba(20,16,40,.34);
}
@media (prefers-color-scheme:dark){:root{--st-live:#4cd486;--st-live-bg:rgba(76,212,134,.14);--st-prev:#ffb27f;--st-prev-bg:rgba(255,159,107,.16);--st-prog:#b9a8ff;--st-prog-bg:rgba(167,139,250,.16);--st-pitch:#a1a1a6;--st-pitch-bg:rgba(255,255,255,.1);--card-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 14px 34px -20px rgba(0,0,0,.8);--card-shadow-h:0 1px 0 rgba(255,255,255,.06) inset,0 28px 54px -24px rgba(0,0,0,.9)}}

/* ---- Type & rhythm ---- */
.panel-head h2{text-wrap:balance}
.panel-head p{max-width:62ch;text-wrap:pretty}
.work-head{margin-bottom:clamp(14px,2.2vh,26px)}

/* ---- Segmented control: smoother, with the live dot ---- */
.wk-seg{backdrop-filter:saturate(160%) blur(8px);-webkit-backdrop-filter:saturate(160%) blur(8px)}
.wk-seg button{transition:background .25s var(--ease),color .2s,box-shadow .25s;display:inline-flex;align-items:center;gap:6px}
.wk-seg button:hover:not([aria-selected="true"]){color:var(--ink)}
.seg-dot{width:7px;height:7px;border-radius:50%;background:var(--st-live);box-shadow:0 0 0 0 rgba(31,157,85,.5);animation:stPulse 2.4s var(--ease) infinite}
.seg-short{display:none}

/* ---- Unified pills (case studies + board) ---- */
.pill{gap:6px;font-weight:600;letter-spacing:0}
.pill-ok{background:var(--st-live-bg);color:var(--st-live)}
.pill-ok::before,.pill-warm::before,.pill-ai::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.pill-warm{background:var(--st-prev-bg);color:var(--st-prev)}
.pill-ai{background:var(--st-prog-bg);color:var(--st-prog)}

/* ---- Case-study cards: softer elevation ---- */
.proj{border-radius:var(--card-r);box-shadow:var(--card-shadow);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.proj:hover{box-shadow:var(--card-shadow-h)}
.proj h3{letter-spacing:-.022em}

/* ---- Home: status link in the hero ---- */
.hero-links .hero-status{display:inline-flex;align-items:center;gap:7px}
.hero-links .hero-status .st-live{width:7px;height:7px}

/* ---- Now building board ---- */
#wk-status{min-width:0;max-width:100%}
.st{min-width:0;max-width:100%;display:flex;flex-direction:column;gap:clamp(14px,2vh,22px);padding-bottom:4px}
.st-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 28px;flex-wrap:wrap}
.st-intro{max-width:640px}
.st-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.st-live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--st-live);box-shadow:0 0 0 0 rgba(31,157,85,.5);animation:stPulse 2.4s var(--ease) infinite}
.st-h{font-size:clamp(22px,2.3vw,30px);line-height:1.1;letter-spacing:-.028em;font-weight:700;text-wrap:balance}
.st-sub{margin-top:6px;color:var(--ink-2);font-size:14.5px;line-height:1.5;text-wrap:pretty}
.st-upd{color:var(--ink);opacity:.8;white-space:nowrap}
.st-filter{display:flex;flex-wrap:wrap;gap:6px}
.st-filter button{font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--bg-elev);border:1px solid var(--hair);border-radius:999px;padding:6px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.st-filter button:hover{color:var(--ink)}
.st-filter button:active{transform:scale(.97)}
.st-filter button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.st-filter .n{font-variant-numeric:tabular-nums;font-size:11.5px;opacity:.65}
.st-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.st-card{position:relative;display:flex;flex-direction:column;gap:7px;padding:18px 20px 16px;border-radius:var(--card-r);background:var(--bg-elev);border:1px solid var(--hair);box-shadow:var(--card-shadow);transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .5s var(--ease);overflow:hidden;min-width:0}
.st-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent,transparent);opacity:.85}
.st-card:hover{transform:translateY(-3px);box-shadow:var(--card-shadow-h)}
.st-card.stc-live{--accent:linear-gradient(90deg,var(--st-live),#3ad0b5)}
.st-card.stc-preview{--accent:linear-gradient(90deg,#ff9f6b,#ffcf8b)}
.st-card.stc-prog{--accent:linear-gradient(90deg,#8b7bff,#6a4cf0)}
.st-card.stc-pitch{--accent:linear-gradient(90deg,rgba(127,127,127,.5),rgba(127,127,127,.2))}
.st-card-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.st-pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.st-pill-live{background:var(--st-live-bg);color:var(--st-live)}
.st-pill-preview{background:var(--st-prev-bg);color:var(--st-prev)}
.st-pill-prog{background:var(--st-prog-bg);color:var(--st-prog)}
.st-pill-pitch{background:var(--st-pitch-bg);color:var(--st-pitch)}
.sd{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.st-pill-live .sd{animation:stPulse 2.4s var(--ease) infinite}
.st-kind{font-size:12px;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st-name{margin:2px 0 0;font-size:18px;line-height:1.2;letter-spacing:-.022em;font-weight:650}
.st-desc{font-size:13.5px;line-height:1.45;color:var(--ink);margin:0}
.st-note{font-size:12.5px;line-height:1.4;color:var(--ink-2);margin:0}
.st-foot{margin-top:auto;padding-top:8px;border-top:1px solid var(--hair);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.st-time{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.st-acts{display:inline-flex;gap:14px;flex-wrap:wrap}
.st-acts .lnk{font-size:13.5px}
.st-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--ink-2);margin:0}
.st-legend span{display:inline-flex;align-items:center;gap:7px}
.st-legend .sd-live{color:var(--st-live)}.st-legend .sd-preview{color:var(--st-prev)}.st-legend .sd-prog{color:var(--st-prog)}.st-legend .sd-pitch{color:var(--st-pitch)}
.st-skel{min-height:190px;background:linear-gradient(100deg,var(--bg-elev) 30%,var(--bg-alt) 50%,var(--bg-elev) 70%);background-size:300% 100%;animation:stShimmer 1.4s linear infinite}
.st-empty{grid-column:1/-1}
/* entrance: staggered rise, once per render */
.js .st-grid .st-card:not(.st-skel){opacity:0;transform:translateY(10px)}
.js .st-grid.is-in .st-card{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 55ms)}
.js .st-grid.is-in .st-card:hover{transform:translateY(-3px);transition-delay:0s}
@keyframes stPulse{0%{box-shadow:0 0 0 0 rgba(31,157,85,.45)}70%{box-shadow:0 0 0 7px rgba(31,157,85,0)}100%{box-shadow:0 0 0 0 rgba(31,157,85,0)}}
@keyframes stShimmer{to{background-position:-150% 0}}

/* ---- Fit: 1024 wide / short desktop ---- */
@media (max-width:1100px) and (min-width:821px){.st-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-height:760px) and (min-width:821px){
  .st{gap:12px}.st-sub{font-size:13.5px}.st-h{font-size:24px}
  .st-card{padding:14px 16px 12px;gap:5px}.st-desc{font-size:13px}.st-legend{display:none}
}
/* ---- Phones ---- */
@media (max-width:820px){
  .seg-long{display:none}.seg-short{display:inline}
  .wk-seg button{gap:5px}
  .st-top{flex-direction:column;align-items:stretch;gap:12px;min-width:0}
  .st-top > *{min-width:0;max-width:100%}
  .st-top > .st-filter{max-width:none;width:calc(100% + 36px);align-self:flex-start}
  .st-h{font-size:22px}
  .st-sub{font-size:13.5px}
  .st-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -18px;padding:0 18px 2px}
  .st-filter::-webkit-scrollbar{display:none}
  .st-filter button{flex:none}
  .st-grid{grid-template-columns:1fr;gap:10px}
  .st-card{padding:15px 16px 13px;border-radius:18px}
  .st-name{font-size:17px}
  .st-legend{gap:6px 14px}
  .hero-links{flex-wrap:wrap;row-gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .seg-dot,.st-live,.st-pill-live .sd,.st-skel{animation:none}
  .js .st-grid .st-card,.js .st-grid.is-in .st-card{opacity:1;transform:none;transition:none}
  .st-card:hover,.proj:hover{transform:none}
}

/* align-bots: relationship tag on status cards (client / in talks / own product / concept) */
.st-tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid var(--hair);color:var(--ink-2);background:transparent}
.st-tag-client{border-color:transparent;background:var(--ink);color:var(--bg)}
.st-tag-partner{border-color:transparent;background:var(--st-live-bg);color:var(--st-live)}
.st-tag-talks{border-color:color-mix(in srgb,var(--st-prev) 45%,transparent);color:var(--st-prev)}
.st-tag-concept{border-style:dashed;border-color:color-mix(in srgb,var(--ink-2) 55%,transparent)}
.st-card-top .st-kind{flex:1 1 100%;order:3}
.pill-concept{background:transparent;color:var(--ink-2);border:1px dashed color-mix(in srgb,var(--ink-2) 55%,transparent)}
.st-legend .lg-tag{gap:6px}
.st-legend .st-tag{height:18px;font-size:10.5px;padding:0 7px}