/* =========================================================
   Case-study page — white theme, matches the home aesthetic.
   ========================================================= */

.cs-page { background: var(--bg); }

/* top bar */
.cs-topbar {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1180px; margin: 0 auto;
  padding: 28px clamp(22px, 5vw, 48px);
  font-size: 13px;
}
.cs-back, .cs-home {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-mid); transition: color .2s var(--ease);
}
.cs-back .arr { transition: transform .25s var(--ease-soft); }
.cs-back:hover { color: var(--ink); }
.cs-back:hover .arr { transform: translateX(-4px); }
.cs-home:hover { color: var(--ink); }
.cs-home .brand-mark { font-size: 12px; animation: spin-star 9s linear infinite; }

/* shell: TOC + content */
.cs-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 760px);
  gap: 56px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px clamp(22px, 5vw, 48px) 80px;
  justify-content: center;
}

/* sticky table of contents */
.cs-toc {
  position: sticky; top: 28px; align-self: start;
  display: flex; flex-direction: column; gap: 16px;
  font-size: 13px;
  padding-top: 6px;
}
.cs-toc-back {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-mid); font-size: 13px;
  transition: color .2s var(--ease);
}
.cs-toc-back .arr { transition: transform .25s var(--ease-soft); }
.cs-toc-back:hover { color: var(--ink); }
.cs-toc-back:hover .arr { transform: translateX(-4px); }
.cs-toc-label {
  font-family: var(--font-disp); font-size: 20px; font-weight: 500;
  color: var(--ink);
}
.cs-toc-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cs-toc-list a {
  display: block; padding: 6px 8px; border-radius: 8px;
  color: var(--ink-dim);
  transition: color .2s var(--ease), padding .25s var(--ease-soft), background .2s;
}
.cs-toc-list a:hover { color: var(--ink); padding-left: 14px; }
.cs-toc-list a.is-current { color: var(--ink); background: var(--bg-soft); }
.cs-toptop { margin-top: 10px; color: var(--ink-faint); transition: color .2s; }
.cs-toptop:hover { color: var(--ink); }

/* hero */
.cs-hero {
  border-radius: 24px; overflow: hidden;
  border: 1px solid var(--line);
  max-height: 380px; background: var(--bg-soft);
}
.cs-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* head */
.cs-head { padding: 34px 0 6px; }
.cs-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.cs-title {
  font-family: var(--font-disp); font-weight: 500;
  font-size: clamp(30px, 5vw, 48px); line-height: 1.08; letter-spacing: -.01em;
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px;
}
.cs-star { font-size: .5em; color: var(--ink-faint); animation: spin-star 9s linear infinite; }
.cs-desc { max-width: 60ch; font-size: 16px; line-height: 1.7; color: var(--ink-mid); }

/* live-site / request-access CTA */
.cs-cta {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 22px;
  padding: 11px 20px; border-radius: 999px;
  background: var(--ink); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: -.01em;
  text-decoration: none; border: 1px solid var(--ink); cursor: pointer;
  transition: background .2s var(--ease-soft), color .2s, transform .2s var(--ease-soft);
}
.cs-cta:hover { background: #fff; color: var(--ink); transform: translateY(-1px); }
.cs-cta-arr { transition: transform .2s var(--ease-soft); }
.cs-cta:hover .cs-cta-arr { transform: translateX(3px); }

/* request-access modal */
.ra-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ra-modal[hidden] { display: none; }
.ra-backdrop { position: absolute; inset: 0; background: rgba(20,20,20,.42); backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s var(--ease-soft); }
.ra-modal.is-open .ra-backdrop { opacity: 1; }
.ra-box {
  position: relative; width: 100%; max-width: 440px;
  background: #fff; border: 1px solid var(--line-2); border-radius: 16px;
  padding: 30px 30px 28px; box-shadow: 0 24px 60px -18px rgba(20,20,20,.32);
  transform: translateY(10px) scale(.985); opacity: 0;
  transition: transform .24s var(--ease-soft), opacity .24s var(--ease-soft);
}
.ra-modal.is-open .ra-box { transform: none; opacity: 1; }
.ra-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  border: none; background: transparent; color: var(--ink-dim); cursor: pointer;
  font-size: 22px; line-height: 1; border-radius: 8px; transition: background .15s, color .15s;
}
.ra-close:hover { background: var(--bg-soft); color: var(--ink); }
.ra-title { font-family: var(--font-disp); font-weight: 500; font-size: 24px; letter-spacing: -.01em; margin: 0 0 8px; }
.ra-sub { font-size: 14px; line-height: 1.6; color: var(--ink-mid); margin: 0 0 22px; }
.ra-form { display: flex; flex-direction: column; gap: 14px; }
.ra-field { display: flex; flex-direction: column; gap: 6px; }
.ra-field > span { font-size: 12px; font-weight: 500; color: var(--ink-mid); letter-spacing: .01em; }
.ra-field > span em { font-style: normal; color: var(--ink-faint); font-weight: 400; }
.ra-field input, .ra-field textarea {
  font-family: inherit; font-size: 14px; color: var(--ink);
  padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 9px;
  background: var(--bg-soft); resize: vertical; transition: border-color .15s, background .15s;
}
.ra-field input:focus, .ra-field textarea:focus { outline: none; border-color: var(--ink); background: #fff; }
.ra-submit {
  margin-top: 4px; padding: 12px 20px; border-radius: 999px;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background .2s var(--ease-soft), color .2s, transform .2s var(--ease-soft);
}
.ra-submit:hover { background: #fff; color: var(--ink); transform: translateY(-1px); }
.ra-submit:disabled { opacity: .6; cursor: default; transform: none; background: var(--ink); color: #fff; }
.ra-err { font-size: 13px; color: #d44a4a; margin: 2px 0 0; }
.ra-err[hidden] { display: none; }
.ra-view[hidden] { display: none; }
.ra-view[data-ra-view="done"] { text-align: center; }
.ra-check {
  width: 46px; height: 46px; margin: 4px auto 16px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #eaf5ef; color: #3a8c6a; font-size: 22px; font-weight: 600;
}
.ra-view[data-ra-view="done"] .ra-submit { margin: 22px auto 0; }
.ra-email { color: var(--ink); font-weight: 500; }

/* meta grid */
.cs-metagrid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px;
  margin: 34px 0 8px; padding: 26px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.cs-metakey { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.cs-metaval { font-size: 14px; line-height: 1.5; color: var(--ink); }

/* numbered narrative sections */
.cs-section { padding: 64px 0; border-bottom: 1px solid var(--line); }
.cs-sechead { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; }
.cs-secno { font-size: 13px; color: var(--ink-faint); letter-spacing: .1em; }
.cs-sectitle {
  font-family: var(--font-disp); font-weight: 500;
  font-size: clamp(26px, 4vw, 38px); line-height: 1.1;
}
.cs-prose { max-width: 60ch; }
.cs-prose p { color: var(--ink-mid); font-size: 15.5px; line-height: 1.8; margin-bottom: 16px; }
.cs-prose p:last-child { margin-bottom: 0; }

/* lead line: descriptive headline under an explicit section label */
.cs-lead {
  font-family: var(--font-disp); font-weight: 500;
  font-size: clamp(18px, 2.3vw, 23px); line-height: 1.3;
  color: var(--ink-mid); margin: 0 0 22px; max-width: 46ch;
}
.cs-sechead:has(+ .cs-lead) { margin-bottom: 12px; }
.cs-reflection .cs-lead { margin-left: auto; margin-right: auto; }

/* bento grid */
.cs-bento {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  padding: 8px 0 64px; border-bottom: 1px solid var(--line);
}
.cs-bento-stack { display: flex; flex-direction: column; gap: 16px; }
.cs-bento-tall, .cs-bento-cell {
  position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-soft);
}
.cs-bento-tall { height: 100%; }
.cs-bento img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-soft); }
.cs-bento-tall:hover img, .cs-bento-cell:hover img { transform: scale(1.03); }
.cs-cap {
  position: absolute; left: 14px; bottom: 12px;
  font-size: 11px; letter-spacing: .04em;
  color: var(--ink-mid); background: rgba(255,255,255,.82);
  padding: 4px 8px; border-radius: 6px; backdrop-filter: blur(4px);
}

/* product-showcase video */
.cs-videowrap { margin: 0; }
.cs-showcase {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line-2); border-radius: 14px;
  background: #000; overflow: hidden;
  box-shadow: 0 20px 50px -22px rgba(20,20,20,.3);
}
.cs-videowrap figcaption {
  margin-top: 12px; font-size: 13px; color: var(--ink-dim);
  text-align: center; letter-spacing: .01em;
}

/* vertical image stack (full-width screens, one after another) */
.cs-stack {
  display: flex; flex-direction: column; gap: 20px;
  padding: 8px 0 64px; border-bottom: 1px solid var(--line);
}
.cs-stack-frame {
  position: relative; margin: 0; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-soft);
  box-shadow: 0 16px 44px -30px rgba(0,0,0,.3);
  transition: transform .4s var(--ease-soft);
}
.cs-stack-frame img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease-soft); }
.cs-stack-frame:hover { transform: translateY(-4px); }
.cs-stack-frame:hover img { transform: scale(1.02); }

/* key design decisions (smallest.ai four-part layout) */
.cs-section > .cs-stack,
.cs-section > .cs-bento { padding: 0; border-bottom: none; margin-top: 38px; }
.cs-decisions { list-style: none; display: flex; flex-direction: column; gap: 28px; margin-top: 40px; }
.cs-decision { padding-left: 18px; border-left: 2px solid var(--line); }
.cs-decision .cs-feat-title { font-size: 20px; margin-bottom: 6px; }
.cs-decision .cs-feat-body { max-width: 64ch; }
.cs-points { margin: 14px 0 0; padding-left: 20px; max-width: 64ch; }
.cs-points li { font-size: 14px; line-height: 1.65; color: var(--ink-mid); margin-bottom: 9px; }
.cs-points li:last-child { margin-bottom: 0; }
.cs-points li::marker { color: var(--ink-faint); }
.cs-section .cs-featrows { margin-top: 44px; }
.cs-featrow--text .cs-featrow-text { max-width: 64ch; margin-bottom: 0; }
.cs-decisions-closing { margin-top: 44px; }

/* numbered step-by-step walkthrough with an image per step */
.cs-steps { list-style: none; margin: 44px 0 0; padding: 0; display: flex; flex-direction: column; gap: 40px; }
.cs-step { display: block; }
.cs-step-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.cs-step-no {
  flex: none; width: 30px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums; margin-top: 2px;
}
.cs-step-title { font-family: var(--font-disp); font-weight: 500; font-size: 22px; line-height: 1.2; margin: 0 0 4px; }
.cs-step-body { font-size: 14.5px; line-height: 1.65; color: var(--ink-mid); max-width: 64ch; margin: 0; }
.cs-step-media {
  overflow: hidden; border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--bg-soft); margin-left: 46px;
}
.cs-step-media img,
.cs-step-media video { display: block; width: 100%; height: auto; transition: transform .6s var(--ease-soft); }
.cs-step-media:not(.is-placeholder):hover img { transform: scale(1.02); }
.cs-step-media.is-placeholder { border-style: dashed; }
@media (max-width: 720px) { .cs-step-media { margin-left: 0; } }

/* optional subheading + caption above a text-section image */
.cs-submedia-title { font-family: var(--font-disp); font-weight: 500; font-size: 22px; line-height: 1.2; margin: 38px 0 6px; }
.cs-submedia-cap { font-size: 14.5px; line-height: 1.65; color: var(--ink-mid); max-width: 64ch; margin: 0 0 16px; }
.cs-submedia-title + .cs-textmedia, .cs-submedia-cap + .cs-textmedia { margin-top: 0; }

/* image attached under a text section (e.g. My role) */
.cs-textmedia {
  margin-top: 32px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-soft);
  box-shadow: 0 24px 60px -32px rgba(0,0,0,.4);
}
.cs-textmedia img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease-soft); }
.cs-textmedia:hover img { transform: scale(1.02); }

/* ===== Uxie design-system showcase ===== */
.ds-subtitle { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: 30px 0 14px; }

/* status pills */
.ds-pills { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }
.ds-pillrow { display: flex; align-items: center; gap: 16px; }
.ds-pill { flex: 0 0 auto; min-width: 108px; text-align: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 11px; }
.ds-pillnote { font-size: 14px; line-height: 1.4; color: var(--ink-mid); }

/* color swatches */
.ds-swgroup { margin-top: 4px; }
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.ds-swatch { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg-card); }
.ds-chip { width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .12); flex: 0 0 auto; }
.ds-swtxt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-hex { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
.ds-swname { font-size: 11.5px; line-height: 1.3; color: var(--ink-mid); }

/* type scale */
.ds-type { display: flex; flex-direction: column; gap: 18px; margin-top: 36px; border-top: 1px solid var(--line); padding-top: 26px; }
.ds-typerow { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.ds-typesample { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); font-weight: 500; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-typemeta { flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }

/* approval card replica */
.ds-approval { max-width: 540px; margin-top: 36px; border: 1px solid rgba(244, 162, 27, .4); background: rgba(244, 162, 27, .08); border-radius: 10px; padding: 16px; }
.ds-approval-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ds-approval-label { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #b87100; }
.ds-approval-tool { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mid); background: rgba(0, 0, 0, .05); padding: 2px 7px; border-radius: 5px; }
.ds-approval-summary { font-size: 14px; line-height: 1.5; color: var(--ink); margin-bottom: 14px; }
.ds-approval-params { display: flex; flex-direction: column; gap: 9px; border-top: 1px solid rgba(0, 0, 0, .06); padding-top: 13px; margin-bottom: 16px; }
.ds-param { display: grid; grid-template-columns: 76px 1fr; gap: 12px; font-size: 13px; align-items: baseline; }
.ds-param-k { color: var(--ink-faint); }
.ds-param-v { color: var(--ink); font-family: var(--font-mono); font-size: 12.5px; word-break: break-word; }
.ds-approval-actions { display: flex; gap: 10px; }
.ds-btn { font-size: 13px; font-weight: 500; padding: 8px 18px; border-radius: 6px; border: 1px solid transparent; }
.ds-btn--approve { background: #1a1a1a; color: #fff; }
.ds-btn--decline { background: transparent; color: var(--ink-mid); border-color: var(--line); }
/* ===== standalone screen mockups gallery ===== */
.screens-gallery { display: flex; flex-direction: column; gap: 44px; margin-top: 36px; }
.screen-mock { margin: 0; }
.screen-cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.appwin--static .aw-body { height: auto; min-height: 360px; }
.appwin--static .aw-panel { display: block; }
.aw-listhead { padding: 12px 13px; border-bottom: 1px solid rgba(0, 0, 0, .05); }
.aw-search { width: 100%; padding: 7px 10px; border-radius: 6px; border: 1px solid #e5e3df; font-size: 13px; font-family: inherit; background: rgba(255, 255, 255, .8); color: var(--ink); }
.aw-item--stack { flex-direction: column; align-items: flex-start; gap: 3px; }
.aw-item-t { font-size: 13px; color: var(--ink); }
.aw-item-s { font-size: 11px; color: #666; }
.aw-memmeta { display: flex; align-items: center; gap: 8px; margin: 10px 0 12px; }
.aw-memwhen { font-size: 11px; color: #666; }
.aw-memfact { font-size: 13px; line-height: 1.6; color: var(--ink-mid); max-width: 60ch; margin-bottom: 18px; }
.aw-forget { display: inline-block; font-size: 13px; font-weight: 500; padding: 8px 14px; border-radius: 6px; border: 1px solid #d44a4a; color: #d44a4a; }
/* settings modal mock */
.smodal { max-width: 680px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #F3F3F1; box-shadow: 0 40px 90px -52px rgba(0, 0, 0, .5); }
.smodal-head { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid #e5e3df; background: rgba(255, 255, 255, .45); flex-wrap: wrap; }
.smodal-title { font-weight: 600; font-size: 14px; color: var(--ink); margin-right: 6px; }
.smodal-tab { font-size: 13px; color: var(--ink-mid); padding-bottom: 3px; }
.smodal-tab.is-active { color: var(--ink); font-weight: 600; border-bottom: 2px solid #1a1a1a; }
.smodal-body { padding: 18px 22px; }
.smono { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }

/* ===== interactive app-window prototype ===== */
.appwin { position: relative; margin: 36px 0 0; border-radius: 16px; overflow: hidden; background: #faf8f2; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px rgba(0,0,0,.06), 0 50px 100px -50px rgba(40,30,15,.5); }
.aw-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #ece7db; background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.35)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.aw-traffic { display: flex; gap: 8px; }
.aw-traffic i { width: 12px; height: 12px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
.aw-bartitle { font-size: 12.5px; color: var(--ink-mid); font-weight: 600; margin: 0 auto; letter-spacing: .01em; }
.aw-body { display: flex; height: 552px; }
.aw-side { width: 210px; flex: 0 0 auto; border-right: 1px solid #ece7db; background: #f3efe5; padding: 14px 10px; display: flex; flex-direction: column; }
.aw-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; color: var(--ink); padding: 4px 8px 14px; }
.aw-logo { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg,#2c2a26,#0f0e0c); flex: 0 0 auto; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.aw-tab { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 1px 0; border-radius: 9px; font-size: 13.5px; color: var(--ink-mid); cursor: pointer; transition: background .12s ease, color .12s ease; }
.aw-tab:hover { background: rgba(0, 0, 0, .04); color: var(--ink); }
.aw-tab.is-active { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04); }
.aw-ico { width: 18px; text-align: center; }
.aw-spacer { margin-top: auto; }
.aw-main { flex: 1; min-width: 0; overflow: auto; background: #faf8f2; }
.aw-panel { display: none; padding: 26px 28px; }
.aw-panel.is-shown { display: block; }
.aw-h1 { font-size: 22px; font-weight: 600; color: var(--ink); }
.aw-sub { font-size: 13px; color: #666; margin-top: 4px; }
.aw-seclabel { font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #888; font-weight: 700; margin: 18px 0 10px; }
.aw-pill { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 10px; white-space: nowrap; }
.aw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.aw-stat { border: 1px solid #ece7db; border-radius: 10px; background: #fff; padding: 14px; box-shadow: 0 1px 2px rgba(40,30,15,.04); }
.aw-statnum { font-size: 24px; font-weight: 600; color: var(--ink); }
.aw-statlbl { font-size: 12px; color: #666; margin-top: 2px; }
.aw-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(0, 0, 0, .05); font-size: 13px; color: var(--ink); }
.aw-two { display: flex; border: 1px solid #ece7db; border-radius: 12px; overflow: hidden; background: #fff; min-height: 432px; box-shadow: 0 1px 2px rgba(40,30,15,.04); }
.aw-list { width: 236px; flex: 0 0 auto; border-right: 1px solid #f0ebdf; background: #fcfaf4; }
.aw-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border-bottom: 1px solid #f3eee2; font-size: 13px; color: var(--ink); cursor: pointer; transition: background .12s ease; }
.aw-item:hover { background: #f6f2e8; }
.aw-item.is-active { background: #fff; box-shadow: inset 3px 0 0 var(--ink); position: relative; z-index: 1; }
.aw-detail { flex: 1; min-width: 0; padding: 18px 20px; overflow: auto; }
.aw-dtitle { font-size: 18px; font-weight: 600; color: var(--ink); }
.aw-log { display: flex; flex-direction: column; gap: 9px; }
.aw-logline { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mid); padding-left: 16px; position: relative; }
.aw-logline::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.aw-logline.is-amber::before { background: #F4A21B; }
.aw-detail .ds-approval { margin-top: 18px; max-width: none; }
.aw-briefs { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.aw-briefs .ds-cfg { margin-top: 0; max-width: none; }
.aw-tr { display: flex; flex-direction: column; gap: 10px; }
.aw-trline { font-size: 13px; line-height: 1.5; color: var(--ink); }
.aw-trspk { font-weight: 600; color: #666; margin-right: 6px; }
.aw-trinterim { font-style: italic; color: #999; }
.aw-note { font-size: 13px; line-height: 1.7; color: var(--ink-mid); }
.aw-note b { color: var(--ink); }
.aw-kv { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(0, 0, 0, .05); font-size: 13px; color: var(--ink); }
.aw-kv code { font-family: var(--font-mono); font-size: 12px; background: rgba(0, 0, 0, .04); padding: 2px 7px; border-radius: 5px; }
.aw-arrow { color: var(--ink-faint); }
.aw-capsule { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); pointer-events: none; z-index: 5; }
@media (max-width: 720px) {
  .aw-body { height: auto; flex-direction: column; }
  .aw-side { width: auto; flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid #e5e3df; }
  .aw-brand { width: 100%; } .aw-spacer { display: none; }
  .aw-two { flex-direction: column; } .aw-list { width: auto; border-right: none; border-bottom: 1px solid #e5e3df; }
  .aw-cards { grid-template-columns: 1fr; }
}

/* building blocks (UI kit) */
.ds-kit { margin-top: 36px; display: flex; flex-direction: column; gap: 20px; max-width: 520px; }
.ds-kit-cap { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 9px; }
.ds-kit-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ds-ui-btn { font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 6px; border: 1px solid transparent; }
.ds-ui-btn--primary { background: #1a1a1a; color: #fff; }
.ds-ui-btn--secondary { background: transparent; color: #1a1a1a; border-color: #ccc; }
.ds-ui-btn--danger { background: transparent; color: #d44a4a; border-color: #d44a4a; }
.ds-ui-input { padding: 7px 10px; border-radius: 6px; border: 1px solid #e5e3df; font-size: 13px; font-family: inherit; background: rgba(255, 255, 255, .8); color: var(--ink); width: 100%; max-width: 300px; }
.ds-ui-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-ui-chip { padding: 3px 10px; border-radius: 12px; border: 1px solid #e5e3df; background: transparent; font-size: 11px; color: #666; }
.ds-ui-pre { white-space: pre-wrap; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; padding: 12px; border-radius: 6px; background: rgba(0, 0, 0, .04); border: 1px solid rgba(0, 0, 0, .06); color: var(--ink); }

/* left rail (sidebar) */
.ds-sidebar { margin-top: 36px; width: 240px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .5); padding: 12px 0; }
.ds-sb-head { display: flex; flex-direction: column; gap: 9px; padding: 6px 14px 12px; }
.ds-traffic { display: flex; gap: 6px; }
.ds-traffic i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.ds-sb-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; color: var(--ink); }
.ds-sb-logo { width: 18px; height: 18px; border-radius: 5px; background: #1a1a1a; }
.ds-sb-nav { display: flex; flex-direction: column; }
.ds-sb-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 13px; color: var(--ink-mid); }
.ds-sb-item.is-active { background: rgba(0, 0, 0, .05); color: var(--ink); font-weight: 500; }
.ds-sb-ico { width: 18px; text-align: center; }
.ds-sb-spacer { height: 16px; }

/* config card (briefings template) */
.ds-cfg { margin-top: 36px; max-width: 480px; border: 1px solid #e5e3df; border-radius: 8px; background: rgba(255, 255, 255, .6); padding: 16px; }
.ds-cfg-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ds-cfg-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.ds-cfg-desc { margin-top: 6px; font-size: 12px; color: #666; line-height: 1.5; }
.ds-cfg-grid { display: grid; grid-template-columns: auto 1fr; gap: 12px 16px; margin-top: 16px; align-items: center; }
.ds-cfg-flabel { font-size: 12px; color: #666; }
.ds-cfg-fval { font-size: 13px; color: var(--ink); font-family: var(--font-mono); }
.ds-cfg-actions { margin-top: 18px; display: flex; gap: 8px; }

/* floating hotkey capsule */
.ds-capsule-stage { margin-top: 36px; position: relative; height: 220px; border-radius: 16px; border: 1px solid var(--line); overflow: hidden; background: linear-gradient(160deg, #e9ecf2, #dfe3ea 60%, #d3d8e2); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 24px; }
.ds-capsule { display: flex; align-items: center; gap: 13px; background: rgba(20, 20, 22, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; border-radius: 999px; padding: 12px 20px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5); }
.ds-wave { display: flex; align-items: center; gap: 3px; height: 24px; }
.ds-wave i { width: 3px; height: 6px; border-radius: 2px; background: #6ee7a8; animation: ds-wave 1s ease-in-out infinite; animation-delay: var(--d); }
@keyframes ds-wave { 0%, 100% { height: 5px; } 50% { height: 20px; } }
.ds-capsule-text { font-size: 13.5px; color: rgba(255, 255, 255, .92); white-space: nowrap; }
.ds-caret { display: inline-block; width: 2px; height: 14px; background: #6ee7a8; margin-left: 3px; vertical-align: -2px; animation: ds-caret 1s step-end infinite; }
@keyframes ds-caret { 50% { opacity: 0; } }

/* two-pane list + detail */
.ds-twopane { margin-top: 36px; display: grid; grid-template-columns: 244px 1fr; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg-card); min-height: 264px; }
.ds-tp-list { border-right: 1px solid var(--line); background: rgba(0, 0, 0, .015); }
.ds-tp-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(0, 0, 0, .05); }
.ds-tp-item.is-active { background: rgba(51, 103, 214, .07); box-shadow: inset 2px 0 0 #3367d6; }
.ds-tp-title { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-tp-item .ds-pill { min-width: 0; font-size: 9px; padding: 3px 8px; }
.ds-tp-detail { padding: 20px 22px; }
.ds-tp-dtitle { font-size: 18px; font-family: var(--font-disp); font-weight: 500; margin-bottom: 16px; }
.ds-tp-seclabel { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.ds-tp-log { display: flex; flex-direction: column; gap: 10px; }
.ds-tp-logline { font-family: var(--font-mono); font-size: 12px; color: var(--ink-mid); padding-left: 16px; position: relative; }
.ds-tp-logline::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
@media (max-width: 720px) {
  .ds-typerow { flex-direction: column; gap: 4px; align-items: flex-start; }
  .ds-twopane { grid-template-columns: 1fr; }
  .ds-tp-list { border-right: none; border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .ds-wave i, .ds-caret { animation: none; } }

/* eyebrow callouts (My goal / What I learned) */
.cs-eyebrow { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.cs-callout {
  margin-top: 32px; padding: 18px 22px; max-width: 62ch;
  border-left: 2px solid var(--ink); background: var(--bg-soft); border-radius: 0 12px 12px 0;
  font-family: var(--font-disp); font-size: 21px; line-height: 1.35; color: var(--ink);
}
.cs-callout--insight { border-left-color: #4a9e6f; }

/* explorations: rejected directions + final pick */
.explore-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; align-items: stretch; }
.explore-opt { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; padding: 20px 18px; background: var(--bg-soft); }
.explore-note { margin-bottom: 10px; }
.explore-critique, .explore-pros { margin-top: auto; }
.explore-opt--rejected { opacity: .72; }
.explore-opt--final { border-color: #4a9e6f; background: rgba(74, 158, 111, .06); opacity: 1; }
.explore-eyebrow { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 8px; }
.explore-opt--final .explore-eyebrow { color: #3f8a60; }
.explore-name { font-family: var(--font-disp); font-weight: 500; font-size: 18px; line-height: 1.2; margin-bottom: 8px; }
.explore-opt--rejected .explore-name { text-decoration: line-through; text-decoration-color: var(--ink-faint); text-decoration-thickness: 1px; }
.explore-note { font-size: 13px; line-height: 1.55; color: var(--ink-mid); margin-bottom: 8px; }
.explore-critique { font-size: 13px; line-height: 1.55; color: var(--ink-dim); }
.explore-critique::before { content: "✕ "; color: #c2603f; }
.explore-pros { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.explore-pros li { font-size: 13px; line-height: 1.5; color: var(--ink); }
.explore-pros li::before { content: "+ "; color: #4a9e6f; font-weight: 600; }
@media (max-width: 720px) { .explore-opts { grid-template-columns: 1fr; } }

/* cascade ladder (cascading models) */
.cs-cascade { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; margin-top: 40px; }
.casc-stage {
  flex: 1 1 0; min-width: 150px; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft); padding: 18px 16px;
}
.casc-stage--accent { border-color: #4a9e6f; background: rgba(74, 158, 111, .06); }
.casc-label { font-family: var(--font-disp); font-weight: 500; font-size: 17px; line-height: 1.2; }
.casc-sub { font-size: 12.5px; line-height: 1.5; color: var(--ink-mid); }
.casc-arrow { align-self: center; color: var(--ink-faint); font-size: 20px; flex: 0 0 auto; }

/* competitor comparison cards */
.cmp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.cmp-card { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft); padding: 22px 20px; }
.cmp-card--us { border-color: var(--ink); background: var(--bg-card); box-shadow: 0 20px 50px -34px rgba(0,0,0,.45); }
.cmp-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.cmp-name { font-family: var(--font-disp); font-weight: 500; font-size: 20px; margin: 6px 0 8px; }
.cmp-card--us .cmp-name { display: flex; align-items: baseline; gap: 8px; }
.cmp-approach { font-size: 13.5px; line-height: 1.6; color: var(--ink-mid); }

/* coded dashboard (KPI tiles + bar charts) */
.dash {
  margin-top: 40px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--bg-soft); padding: 26px 24px;
  box-shadow: 0 24px 60px -36px rgba(0,0,0,.4);
}
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kpi { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-card); padding: 16px 16px; display: flex; flex-direction: column; gap: 4px; }
.kpi-val { font-family: var(--font-disp); font-weight: 500; font-size: 30px; line-height: 1; }
.kpi-label { font-size: 12px; line-height: 1.4; color: var(--ink-mid); }
.dash-bargroup { margin-top: 26px; }
.tc { margin: 30px 0 0; }
.tc-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; }
.tc-svg { width: 100%; height: auto; display: block; overflow: visible; }
.tc-grid { stroke: var(--line); stroke-width: 1; }
.tc-ylab { fill: var(--ink-faint); font-size: 11px; font-family: var(--font-mono); text-anchor: end; }
.tc-xlab { fill: var(--ink-mid); font-size: 12.5px; font-family: var(--font-body); text-anchor: middle; }
.tc-xsub { fill: var(--ink-faint); font-size: 10px; font-family: var(--font-mono); text-anchor: middle; }
.tc-area { fill: rgba(74, 158, 111, .12); stroke: none; }
.tc-line { fill: none; stroke: #4a9e6f; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tc-dot { fill: #4a9e6f; }
.tc-dot--proj { fill: var(--bg-card); stroke: #4a9e6f; stroke-width: 2; }
.tc-val { fill: var(--ink); font-size: 13px; font-family: var(--font-disp); font-weight: 500; text-anchor: middle; }
.dash-bartitle { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; }
.dash-bars { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 14px; }
.bar-label { font-size: 13px; color: var(--ink-mid); }
.bar-track { height: 10px; border-radius: 6px; background: var(--bg-card); border: 1px solid var(--line); overflow: hidden; }
.bar-fill { display: block; height: 100%; width: var(--w); background: var(--ink); border-radius: 6px; }
.bar-fill--accent { background: #4a9e6f; }
.bar-val { font-size: 12.5px; color: var(--ink); min-width: 56px; text-align: right; }
@media (max-width: 720px) {
  .cmp-grid, .dash-kpis { grid-template-columns: 1fr; }
  .cs-cascade { flex-direction: column; }
  .casc-arrow { transform: rotate(90deg); }
  .bar-row { grid-template-columns: 96px 1fr auto; gap: 8px; }
}

/* segment cards (processes behind a campaign) */
.seg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 40px; }
.seg-card { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-soft); padding: 24px 22px; }
.seg-name { font-family: var(--font-disp); font-weight: 500; font-size: 21px; margin-bottom: 8px; }
.seg-body { font-size: 14px; line-height: 1.7; color: var(--ink-mid); }
@media (max-width: 720px) { .seg-grid { grid-template-columns: 1fr; } }

/* sticky-note quotes (anonymised conversations) */
.sticky-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 26px; margin-top: 48px; }
.sticky {
  position: relative;
  padding: 30px 24px 22px;
  border-radius: 2px;
  transform: rotate(var(--rot, 0deg));
  box-shadow: 0 10px 24px rgba(31, 27, 22, .10), 0 2px 6px rgba(31, 27, 22, .06);
  transition: transform .35s var(--ease-soft), box-shadow .35s var(--ease-soft);
}
.sticky:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 18px 36px rgba(31, 27, 22, .14), 0 3px 8px rgba(31, 27, 22, .07); }
.sticky--t1 { background: #fbf2c0; }
.sticky--t2 { background: #e3eedf; }
.sticky--t3 { background: #fbe6d2; }
.sticky--t4 { background: #e0e9f3; }
.sticky-tape {
  position: absolute; top: -11px; left: 50%;
  width: 86px; height: 24px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(31, 27, 22, .08);
  box-shadow: 0 2px 5px rgba(31, 27, 22, .06);
}
.sticky-quote { font-size: 14.5px; line-height: 1.75; color: var(--ink); }
.sticky-quote::before { content: "\201C"; }
.sticky-quote::after { content: "\201D"; }
.sticky-author {
  margin-top: 14px;
  font-size: 12.5px; letter-spacing: .02em;
  color: #000000;
}
.sticky-author::before { content: "\2014  "; }
@media (max-width: 720px) { .sticky-grid { grid-template-columns: 1fr; gap: 26px; } }

/* tier KPI cards (research → decision) */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.tier-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-top: 3px solid var(--line);
  border-radius: 14px; background: var(--bg-soft); padding: 22px 20px;
}
.tier-card--1 { border-top-color: #4a9e6f; }
.tier-card--2 { border-top-color: #c79a3c; }
.tier-card--3 { border-top-color: #c2603f; }
.tier-badge {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-dim);
}
.tier-kpi {
  font-family: var(--font-disp); font-weight: 500; font-size: 40px; line-height: 1;
  margin: 10px 0 0; display: flex; flex-direction: column; gap: 5px;
}
.tier-kpi span { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--ink-mid); }
.tier-name { font-family: var(--font-disp); font-weight: 500; font-size: 20px; margin: 14px 0 6px; }
.tier-def { font-size: 13.5px; line-height: 1.6; color: var(--ink-mid); margin-bottom: 16px; }
.tier-stats {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.tier-stats > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.tier-stats dt { color: var(--ink-faint); }
.tier-stats dd { color: var(--ink); text-align: right; }
.tier-uses { font-size: 12.5px; line-height: 1.55; color: var(--ink-mid); margin-top: auto; }
.tier-uses span { display: block; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; margin-bottom: 4px; }
@media (max-width: 720px) { .tier-grid { grid-template-columns: 1fr; } }

/* feature grid (3-up) */
.cs-featgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cs-feat-media {
  border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  background: var(--bg-soft); margin-bottom: 14px;
}
.cs-feat-media img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease-soft); }
.cs-feat:hover .cs-feat-media img { transform: scale(1.04); }
.cs-feat-title { font-family: var(--font-disp); font-weight: 500; font-size: 21px; line-height: 1.15; margin-bottom: 6px; }
.cs-feat-body { font-size: 13.5px; line-height: 1.6; color: var(--ink-mid); }

/* feature rows (text, then a full-width UI screenshot) */
.cs-featrows { display: flex; flex-direction: column; gap: 72px; }
.cs-featrow { display: block; }
.cs-featrow-text { max-width: 640px; margin-bottom: 22px; }
.cs-featrow-text .cs-feat-title { font-size: 24px; margin-bottom: 8px; }
.cs-featrow-text .cs-feat-body { font-size: 15px; }
.cs-featrow-media {
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-soft);
  box-shadow: 0 24px 60px -32px rgba(0,0,0,.4);
}
.cs-featrow-media img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease-soft); }
.cs-featrow-media:hover img { transform: scale(1.02); }
.cs-featrow-media video { display: block; width: 100%; height: auto; }

/* interaction flow */
.cs-flow {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 28px;
}
.cs-flow-frame {
  flex: 1 1 0; min-width: 160px;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-soft);
}
.cs-flow-frame img { display: block; width: 100%; height: auto; }
.cs-flow-arrow { color: var(--ink-faint); font-size: 20px; flex: 0 0 auto; }

/* onboarding gallery */
.cs-gallery {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 28px;
}
.cs-phone {
  border-radius: 16px; overflow: hidden;
  background: var(--bg-soft);
  transition: transform .35s var(--ease-soft);
}
.cs-phone img { display: block; width: 100%; height: auto; }
.cs-phone:hover { transform: translateY(-6px); }

/* dashboard screens (used everywhere except cipla) */
.cs-dash {
  display: grid; grid-template-columns: 1fr; gap: 20px;
  margin-top: 28px;
}
.cs-dash-frame {
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-soft);
  box-shadow: 0 16px 44px -30px rgba(0,0,0,.3);
  transition: transform .4s var(--ease-soft);
}
.cs-dash-frame img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease-soft); }
.cs-dash-frame:hover { transform: translateY(-4px); }
.cs-dash-frame:hover img { transform: scale(1.02); }

/* reflection */
.cs-reflection { padding: 72px 0; text-align: center; border-bottom: 1px solid var(--line); }
.cs-reflection .cs-sechead { justify-content: center; }
.cs-reflection-body { max-width: 56ch; margin: 0 auto; color: var(--ink); font-size: 18px; line-height: 1.7; font-family: var(--font-disp); }

/* prev / next */
.cs-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 32px; }
.cs-nav-link {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-radius: 12px; padding: 22px;
  background: var(--bg-card);
  transition: transform .35s var(--ease-soft), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.cs-nav-next { text-align: right; align-items: flex-end; }
.cs-nav-link:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 20px 44px -28px rgba(0,0,0,.28); }
.cs-nav-dir { font-size: 12px; color: var(--ink-faint); letter-spacing: .04em; }
.cs-nav-name { font-family: var(--font-disp); font-size: 24px; font-weight: 500; color: var(--ink); }

/* ===================== COLLECTION PAGE ===================== */
.coll {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px clamp(22px, 5vw, 48px) 80px;
}
.coll-banner {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  margin: 8px 0 8px;
  max-height: 360px;
}
.coll-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.coll-head { padding: 28px 0 44px; }
.coll-title {
  font-family: var(--font-disp); font-weight: 500;
  font-size: clamp(36px, 6vw, 60px); line-height: 1.05; letter-spacing: -.01em;
  display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px;
}
.coll-sub { max-width: 56ch; font-size: 15px; line-height: 1.7; color: var(--ink-mid); }

/* ===================== ABOUT PAGE ===================== */
.about-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 24px clamp(22px, 5vw, 48px) 80px;
}

/* intro + portrait cluster */
.about-intro {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 44px;
  align-items: center;
  padding: 28px 0 56px;
  border-bottom: 1px solid var(--line);
}
.about-hi {
  font-family: var(--font-disp); font-weight: 500;
  font-size: clamp(36px, 6vw, 56px); line-height: 1.02; letter-spacing: -.01em;
  margin-bottom: 20px;
}
.about-intro-text p { color: var(--ink-mid); line-height: 1.8; margin-bottom: 14px; max-width: 44ch; }
.about-intro-text a { border-bottom: 1px solid var(--line-2); }

.about-portraits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.portrait {
  width: 100%; display: block;
  border-radius: 12px; object-fit: cover;
  border: 1px solid var(--line); background: var(--bg-soft);
  transition: transform .4s var(--ease-soft);
}
.portrait:hover { transform: translateY(-4px) rotate(-1deg); }
.portrait--tall { height: 230px; }
.portrait--wide { grid-column: span 2; height: 180px; }

/* section heading */
.about-section { padding: 56px 0; border-bottom: 1px solid var(--line); }
.about-h2 {
  font-family: var(--font-disp); font-weight: 500;
  font-size: clamp(26px, 4vw, 38px); line-height: 1.1; margin-bottom: 28px;
}

/* community cards */
.community-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.community-card {
  border: 1px solid var(--line); border-radius: 14px;
  padding: 18px; background: var(--bg-card);
  display: flex; flex-direction: column;
  transition: transform .35s var(--ease-soft), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.community-card:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 20px 44px -28px rgba(0,0,0,.28); }
.community-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.community-card__icon { width: 30px; height: 30px; border-radius: 7px; object-fit: cover; }
.community-card__name { font-family: var(--font-disp); font-weight: 500; font-size: 20px; }
.community-card__desc { font-size: 13px; line-height: 1.6; color: var(--ink-mid); margin-bottom: 16px; flex: 1; }
.community-card__photo {
  border-radius: 10px; overflow: hidden; border: 1px solid var(--line);
  background: var(--bg-soft); aspect-ratio: 16 / 10;
}
.community-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease-soft); }
.community-card:hover .community-card__photo img { transform: scale(1.05); }

/* favorite things */
.fav-block { margin-bottom: 30px; }
.fav-block:last-child { margin-bottom: 0; }
.fav-label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 14px;
}
.fav-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.fav-cover {
  border-radius: 10px; overflow: hidden; border: 1px solid var(--line);
  background: var(--bg-soft); aspect-ratio: 2 / 3;
  transition: transform .35s var(--ease-soft);
}
.fav-row--square .fav-cover { aspect-ratio: 1 / 1; }
.fav-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fav-cover:hover { transform: translateY(-5px) scale(1.02); }

.about-hint { margin-top: 26px; font-size: 12.5px; }

@media (max-width: 760px) {
  .about-intro { grid-template-columns: 1fr; gap: 28px; }
  .community-grid { grid-template-columns: 1fr; }
  .fav-row { grid-template-columns: repeat(2, 1fr); }
}

/* lightbox overlay (click an image to view larger) */
#csHero, #csBlocks img { cursor: zoom-in; }
.cs-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: 40px; cursor: zoom-out;
  background: rgba(20, 18, 16, .88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cs-lightbox.is-open { display: flex; animation: cs-lb-fade .2s var(--ease-soft); }
@keyframes cs-lb-fade { from { opacity: 0; } to { opacity: 1; } }
.cs-lightbox-img {
  max-width: 94vw; max-height: 92vh; width: auto; height: auto;
  border-radius: 12px; cursor: default;
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .6);
}
.cs-lightbox-close {
  position: absolute; top: 18px; right: 22px;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; color: #fff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25);
  cursor: pointer; transition: background .2s var(--ease-soft);
}
.cs-lightbox-close:hover { background: rgba(255, 255, 255, .24); }

/* responsive */
@media (max-width: 980px) {
  .cs-shell { grid-template-columns: 1fr; gap: 8px; }
  .cs-toc { display: none; }
}
/* On the case-study layout, the sticky "Back" lives in the left TOC panel
   (visible ≥981px), so hide the duplicate top-bar back there. Below 981px the
   TOC is hidden, so the top-bar back returns as the fallback. */
@media (min-width: 981px) {
  .cs-study .cs-back { display: none; }
}
@media (max-width: 720px) {
  .cs-metagrid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .cs-featgrid { grid-template-columns: 1fr; }
  .cs-bento { grid-template-columns: 1fr; }
  .cs-gallery { grid-template-columns: repeat(2, 1fr); }
  .cs-flow { flex-direction: column; }
  .cs-flow-arrow { transform: rotate(90deg); }
  .cs-nav { grid-template-columns: 1fr; }
  .cs-nav-next { text-align: left; align-items: flex-start; }
}

/* ===== Uxie prototype — DESIGN.md exact + interactive ===== */
@keyframes aw-pulse { 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.45; transform:scale(.78);} }
@keyframes aw-wave { 0%,100%{ transform:scaleY(.3);} 50%{ transform:scaleY(1);} }

/* sidebar: traffic lights live inside it (DESIGN.md §3.4) */
.appwin .aw-side { padding: 14px 10px; }
.aw-side .aw-traffic { display:flex; gap:8px; padding:2px 8px 16px; }
.aw-side .aw-traffic i { width:12px; height:12px; border-radius:50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
.aw-brand { display:flex; align-items:center; gap:9px; padding:0 8px 14px; }
.aw-brandname { font-size:15px; font-weight:700; color:var(--ink); }
.aw-chip { margin-left:auto; font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.06em; color:var(--ink-mid); background:rgba(0,0,0,.05); padding:2px 6px; border-radius:999px; }
.aw-listening { display:flex; align-items:center; gap:7px; margin:0 6px 10px; padding:5px 11px; border-radius:999px; background:rgba(225,75,58,.1); color:#b04a3a; font-size:11px; font-weight:600; }
.aw-listdot { width:7px; height:7px; border-radius:50%; background:#e14b3a; box-shadow:0 0 0 3px rgba(225,75,58,.2); animation:aw-pulse 1.2s ease-in-out infinite; }
.aw-nav { display:flex; flex-direction:column; gap:2px; }
.aw-tab { width:100%; border:none; background:transparent; font:inherit; text-align:left; display:flex; align-items:center; gap:10px; padding:8px 10px; margin:1px 0; border-radius:9px; font-size:13.5px; color:var(--ink-mid); cursor:pointer; transition:background .12s ease, color .12s ease; }
.aw-tab:hover { background:rgba(0,0,0,.04); color:var(--ink); }
.aw-tab.is-active { background:#fff; color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.04); }
.aw-foot { display:flex; flex-direction:column; gap:2px; padding-top:10px; border-top:1px solid #ece7db; }

/* kbd chip */
.appwin .kbd, .aw-modal .kbd { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:6px; background:#f0e3b8; color:#1a1a1a; font-family:var(--font-mono); font-size:11px; font-weight:600; border:1px solid rgba(0,0,0,.08); box-shadow:0 1px 0 rgba(0,0,0,.1); }
.appwin .kbd--dark { background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.25); box-shadow:none; }

/* home: dictate banner + history */
.aw-dictate { width:100%; display:flex; align-items:center; gap:16px; padding:16px 18px; margin:16px 0 6px; border-radius:14px; background:#f3efe5; border:1px solid #ece7db; cursor:pointer; text-align:left; transition:background .2s ease, border-color .2s ease; }
.aw-dictate:hover { background:#efe9dc; }
.aw-dictate.is-live { background:linear-gradient(135deg,#fce8d4,#f7d4b6); border-color:#d8a07a; }
.aw-dictate-ic { width:46px; height:46px; border-radius:12px; background:#eae3d1; color:var(--ink-mid); display:flex; align-items:center; justify-content:center; flex:0 0 auto; transition:all .2s ease; }
.aw-dictate.is-live .aw-dictate-ic { background:#b04a3a; color:#fff; box-shadow:0 0 0 6px rgba(176,74,58,.16); }
.aw-dictate-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.aw-dictate-title { font-size:14.5px; font-weight:600; color:var(--ink); }
.aw-dictate-sub { font-size:12.5px; color:#76716a; }
.aw-bars { display:flex; align-items:center; gap:2px; height:26px; flex:0 0 auto; }
.aw-bars i { width:3px; height:var(--h); min-height:3px; background:#a5a09a; border-radius:2px; transform-origin:center; }
.aw-dictate.is-live .aw-bars i { background:#b04a3a; animation:aw-wave .7s ease-in-out infinite; animation-delay:var(--d); }
.aw-histlist { display:flex; flex-direction:column; }
.aw-histrow { display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid #f0ebdf; }
.aw-histtext { flex:1; min-width:0; }
.aw-histsaid { font-size:13px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aw-histclean { font-size:11.5px; color:#888; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aw-histtime { font-family:var(--font-mono); font-size:11px; color:#a5a09a; flex:0 0 auto; }

/* tasks: prompt input + detail head */
.aw-taskinput { padding:12px; border-bottom:1px solid #f0ebdf; }
.aw-ta { width:100%; resize:none; border:1px solid #e5e3df; border-radius:8px; padding:8px 10px; font:inherit; font-size:12.5px; line-height:1.5; color:var(--ink); background:#fff; margin-bottom:8px; }
.aw-btn { font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:8px; border:1px solid #d6d0c0; background:#fff; color:var(--ink); cursor:pointer; }
.aw-btn--primary { background:#1a1a1a; color:#fff; border-color:#1a1a1a; }
.aw-btn--full { width:100%; }
.aw-detailhead { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ds-approval.is-resolved { background:rgba(0,0,0,.02); border-color:#e5e3df; }

/* briefings: collapsible template cards */
.aw-tmpl { border:1px solid #ece7db; border-radius:12px; background:#fff; overflow:hidden; box-shadow:0 1px 2px rgba(40,30,15,.03); }
.aw-tmpl-head { width:100%; display:flex; align-items:center; gap:10px; padding:14px 16px; border:none; background:transparent; cursor:pointer; font:inherit; text-align:left; }
.aw-tmpl-title { font-size:14px; font-weight:600; color:var(--ink); }
.aw-tmpl-head .aw-pill { margin-left:auto; }
.aw-chev { color:var(--ink-faint); transition:transform .2s ease; font-size:16px; }
.aw-tmpl.is-open .aw-chev { transform:rotate(90deg); }
.aw-tmpl-body { display:none; padding:0 16px 16px; }
.aw-tmpl.is-open .aw-tmpl-body { display:block; }
.aw-tmpl-desc { font-size:12px; color:#666; margin:0 0 12px; }
.aw-cfg-grid { display:grid; grid-template-columns:auto 1fr; gap:10px 16px; align-items:center; }
.aw-flabel { font-size:12px; color:#666; }
.aw-fval { font-size:13px; color:var(--ink); }
.aw-cfg-actions { display:flex; gap:8px; margin-top:14px; }

/* meetings banner + toggle */
.aw-banner { display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid #ece7db; border-radius:10px; background:#fcfaf4; font-size:12.5px; color:var(--ink-mid); margin-bottom:16px; }
.aw-banner b { color:var(--ink); }
.aw-toggle { flex:0 0 auto; width:38px; height:22px; border-radius:999px; border:none; background:#d6d0c0; position:relative; cursor:pointer; transition:background .2s ease; padding:0; margin-left:auto; }
.aw-toggle span { position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:left .2s ease; }
.aw-toggle.is-on { background:#3a8c6a; }
.aw-toggle.is-on span { left:18px; }

/* settings modal */
.aw-modal { position:absolute; inset:0; z-index:10; display:flex; align-items:center; justify-content:center; background:rgba(20,15,10,.35); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.aw-modal[hidden] { display:none; }
.aw-modal-box { width:min(560px,86%); max-height:84%; overflow:auto; background:#faf8f2; border-radius:14px; box-shadow:0 30px 70px -30px rgba(0,0,0,.5); }
.aw-modal-head { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid #ece7db; flex-wrap:wrap; }
.aw-modal-title { font-weight:600; font-size:14px; color:var(--ink); }
.aw-modal-tabs { display:flex; gap:6px; }
.aw-mtab { border:none; background:transparent; font:inherit; font-size:13px; color:var(--ink-mid); padding:4px 8px; border-radius:7px; cursor:pointer; }
.aw-mtab.is-active { color:var(--ink); font-weight:600; background:rgba(0,0,0,.05); }
.aw-modal-close { margin-left:auto; border:none; background:transparent; font-size:20px; line-height:1; color:var(--ink-mid); cursor:pointer; }
.aw-modal-body { padding:8px 18px 18px; }
.aw-mpanel { display:none; }
.aw-mpanel.is-shown { display:block; }
.aw-mono { font-family:var(--font-mono); font-size:12px; color:var(--ink); }
.aw-link { font-size:13px; color:#3367d6; cursor:pointer; }

/* capsule states */
.aw-cap-ic { display:flex; align-items:center; color:#fff; }
.ds-capsule.aw-capsule { gap:10px; }
.ds-capsule.aw-capsule.is-live { border:1px solid rgba(225,75,58,.4); box-shadow:0 10px 40px rgba(0,0,0,.35), 0 0 0 4px rgba(225,75,58,.12); }

.appwin [hidden] { display: none !important; }

/* about — "Things I've done" auto-scrolling marquee (left → right) */
.about-marquee-sub { font-size: 14px; margin: -6px 0 18px; }
.marquee {
  position: relative; overflow: hidden; width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track {
  display: flex; gap: 18px; width: max-content;
  animation: marquee-scroll 48s linear infinite;
  animation-direction: reverse; /* travel left → right */
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee-scroll { to { transform: translateX(-50%); } }
.marq-item {
  flex: 0 0 auto; width: 300px; height: 190px; margin: 0;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-soft);
}
.marq-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marq-item--empty {
  display: flex; align-items: center; justify-content: center;
  border-style: dashed; border-color: var(--line-2); background: var(--bg-soft);
}
.marq-ph { font-family: var(--font-mono); font-size: 30px; line-height: 1; color: var(--ink-faint); }
@media (max-width: 720px) { .marq-item { width: 220px; height: 145px; } }