/* ═══════════════════════════════════════════════════════════════
   VibeLab v3 — "paper register"
   100xworker's paper discipline + SocialScout's mono metadata,
   colour system and short-throw motion vocabulary.
   No animation library. Everything below is CSS.
   Scoped under .v3 so it cannot leak into the old routes.
   ═══════════════════════════════════════════════════════════════ */

.v3 {
  /* ground */
  --paper:        #FBFAF7;
  --paper-2:      #F3F1EB;
  --paper-3:      #EDEAE0;
  --surface:      #FFFEFB;
  --inset:        #F7F5F0;
  --ink:          #1C1A17;
  --ink-2:        #63605A;
  --ink-3:        #9B978E;
  --line:         #EAE6DD;
  --line-strong:  #DDD8CC;

  /* house accent */
  --ember:        #D97757;
  --ember-ink:    #A8481F;
  --ember-tint:   #FBEFE9;

  /* the wider palette: one hue per pillar */
  --violet:       #6D5CF5;  --violet-ink: #5A49DD;  --violet-tint: #EEEBFE;
  --cyan:         #2BB3C8;  --cyan-ink:   #187C8C;  --cyan-tint:   #E4F6F9;
  --pink:         #E8579D;  --pink-ink:   #BF2F76;  --pink-tint:   #FDEAF3;
  --amber:        #D9730D;  --amber-ink:  #A4560A;  --amber-tint:  #FBEEDA;

  /* the four pillar hues, run left to right. Used by the hero word, the
     wordmark and the buttons, so the identity is one idea stated three ways. */
  --grad: linear-gradient(96deg, var(--violet) 0%, var(--cyan) 34%, var(--ember) 66%, var(--pink) 100%);

  /* the four buckets, shared with 100xworker.com */
  --eliminate:    #E5484D;
  --automate:     #2F9E63;
  --delegate:     #D9730D;
  --keep:         #3E63DD;

  --r-chip:    6px;
  --r-control: 8px;
  --r-card:    10px;

  --shadow-hairline: 0 0 0 1px var(--line);
  --shadow-card:     0 0 0 1px var(--line), 0 1px 2px #2b210a0a, 0 2px 6px #2b210a08;
  --shadow-raised:   0 0 0 1px var(--line-strong), 0 2px 12px #2b210a12;

  --gut:  clamp(1.15rem, 4.5vw, 4.5rem);
  --max:  1360px;
  --ease:      cubic-bezier(.23, 1, .32, 1);
  --ease-link: cubic-bezier(.16, 1, .3, 1);

  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.v3 *, .v3 *::before, .v3 *::after { box-sizing: border-box; }
.v3 a { color: inherit; text-decoration: none; }
.v3 ::selection { background: var(--ember); color: #fff; }
.v3 img { max-width: 100%; }

/* ── primitives ────────────────────────────────────────────── */

.v3 .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
.v3 .narrow { max-width: 58rem; }

.v3 .mono {
  font-family: var(--font-jetbrains-mono), ui-monospace, monospace;
  font-size: 0.688rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}
.v3 .mono-sm { font-size: 0.625rem; letter-spacing: 0.2em; }

.v3 .display {
  font-family: var(--font-bricolage), ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 0.98;
}

.v3 .sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line-strong);
  color: var(--ink-3);
}

.v3 section { padding-block: clamp(4rem, 10vh, 7.5rem); }
.v3 .sec-head { display: none; }
.v3 .band-2 { background: var(--paper-2); }
.v3 .band-3 { background: var(--paper-3); }
.v3 .band-ink { background: var(--ink); color: var(--paper); }
.v3 .band-ink .sec-head { border-color: rgba(251,250,247,0.18); color: rgba(251,250,247,0.45); }

.v3 h2.big { font-size: clamp(2rem, 4.8vw, 3.7rem); margin: 0; max-width: 17ch; }
.v3 h2.mid { font-size: clamp(1.7rem, 3.8vw, 2.9rem); margin: 0; max-width: 19ch; }
.v3 .lead {
  margin: 1.2rem 0 0;
  max-width: 42rem;
  color: var(--ink-2);
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.62;
}
.v3 .band-ink .lead { color: rgba(251,250,247,0.66); }

/* chips + buttons */
.v3 .btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.68rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--r-control);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
/* The gradient sits above the solid fill and below the label, so the primary
   button rests as a calm anchor and reveals the house colours on hover
   without competing with the headline. */
.v3 .btn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--grad);
  opacity: 0;
  transition: opacity 340ms var(--ease);
}
.v3 .btn:hover { transform: translateY(-1px); }
.v3 .btn:hover::after { opacity: 1; }

/* The ghost carries the gradient at rest, as a 1px border: paint the fill on
   padding-box and the gradient on border-box so only the edge shows. */
.v3 .btn-ghost {
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    var(--grad) border-box;
  color: var(--ink);
  border: 1px solid transparent;
  box-shadow: none;
}
.v3 .btn-ghost::after { background: var(--grad); }
.v3 .btn-ghost:hover { color: var(--paper); }
.v3 .band-2 .btn-ghost, .v3 .band-3 .btn-ghost {
  background: linear-gradient(var(--paper-2), var(--paper-2)) padding-box, var(--grad) border-box;
}
.v3 .partner .btn-ghost {
  background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box;
}

.v3 .band-ink .btn { background: var(--paper); color: var(--ink); }
.v3 .band-ink .btn:hover { color: var(--paper); }

.v3 .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--r-chip);
  background: var(--inset);
  box-shadow: var(--shadow-hairline);
  color: var(--ink-2);
}

/* live dot, straight out of socialscout */
.v3 .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  flex: none;
  animation: v3-pulse 2.4s var(--ease) infinite;
}

/* ── masthead ──────────────────────────────────────────────── */

.v3 .mast {
  position: sticky; top: 0; z-index: 40;
  background: rgba(251,250,247,0.86);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.v3 .mast .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 3.4rem; }
.v3 .mast nav { display: flex; gap: clamp(0.75rem, 1.8vw, 1.7rem); align-items: center; }
.v3 .mast nav a { color: var(--ink-2); transition: color 220ms var(--ease); position: relative; }
.v3 .mast nav a:hover { color: var(--ink); }
/* .mast nav a is more specific than .btn, so a button in the nav was
   inheriting the nav link's grey instead of the button's paper. */
.v3 .mast nav a.btn, .v3 .mast nav a.btn:hover { color: var(--paper); }
.v3 .mast nav a.lnk::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--ember); transform: scaleX(0); transform-origin: left;
  transition: transform 340ms var(--ease-link);
}
.v3 .mast nav a.lnk:hover::after { transform: scaleX(1); }
/* The old mark was letterspaced uppercase mono, which is what every dev tool
   looks like. This is a drawn mark plus a tight lowercase wordmark: the four
   bars are the four pillars, ascending, in their own hues. */
.v3 .wordmark {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-bricolage), ui-sans-serif, sans-serif;
  font-size: 1.12rem; font-weight: 600; letter-spacing: -0.035em;
  text-transform: none; color: var(--ink);
}
.v3 .wordmark .mark { display: block; width: 20px; height: 18px; flex: none; }
.v3 .wordmark .mark rect { transition: y 420ms var(--ease-link), height 420ms var(--ease-link); }
.v3 .mast:hover .wordmark .mark rect:nth-child(1) { y: 2px;  height: 16px; }
.v3 .mast:hover .wordmark .mark rect:nth-child(2) { y: 5px;  height: 13px; }
.v3 .mast:hover .wordmark .mark rect:nth-child(3) { y: 8px;  height: 10px; }
.v3 .mast:hover .wordmark .mark rect:nth-child(4) { y: 11px; height: 7px; }
.v3 .wordmark b { font-weight: 600; color: var(--ember-ink); }
@media (max-width: 860px) { .v3 .mast nav a.hide-sm { display: none; } }

/* ── hero ──────────────────────────────────────────────────── */

.v3 .hero { padding-block: clamp(3rem, 8vh, 6rem) clamp(2rem, 5vh, 3.5rem); }
.v3 .hero h1 { margin: clamp(1.3rem, 3vh, 2.2rem) 0 0; font-size: clamp(2.8rem, 9vw, 7.6rem); }
.v3 .hero h1 .l { display: block; }
.v3 .hero h1 .l > span { display: block; }
/* "transformation" runs through the four pillar hues, so the word carries the
   four disciplines rather than sitting there greyed out. Solid colour first as
   the fallback, then the gradient for browsers that can clip to text. */
.v3 .hero h1 .fade { color: var(--violet); }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .v3 .hero h1 .fade {
    background: linear-gradient(96deg,
      var(--violet) 0%, var(--cyan) 34%, var(--ember) 66%, var(--pink) 100%);
    background-size: 190% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: v3-flood 1.5s var(--ease-link) both 0.2s;
  }
}
.v3 .caret {
  display: inline-block; width: 0.5ch; height: 0.78em;
  background: var(--ember); margin-left: 0.12em;
  transform: translateY(0.04em);
  animation: v3-blink 1.15s steps(1) infinite;
}
.v3 .hero-cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; }

.v3 .index-strip {
  margin-top: clamp(2.6rem, 6vh, 4.2rem);
  border-top: 1px solid var(--line-strong);
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 780px) { .v3 .index-strip { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.v3 .index-strip a {
  padding: 1.1rem 1rem 1.1rem 0;
  border-bottom: 1px solid var(--line);
  display: block; position: relative;
  transition: background 240ms var(--ease);
}
@media (min-width: 780px) {
  .v3 .index-strip a { border-right: 1px solid var(--line); padding-left: 1rem; }
  .v3 .index-strip a:first-child { padding-left: 0; }
  .v3 .index-strip a:last-child { border-right: none; }
}
.v3 .index-strip a::before {
  content: ''; position: absolute; left: 0; right: 1px; top: -1px; height: 2px;
  background: var(--c); transform: scaleX(0); transform-origin: left;
  transition: transform 420ms var(--ease-link);
}
.v3 .index-strip a:hover::before { transform: scaleX(1); }
.v3 .index-strip a:hover { background: var(--surface); }
.v3 .index-strip .n { color: var(--c); display: block; }
.v3 .index-strip .t { margin-top: 0.35rem; font-size: 1.02rem; font-weight: 500; display: block; }

/* ── logo marquee ──────────────────────────────────────────── */

.v3 .marq-wrap {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 1.1rem;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.v3 .marq { display: flex; width: max-content; animation: v3-marq 38s linear infinite; }
.v3 .marq-wrap:hover .marq { animation-play-state: paused; }
.v3 .marq .set { display: flex; align-items: center; gap: clamp(2rem, 5vw, 4rem); padding-right: clamp(2rem, 5vw, 4rem); }
.v3 .marq .item { display: inline-flex; align-items: center; gap: 0.6rem; flex: none; }
.v3 .marq img { width: 22px; height: 22px; object-fit: contain; opacity: 0.9; transition: opacity 320ms var(--ease), transform 320ms var(--ease); }
.v3 .marq .item:hover img { opacity: 1; transform: scale(1.12); }
.v3 .marq .item span { color: var(--ink-2); transition: color 320ms var(--ease); }
.v3 .marq .item:hover span { color: var(--ink); }

/* ── register rows ─────────────────────────────────────────── */

/* No decorative section labels. A hairline opens a register and the content
   speaks; where a section has a real headline, that headline is the opening.
   A label that restates what the rows already say is noise. */
.v3 .rows { border-top: 1px solid var(--line-strong); }
.v3 .stats.rows, .v3 .steps { border-top: 1px solid var(--line-strong); }
.v3 .cards { margin-top: 0; }

.v3 .row {
  display: grid;
  grid-template-columns: 3rem minmax(0,1fr);
  gap: 0 1.1rem;
  padding: clamp(1.4rem, 2.8vw, 2.2rem) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
  position: relative;
  transition: background 300ms var(--ease);
}
@media (min-width: 900px) {
  .v3 .row { grid-template-columns: 4.2rem minmax(0, 16rem) minmax(0,1fr) 2rem; gap: 0 clamp(1.2rem, 3vw, 3rem); align-items: baseline; }
}
.v3 .row::before {
  content: ''; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0;
  background: var(--c, var(--ember));
  transition: width 560ms var(--ease-link);
}
.v3 a.row:hover::before { width: 100%; }
.v3 a.row:hover { background: var(--surface); }
.v3 .row .n { color: var(--c, var(--ink-3)); padding-top: 0.3rem; }
.v3 .row h3 { margin: 0; font-size: clamp(1.4rem, 2.7vw, 2.15rem); }
.v3 .row p { margin: 0.5rem 0 0; max-width: 40rem; color: var(--ink-2); font-size: 0.963rem; line-height: 1.62; }
@media (min-width: 900px) { .v3 .row p { margin-top: 0; } }
/* A drawn arrow, not a text glyph: a glyph inherits font metrics and never
   sits where you want it. The shaft grows into the head on hover, so the
   motion reads as the row opening rather than the arrow sliding. */
.v3 .go { display: none; color: var(--ink-3); transition: color 260ms var(--ease); }
@media (min-width: 900px) { .v3 .row .go { display: flex; justify-content: flex-end; align-items: center; height: 1.5em; } }
.v3 .go svg { width: 24px; height: 10px; overflow: visible; }
.v3 .go path {
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.v3 .go .shaft {
  transform: scaleX(0.34);
  transform-origin: right center;
  transition: transform 460ms var(--ease-link), opacity 300ms var(--ease);
  opacity: 0.75;
}
.v3 .go .head { transition: transform 460ms var(--ease-link); }
.v3 a.row:hover .go, .v3 a.card:hover .go { color: var(--c, var(--ember-ink)); }
.v3 a.row:hover .go .shaft, .v3 a.card:hover .go .shaft { transform: scaleX(1); opacity: 1; }
.v3 a.row:hover .go .head, .v3 a.card:hover .go .head { transform: translateX(2px); }
.v3 .row .n { transition: color 500ms var(--ease), transform 500ms var(--ease-link); }
.v3 a.row:hover .n { transform: translateX(2px); }

/* ── stat strip ────────────────────────────────────────────── */

.v3 .stats { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
@media (min-width: 760px) { .v3 .stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.v3 .stats > div { padding: clamp(1.3rem,2.6vw,1.9rem) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) {
  .v3 .stats > div { padding-inline: clamp(1rem,2vw,1.6rem); border-right: 1px solid var(--line); }
  .v3 .stats > div:first-child { padding-left: 0; }
  .v3 .stats > div:last-child { border-right: none; }
}
.v3 .stats .fig {
  font-family: var(--font-bricolage), sans-serif;
  font-weight: 500; letter-spacing: -0.03em;
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  line-height: 1; color: var(--c, var(--ink));
}
.v3 .stats .cap { margin: 0.6rem 0 0; color: var(--ink-2); font-size: 0.9rem; line-height: 1.5; }

/* ── card grid (products / proof) ──────────────────────────── */

.v3 .cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
@media (min-width: 820px) { .v3 .cards { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 620px) { .v3 .cards-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 980px) { .v3 .cards-4 { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.v3 .card {
  background: var(--surface);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  display: flex; flex-direction: column; gap: 0.7rem;
  transition: background 300ms var(--ease);
  position: relative;
}
.v3 a.card:hover { background: var(--inset); }
.v3 .card .k { color: var(--c, var(--ink-3)); }
.v3 .card h3 { margin: 0.3rem 0 0; font-size: 1.35rem; font-weight: 500; letter-spacing: -0.015em; }
.v3 .card p { margin: 0; color: var(--ink-2); font-size: 0.938rem; line-height: 1.6; }
.v3 .card .go { display: flex; margin-top: auto; padding-top: 0.6rem; color: var(--c, var(--ember-ink)); }

/* ── steps ─────────────────────────────────────────────────── */

.v3 .steps { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
@media (min-width: 860px) { .v3 .steps { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.v3 .steps > div { padding: clamp(1.4rem,3vw,2.1rem) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 860px) {
  .v3 .steps > div { padding: 1.9rem clamp(1.1rem,2.4vw,2.1rem); border-right: 1px solid var(--line); }
  .v3 .steps > div:first-child { padding-left: 0; }
  .v3 .steps > div:last-child { border-right: none; }
}
.v3 .steps .lab { color: var(--c, var(--ink-3)); }
.v3 .steps p { margin: 0.7rem 0 0; color: var(--ink-2); font-size: 0.938rem; line-height: 1.62; }

/* ── partner strip ─────────────────────────────────────────── */

.v3 .partner {
  display: grid; gap: 1.3rem; align-items: center;
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
@media (min-width: 880px) { .v3 .partner { grid-template-columns: auto minmax(0,1fr) auto; gap: clamp(1.6rem,4vw,3rem); } }
.v3 .partner .badge-wrap { display: flex; align-items: center; gap: 0.7rem; }
.v3 .partner img { width: 34px; height: 34px; object-fit: contain; }
.v3 .partner .badge { color: var(--ember-ink); }
.v3 .partner .st { font-family: var(--font-bricolage), sans-serif; font-weight: 500; letter-spacing: -0.02em; font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.18; margin: 0; }
.v3 .partner .sub { margin: 0.45rem 0 0; color: var(--ink-2); font-size: 0.925rem; max-width: 40rem; }

/* ── buckets ───────────────────────────────────────────────── */

.v3 .buckets { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
@media (min-width: 900px) { .v3 .buckets { grid-template-columns: repeat(4, minmax(0,1fr)); } }
/* Each card's text runs to a different length, so the bar has to be pushed to
   the bottom rather than following the copy. The grid already stretches the
   cards to equal height, so auto margin lands all four bars on one line. */
.v3 .bucket { background: var(--surface); padding: clamp(1.2rem,2.4vw,1.7rem); display: flex; flex-direction: column; }
.v3 .bucket .cap { display: flex; align-items: center; gap: 0.5rem; color: var(--c); }
.v3 .bucket .sq { width: 7px; height: 7px; border-radius: 2px; background: var(--c); flex: none; }
.v3 .bucket .task { margin: 0.8rem 0 0; font-size: 1rem; font-weight: 500; line-height: 1.32; }
.v3 .bucket .note { margin: 0.45rem 0 0; color: var(--ink-3); font-size: 0.863rem; line-height: 1.55; }
.v3 .bucket .bar { margin-top: auto; padding-top: 0; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; flex: none; }
.v3 .bucket .note { margin-bottom: 1.1rem; }
.v3 .bucket .bar i { display: block; height: 100%; width: 0; background: var(--c); border-radius: 2px; transition: width 1.1s var(--ease); }
.v3 [data-reveal].seen .bar i { width: var(--w); }

/* ── event ─────────────────────────────────────────────────── */

.v3 .event {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem;
  padding: 1.2rem 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line);
}
.v3 .event .when { color: var(--ember-ink); }
.v3 .event .what { font-size: 1.1rem; font-weight: 500; }
.v3 .event .where { color: var(--ink-3); margin-left: auto; }

/* ── FAQ ───────────────────────────────────────────────────── */

.v3 details { border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
.v3 details summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  font-size: clamp(1rem, 1.8vw, 1.24rem); font-weight: 500;
  transition: color 220ms var(--ease);
}
.v3 details summary::-webkit-details-marker { display: none; }
.v3 details summary:hover { color: var(--ember-ink); }
.v3 details summary .pm { flex: none; color: var(--ink-3); transition: transform 320ms var(--ease); font-family: var(--font-jetbrains-mono), monospace; }
.v3 details[open] summary .pm { transform: rotate(45deg); }
.v3 details .ans { margin: 0.8rem 0 0; max-width: 46rem; color: var(--ink-2); font-size: 0.963rem; line-height: 1.66; animation: v3-open 400ms var(--ease) both; }

/* ── footer ────────────────────────────────────────────────── */

.v3 .foot { background: var(--ink); color: var(--paper); padding-block: clamp(3.2rem, 7vh, 5rem) 2rem; }
.v3 .foot a { color: rgba(251,250,247,0.6); transition: color 220ms var(--ease); }
.v3 .foot a:hover { color: var(--paper); }
.v3 .foot .big { font-family: var(--font-bricolage), sans-serif; font-weight: 500; letter-spacing: -0.028em; font-size: clamp(1.9rem, 5vw, 3.5rem); line-height: 1.02; margin: 0; max-width: 18ch; }
.v3 .foot .cols { margin-top: clamp(2.6rem, 6vh, 3.8rem); display: grid; gap: 2rem; border-top: 1px solid rgba(251,250,247,0.16); padding-top: 1.6rem; }
@media (min-width: 720px) { .v3 .foot .cols { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.v3 .foot .cols div { display: flex; flex-direction: column; gap: 0.48rem; }
.v3 .foot .cols .h { color: rgba(251,250,247,0.36); margin-bottom: 0.28rem; }
.v3 .foot .colophon { margin-top: clamp(2.2rem, 5vh, 3.4rem); padding-top: 1.05rem; border-top: 1px solid rgba(251,250,247,0.16); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; color: rgba(251,250,247,0.36); }

/* ── motion ────────────────────────────────────────────────── */

@keyframes v3-rise   { from { opacity: 0; transform: translateY(7px); } }
/* Type being set, not a slide. Each line is wiped in left to right like ink
   laid down, with the tracking opening slightly as it lands so it reads as
   letters finding their position rather than a block arriving. */
@keyframes v3-ink {
  from { clip-path: inset(0 100% -0.28em 0); letter-spacing: 0.012em; }
  to   { clip-path: inset(0 -0.12em -0.28em 0); letter-spacing: -0.028em; }
}
/* The gradient floods in behind the wipe rather than being there from frame 1. */
@keyframes v3-flood { from { background-position: 190% 0; } to { background-position: 0 0; } }
@keyframes v3-open   { from { opacity: 0; transform: translateY(-4px); } }
@keyframes v3-blink  { 50% { opacity: 0; } }
@keyframes v3-pulse  { 0%,100% { opacity: 0.3; transform: scale(0.82); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes v3-marq   { to { transform: translateX(-50%); } }

.v3 .hero h1 .l > span { animation: v3-ink 1.05s var(--ease-link) both; }
.v3 .hero h1 .l:nth-child(1) > span { animation-delay: 0.06s; }
.v3 .hero h1 .l:nth-child(2) > span { animation-delay: 0.20s; }
.v3 .hero h1 .l:nth-child(3) > span { animation-delay: 0.34s; }
.v3 .hero .k     { animation: v3-rise 0.6s var(--ease) both; }
.v3 .hero-sub    { animation: v3-rise 0.7s var(--ease) both 0.36s; }
.v3 .hero-cta    { animation: v3-rise 0.7s var(--ease) both 0.44s; }
.v3 .index-strip { animation: v3-rise 0.7s var(--ease) both 0.52s; }

/* short-throw reveal, socialscout distance: 7px not 40px */
.v3 [data-reveal] { opacity: 0; transform: translateY(7px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); }
.v3 [data-reveal].seen { opacity: 1; transform: none; }
/* children stagger off a single observed parent */
.v3 [data-stagger] > * { opacity: 0; transform: translateY(7px); transition: opacity 560ms var(--ease), transform 560ms var(--ease); }
.v3 [data-stagger].seen > * { opacity: 1; transform: none; }
.v3 [data-stagger].seen > *:nth-child(1) { transition-delay: 0.03s; }
.v3 [data-stagger].seen > *:nth-child(2) { transition-delay: 0.09s; }
.v3 [data-stagger].seen > *:nth-child(3) { transition-delay: 0.15s; }
.v3 [data-stagger].seen > *:nth-child(4) { transition-delay: 0.21s; }
.v3 [data-stagger].seen > *:nth-child(5) { transition-delay: 0.27s; }
.v3 [data-stagger].seen > *:nth-child(6) { transition-delay: 0.33s; }

@media (prefers-reduced-motion: reduce) {
  .v3 *, .v3 *::before, .v3 *::after { animation: none !important; transition-duration: 1ms !important; }
  .v3 [data-reveal], .v3 [data-stagger] > * { opacity: 1; transform: none; }
  .v3 .bar i { width: var(--w); }
}

/* ═══════════════════════════════════════════════════════════════
   NYC — the standalone build.
   v3.css above is copied verbatim from vibelab.be so the two sites
   cannot drift. Everything below is what a static page needs that
   the Next.js app supplied: a body reset, the font tokens next/font
   injected, and the NYC wordmark.
   ═══════════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.v3 {
  --font-bricolage: "Bricolage Grotesque";
  --font-geist-sans: "Geist";
  --font-jetbrains-mono: "JetBrains Mono";
}

/* the nyc suffix rides the cap line of the lockup */
.v3 .wordmark i {
  font-family: var(--font-jetbrains-mono), ui-monospace, monospace;
  font-style: normal; font-size: 0.52em; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-3);
  margin-left: 0.5em; transform: translateY(-0.06em); display: inline-block;
}

/* ── masthead alignment ──────────────────────────────────────
   The bar was too short for its own button, all-caps mono sits
   below its optical centre, and the links and the action shared
   one gap so they read as three equal items. */
.v3 .mast .wrap { height: 3.85rem; gap: 1.5rem; }
.v3 .mast nav { gap: 1.75rem; align-items: center; }
.v3 .mast nav a.lnk { transform: translateY(-0.5px); }
.v3 .mast nav a.btn { margin-left: 0.5rem; position: relative; }
.v3 .mast nav a.btn::before {
  content: ''; position: absolute; left: -1.15rem; top: 50%;
  width: 1px; height: 1.05rem; transform: translateY(-50%);
  background: var(--line-strong);
}

@media (max-width: 560px) {
  .v3 .mast .wrap { height: 3.4rem; gap: 0.9rem; }
  .v3 .mast nav { gap: 1rem; }
  .v3 .mast nav a.btn { margin-left: 0; }
  .v3 .mast nav a.btn::before { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Use-case register and detail pages.
   The register is the v3 .row with one column added for the price;
   putting the number in its own right-aligned column is what makes
   ten rows read as a price list rather than ten paragraphs.
   ═══════════════════════════════════════════════════════════════ */

.v3 .reg .row .amt { display: none; }
@media (min-width: 900px) {
  .v3 .reg .row { grid-template-columns: 4.2rem minmax(0,15rem) minmax(0,1fr) 8.5rem 2rem; }
  .v3 .reg .row .amt {
    display: block; text-align: right; white-space: nowrap;
    color: var(--ink-3); font-size: 0.625rem; letter-spacing: 0.1em;
    transition: color 260ms var(--ease);
  }
  .v3 a.reg .row:hover .amt, .v3 .reg a.row:hover .amt { color: var(--c, var(--ember-ink)); }
}
/* below the grid breakpoint the price rides under the description */
@media (max-width: 899px) {
  .v3 .reg .row .amt {
    display: block; grid-column: 2; margin-top: 0.55rem;
    color: var(--ink-3); font-size: 0.625rem; letter-spacing: 0.1em;
  }
}
.v3 .reg .row h3 { font-size: clamp(1.3rem, 2.4vw, 1.85rem); }

/* ── detail page ───────────────────────────────────────────── */

.v3 .back {
  display: inline-block; margin-bottom: 1.5rem;
  color: var(--ink-3); transition: color 200ms var(--ease);
}
.v3 .back:hover { color: var(--ink); }

/* The number sits above the fold on purpose. Almost nobody publishes
   one, so stating it plainly does more work than any adjective. */
.v3 .pricebar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.4rem;
  margin-top: clamp(2rem, 5vh, 2.8rem);
  padding: 1.05rem 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
.v3 .pricebar .amt {
  font-family: var(--font-bricolage), sans-serif;
  font-weight: 500; font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  letter-spacing: -0.02em; text-transform: none; color: var(--ink);
}
.v3 .pricebar .term { color: var(--ink-3); }
.v3 .pricebar .ask {
  margin-left: auto; color: var(--c, var(--ember-ink));
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: border-color 220ms var(--ease);
}
.v3 .pricebar .ask:hover { border-bottom-color: currentColor; }

/* Buyer and trigger, verbatim from the catalog. A reader who recognises
   themselves in two lines has already decided to keep reading. */
.v3 .who { margin-top: 1.5rem; max-width: 46rem; }
.v3 .who p { margin: 0 0 0.45rem; color: var(--ink-2); font-size: 0.963rem; line-height: 1.55; }
.v3 .who .mono {
  display: inline-block; width: 3.6rem; flex: none;
  color: var(--ink-3); font-size: 0.625rem; letter-spacing: 0.16em;
}

.v3 .proof {
  display: grid; grid-template-columns: 1fr; gap: 0.4rem 2rem; align-items: baseline;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  color: inherit; text-decoration: none;
}
.v3 .proof > div { display: contents; }
.v3 .proof .k { color: var(--ink-3); }
.v3 .proof .fig {
  font-family: var(--font-bricolage), sans-serif; font-weight: 500;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1;
  letter-spacing: -0.03em; color: var(--c, var(--ink));
}
.v3 .proof .cap { margin: 0; max-width: 34rem; color: var(--ink-2); font-size: 0.963rem; line-height: 1.6; }
.v3 .proof .go { display: none; }
@media (min-width: 900px) {
  .v3 .proof { grid-template-columns: 8.5rem minmax(0, 12rem) minmax(0, 1fr) 2rem; gap: 0 clamp(1.2rem, 3vw, 3rem); }
  .v3 .proof .go { display: flex; justify-content: flex-end; align-items: center; height: 1.5em; }
}
a.proof:hover .go { color: var(--c, var(--ember-ink)); }
a.proof:hover .go .shaft { transform: scaleX(1); opacity: 1; }
a.proof:hover .go .head { transform: translateX(2px); }

/* sibling cards carry a title, which the audience cards do not */
.v3 .card h3 { margin: 0.35rem 0 0; }

/* ── pillars: four columns on one hairline, so the four disciplines
   read as a frame around the register below instead of a second list ── */
.v3 .pillars {
  display: grid; grid-template-columns: 1fr;
  border-top: 1px solid var(--line-strong);
}
.v3 .pillar {
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--line);
}
.v3 .pillar .n { display: block; color: var(--c, var(--ink-3)); margin-bottom: 1.1rem; }
.v3 .pillar h3 { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.v3 .pillar p { margin: 0.6rem 0 0; color: var(--ink-2); font-size: 0.938rem; line-height: 1.6; max-width: 20rem; }
@media (min-width: 620px) {
  .v3 .pillars { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: clamp(1.5rem, 4vw, 3rem); }
}
@media (min-width: 980px) {
  .v3 .pillars { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .v3 .pillar { padding-block: clamp(2rem, 4vw, 3rem) 0; border-bottom: 0; }
}

/* section titles above the lists */
.v3 .sec-title { margin-bottom: clamp(1.8rem, 4vh, 2.8rem); }

/* ── Company Brain diagram ───────────────────────────────────── */
.v3 .brain { border-top: 1px solid var(--line-strong); padding-top: 1.2rem; }
.v3 .brain-head { display: grid; grid-template-columns: 1fr; gap: 0.4rem; color: var(--ink-3); margin-bottom: 0.6rem; }
@media (min-width: 900px) {
  .v3 .brain { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; column-gap: clamp(1.5rem, 4vw, 3.5rem); }
  .v3 .brain-head { grid-column: 1 / -1; grid-template-columns: 12rem 1fr 19rem; column-gap: clamp(1.5rem, 4vw, 3.5rem); }
}
.v3 .brain-svg { width: 100%; height: auto; display: block; overflow: visible; }
.v3 .brain-svg text { font-family: var(--font-geist), sans-serif; fill: var(--ink); }
.v3 .brain-svg .src .rule { stroke: var(--line-strong); stroke-width: 1; transition: stroke 300ms var(--ease); }
.v3 .brain-svg .src .port { fill: var(--ink-3); transition: fill 300ms var(--ease); }
.v3 .brain-svg .src .t { font-size: 13.5px; font-weight: 500; letter-spacing: -0.01em; }
.v3 .brain-svg .src .s { font-size: 10.5px; fill: var(--ink-3); }
.v3 .brain-svg .src.on .rule { stroke: var(--ink); stroke-width: 2; }
.v3 .brain-svg .src.on .port { fill: var(--ink); }
.v3 .brain-svg .cite { fill: none; stroke: var(--ink-3); stroke-width: 0.75; stroke-dasharray: 1.5 4; opacity: 0.45; transition: stroke 300ms var(--ease), opacity 300ms var(--ease); }
.v3 .brain-svg .link { stroke: var(--line-strong); stroke-width: 1; transition: stroke 300ms var(--ease), opacity 300ms var(--ease); }
.v3 .brain-svg .node { cursor: pointer; }
.v3 .brain-svg .node circle { fill: var(--c); stroke: var(--paper-2); stroke-width: 3; transition: r 300ms var(--ease); }
.v3 .brain-svg .node .k { font-family: var(--font-jetbrains), monospace; font-size: 8.5px; letter-spacing: 0.14em; fill: var(--ci); }
.v3 .brain-svg .node .t { font-size: 13px; font-weight: 500; paint-order: stroke; stroke: var(--paper-2); stroke-width: 4px; stroke-linejoin: round; }
.v3 .brain-svg .node.on circle { r: 7; }
.v3 .brain-svg .cite.on { stroke: var(--ink); stroke-width: 1.25; stroke-dasharray: none; opacity: 1; }
.v3 .brain-svg .link.on { stroke: var(--ink); stroke-width: 1.5; }
.v3 .brain.focus .brain-svg .node:not(.on), .v3 .brain.focus .brain-svg .src:not(.on) { opacity: 0.3; }
.v3 .brain.focus .brain-svg .cite:not(.on) { opacity: 0.12; }
.v3 .brain.focus .brain-svg .link:not(.on) { opacity: 0.3; }
.v3 .brain-svg .node, .v3 .brain-svg .src, .v3 .brain-svg .cite, .v3 .brain-svg .link { transition: opacity 300ms var(--ease); }

.v3 .brain-ask { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .v3 .brain-ask { margin-top: 0; padding-top: 0; border-top: 0; border-left: 1px solid var(--line); padding-left: clamp(1.2rem, 2.5vw, 2rem); } }
.v3 .brain-ask p { margin: 0; }
.v3 .brain-ask .mono { display: block; color: var(--ink-3); margin-bottom: 0.45rem; }
.v3 .brain-ask .q { font-family: var(--font-bricolage), sans-serif; font-weight: 500; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.2; }
.v3 .brain-ask .a { margin-top: 1.1rem; color: var(--ink-2); font-size: 0.925rem; line-height: 1.6; }
.v3 .brain-ask .c { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.v3 .brain-ask .c .mono { display: inline; margin: 0 0.4rem 0 0; }
.v3 .brain-ask .cite-chip { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; margin: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); text-decoration: none; font-family: var(--font-jetbrains), monospace; font-size: 0.7rem; line-height: 1; letter-spacing: 0; cursor: pointer; transition: border-color 200ms var(--ease), color 200ms var(--ease); }
.v3 .brain-ask .cite-chip:hover, .v3 .brain-ask .cite-chip.on { border-color: var(--ink); color: var(--ink); }
.v3 .brain-ask .n { margin-top: 1.4rem; color: var(--ink-3); font-size: 0.75rem; line-height: 1.5; }

/* ── Claude window (ported from the NextCV homepage) ─────────── */
.clw {
  --cl-bg: #1b1a18;
  --cl-side: #201f1c;
  --cl-panel: #2b2926;
  --cl-border: #343129;
  --cl-border-2: #413d35;
  --cl-text: #ece8e0;
  --cl-dim: #98938a;
  --cl-faint: #6d685f;
  --cl-coral: #d0876a;
  --cl-green: #6bbf8f;
  display: grid;
  grid-template-columns: 236px 1fr;
  /* fixed to the measured height of the finished conversation so the window
     never resizes while the demo plays */
  height: auto;
  min-height: 640px;
  border: 1px solid var(--cl-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--cl-bg);
  color: var(--cl-text);
  font-family: var(--font-geist), sans-serif;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 54px 100px -50px rgba(0, 0, 0, 0.6);
}

/* sidebar */
.clw-side { background: var(--cl-side); border-right: 1px solid var(--cl-border); display: flex; flex-direction: column; padding: 14px 12px; gap: 3px; min-height: 0; }
.clw-side-top { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 12px; }
.clw-word { font-family: var(--font-bricolage), sans-serif; font-size: 19px; color: var(--cl-text); letter-spacing: -0.01em; }
.clw-side-ics { display: flex; gap: 11px; color: var(--cl-dim); }
.clw-tabs { display: flex; gap: 3px; background: var(--cl-bg); border: 1px solid var(--cl-border); border-radius: 9px; padding: 3px; margin-bottom: 10px; }
.clw-tab { flex: 1; text-align: center; font-size: 12.5px; color: var(--cl-dim); padding: 5px; border-radius: 6px; }
.clw-tab.is-on { background: var(--cl-panel); color: var(--cl-text); }
.clw-nav { display: flex; flex-direction: column; gap: 1px; }
.clw-nav-item { display: flex; align-items: center; gap: 11px; font-size: 13px; color: var(--cl-dim); padding: 7px 8px; border-radius: 7px; }
.clw-nav-item.is-on { background: var(--cl-panel); color: var(--cl-text); }
.clw-nav-item b { color: var(--cl-text); font-weight: 500; width: 13px; text-align: center; font-size: 15px; }
.clw-nav-item i { width: 13px; height: 13px; border: 1.4px solid currentColor; border-radius: 3px; opacity: 0.55; flex-shrink: 0; }
.clw-side-label { font-size: 11px; color: var(--cl-faint); padding: 15px 8px 7px; }
.clw-chats { display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.clw-chat { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--cl-dim); padding: 6px 8px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clw-chat-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--cl-faint); flex-shrink: 0; }
.clw-user { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 10px 6px 2px; border-top: 1px solid var(--cl-border); }
.clw-ava { width: 26px; height: 26px; border-radius: 7px; background: var(--cl-coral); color: #241a15; display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.clw-user-name { font-size: 13px; color: var(--cl-text); }
.clw-plan { color: var(--cl-faint); font-size: 11px; }

/* main */
.clw-main { position: relative; display: flex; flex-direction: column; min-height: 0; }
.clw-greet { flex: 1; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 24px; }
.clw-star { color: var(--cl-coral); font-size: 30px; display: inline-flex; }
.clw-greet-txt { font-family: var(--font-bricolage), sans-serif; font-size: clamp(22px, 2.4vw, 30px); color: var(--cl-text); letter-spacing: -0.01em; }
.clw-main.sent .clw-greet { display: none; }

.clw-thread { display: none; flex: 1; overflow: visible; padding: 30px 34px 18px; flex-direction: column; gap: 22px; }
.clw-main.sent .clw-thread { display: flex; }
.clw-msg-user { display: flex; justify-content: flex-end; }
.clw-ubub { max-width: 80%; background: var(--cl-panel); border: 1px solid var(--cl-border); border-radius: 15px 15px 5px 15px; padding: 11px 15px; font-size: 14px; line-height: 1.5; color: var(--cl-text); }
.clw-msg-ai { display: flex; gap: 12px; align-items: flex-start; }
.clw-ai-star { color: var(--cl-coral); font-size: 19px; margin-top: 1px; flex-shrink: 0; display: inline-flex; }
.clw-ai-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 13px; }
.clw-ai-text { font-size: 14px; line-height: 1.6; color: var(--cl-text); margin: 0; }
.clw-ai-text.typing::after { content: "▍"; color: var(--cl-coral); margin-left: 1px; animation: lp3-blink 1s steps(1) infinite; }

.clw-tools { display: flex; flex-direction: column; gap: 7px; }
.clw-tool { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--cl-border); border-radius: 10px; background: var(--cl-panel); font-size: 13px; }
.clw-main.sent .clw-tool { opacity: 0.4; transform: translateY(3px); transition: opacity 0.3s, transform 0.3s, border-color 0.3s; }
.clw-main.sent .clw-tool.running, .clw-main.sent .clw-tool.done { opacity: 1; transform: none; }
.clw-tool.done { border-color: color-mix(in oklab, var(--cl-green) 38%, var(--cl-border)); }
.clw-tool-ic { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--cl-border-2); flex-shrink: 0; box-sizing: border-box; display: grid; place-items: center; }
.clw-tool.running .clw-tool-ic { border-color: color-mix(in oklab, var(--cl-coral) 40%, var(--cl-border-2)); border-top-color: var(--cl-coral); animation: lp3-spin 0.7s linear infinite; }
.clw-tool.done .clw-tool-ic { background: var(--cl-green); border-color: var(--cl-green); animation: none; }
.clw-tool.done .clw-tool-ic::after { content: "✓"; font-size: 9px; color: #12210f; line-height: 1; }
.clw-tool-label { flex: 1; min-width: 0; color: var(--cl-dim); }
.clw-tool-label b { color: var(--cl-text); font-weight: 500; }
.clw-tool-meta { margin-left: auto; font-family: var(--font-jetbrains), monospace; font-size: 10.5px; color: var(--cl-faint); flex-shrink: 0; }

/* artifact = the CV building */
.clw-art { border: 1px solid var(--cl-border); border-radius: 12px; overflow: hidden; background: var(--cl-bg); }
.clw-main.sent .clw-art { opacity: 0; transform: translateY(7px); transition: opacity 0.5s cubic-bezier(0.2, 1, 0.3, 1), transform 0.5s cubic-bezier(0.2, 1, 0.3, 1); }
.clw-main.sent .clw-art.open { opacity: 1; transform: none; }
.clw-art-bar { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-bottom: 1px solid var(--cl-border); background: var(--cl-side); }
.clw-art-ic { color: var(--cl-coral); display: inline-flex; }
.clw-art-title { font-size: 12.5px; color: var(--cl-text); }
.clw-art-badge { margin-left: auto; font-family: var(--font-jetbrains), monospace; font-size: 10.5px; color: var(--cl-green); }
.clw-art-body { padding: 14px 15px; }
.clw-art-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--cl-border); margin-bottom: 4px; }
.clw-art-avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(140deg, #2e6f4f, #6bbf8f); color: #fff; display: grid; place-items: center; font-family: var(--font-bricolage), sans-serif; font-size: 15px; }
.clw-art-name { font-family: var(--font-bricolage), sans-serif; font-size: 14.5px; color: var(--cl-text); line-height: 1.1; }
.clw-art-role { font-size: 11.5px; color: var(--cl-faint); }
.clw-art-entry { display: flex; gap: 9px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--cl-border); }
.clw-art-entry:last-child { border-bottom: 0; }
.clw-main.sent .clw-art-entry { opacity: 0; transform: translateX(9px); }
.clw-main.sent .clw-art-entry.stamped { opacity: 1; transform: none; transition: opacity 0.5s cubic-bezier(0.2, 1, 0.3, 1), transform 0.5s cubic-bezier(0.2, 1, 0.3, 1); }
.clw-art-stamp { width: 16px; height: 16px; border-radius: 50%; background: var(--cl-green); color: #12210f; display: grid; place-items: center; flex-shrink: 0; margin-top: 1px; transform: scale(0); }
.clw-art-entry.stamped .clw-art-stamp { animation: lp3-pop 0.45s cubic-bezier(0.2, 1.5, 0.5, 1) 0.12s forwards; }
.clw-art-entry-t { font-size: 13px; color: var(--cl-text); line-height: 1.35; }
.clw-art-entry-s { font-family: var(--font-jetbrains), monospace; font-size: 10.5px; color: var(--cl-faint); margin-top: 2px; }

/* composer */
.clw-composer { margin: 0 22px 22px; border: 1px solid var(--cl-border-2); border-radius: 18px; background: var(--cl-panel); padding: 14px 16px; }
.clw-input { display: flex; align-items: center; position: relative; min-height: 22px; }
.clw-ph { font-size: 14px; color: var(--cl-faint); display: inline-flex; align-items: center; gap: 6px; }
.clw-slash { border: 1px solid var(--cl-border-2); border-radius: 4px; padding: 0 5px; font-size: 12px; color: var(--cl-dim); }
.clw-typed { font-size: 14px; color: var(--cl-text); }
.clw-input.typing .clw-ph { display: none; }
.clw-caret2 { width: 2px; height: 16px; background: var(--cl-coral); margin-left: 1px; opacity: 0; }
.clw-input.typing .clw-caret2 { opacity: 1; animation: lp3-blink 1s steps(1) infinite; }
.clw-input-dot { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--cl-green); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cl-green) 18%, transparent); }
.clw-comp-bar { display: flex; align-items: center; margin-top: 15px; color: var(--cl-dim); }
.clw-plus { width: 26px; height: 26px; border: 1px solid var(--cl-border-2); border-radius: 8px; display: grid; place-items: center; color: var(--cl-dim); font-size: 16px; }
.clw-comp-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.clw-model { font-size: 12.5px; color: var(--cl-text); }
.clw-model-sub { color: var(--cl-faint); }
.clw-wave { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.clw-wave i { width: 2px; background: var(--cl-dim); border-radius: 1px; }
.clw-wave i:nth-child(1) { height: 6px; }
.clw-wave i:nth-child(2) { height: 13px; }
.clw-wave i:nth-child(3) { height: 8px; }
.clw-wave i:nth-child(4) { height: 11px; }

@media (prefers-reduced-motion: reduce) {
  .clw-main.sent .clw-tool, .clw-main.sent .clw-art, .clw-main.sent .clw-art-entry { opacity: 1; transform: none; }
  .clw-art-stamp { transform: scale(1); }
  .clw-tool-ic { border-color: var(--cl-green); background: var(--cl-green); }
  .clw-tool-ic::after { content: "✓"; font-size: 9px; color: #12210f; }
}

@media (max-width: 820px) {
  .clw { grid-template-columns: 1fr; height: auto; min-height: 540px; }
  .clw-side { display: none; }
}
@media (max-width: 560px) {
  .clw-thread { padding: 18px 16px 6px; gap: 16px; }
  .clw-composer { margin: 0 14px 14px; padding: 12px 14px; }
  .clw-greet-txt { font-size: 22px; }
}

.clw-mcp { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 5px 10px; border: 1px solid var(--cl-border-2); border-radius: 8px; font-size: 12.5px; color: var(--cl-text); }
.clw-mcp-tag { font-family: var(--font-jetbrains), monospace; font-size: 9.5px; letter-spacing: 0.08em; color: var(--cl-green); background: color-mix(in oklab, var(--cl-green) 14%, transparent); border-radius: 4px; padding: 1px 5px; }
.clw-word { font-weight: 500; }
@keyframes lp3-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes lp3-spin { to { transform: rotate(360deg); } }
@keyframes lp3-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* MCP calls render as collapsed one-liners, then the answer is plain text */
.clw-calls { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.clw-call { display: flex; align-items: center; gap: 9px; padding: 6px 10px 6px 8px; border-radius: 8px; font-size: 13px; color: var(--cl-dim); border: 1px solid transparent; }
.clw-main.sent .clw-call { opacity: 0; transform: translateY(3px); transition: opacity 0.3s, transform 0.3s; }
.clw-main.sent .clw-call.running, .clw-main.sent .clw-call.done { opacity: 1; transform: none; }
.clw-call.running { background: var(--cl-panel); border-color: var(--cl-border); }
.clw-call-ic { width: 13px; height: 13px; border-radius: 50%; border: 1.6px solid var(--cl-border-2); flex-shrink: 0; box-sizing: border-box; }
.clw-call.running .clw-call-ic { border-color: color-mix(in oklab, var(--cl-coral) 40%, var(--cl-border-2)); border-top-color: var(--cl-coral); animation: lp3-spin 0.7s linear infinite; }
.clw-call.done .clw-call-ic { border: 0; background: var(--cl-faint); width: 6px; height: 6px; margin: 0 3.5px; }
.clw-call-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clw-call-label b { font-family: var(--font-jetbrains), monospace; font-weight: 500; font-size: 12px; color: var(--cl-text); }
.clw-call-srv { color: var(--cl-faint); margin: 0 4px; }
.clw-call-arg { color: var(--cl-dim); }
.clw-call-chev { color: var(--cl-faint); font-size: 15px; line-height: 1; }
.clw-call.running .clw-call-chev { opacity: 0; }

.clw-ans { display: flex; flex-direction: column; gap: 12px; max-width: 62ch; }
.clw-ans-p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--cl-text); }
.clw-main.sent .clw-ans-p { display: none; }
.clw-main.sent .clw-ans-p.in { display: block; }
.clw-ans-p.typing::after { content: "\25AE"; color: var(--cl-coral); margin-left: 2px; animation: lp3-blink 1s steps(1) infinite; }
.clw-src { display: inline-flex; align-items: center; vertical-align: 1px; margin: 0 1px; padding: 1px 7px; border: 1px solid var(--cl-border-2); border-radius: 999px; background: var(--cl-panel); font-family: var(--font-jetbrains), monospace; font-size: 10px; letter-spacing: 0.02em; color: var(--cl-dim); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .clw-main.sent .clw-call { opacity: 1; transform: none; }
}
.v3 .who a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: text-decoration-color 200ms var(--ease); }
.v3 .who a:hover { text-decoration-color: var(--ink); }
.v3 .lead a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; transition: text-decoration-color 200ms var(--ease); }
.v3 .lead a:hover { text-decoration-color: var(--ink); }