#retainer { padding-block: clamp(4rem, 9vw, 8rem); }
      #retainer .ret-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
      #retainer .ret-copy { display: grid; gap: 1.4rem; align-content: start; }
      #retainer .slack { width: 22px; height: 22px; flex: none; }
      #retainer .slack-chip { justify-self: start; display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1rem .5rem .6rem; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--hair-2); font-size: .95rem; font-weight: 600; }
      #retainer h2 { margin: 0; font-size: clamp(2.6rem, 5.6vw, 5.4rem); line-height: .95; letter-spacing: -.045em; }
      #retainer .viral { background: linear-gradient(95deg, #8c8cff 0%, #9fc4ff 60%, #d6ecff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
      #retainer .ret-lead { margin: 0; max-width: 42ch; color: var(--dim); font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.45; }
      #retainer .ret-steps { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; border-top: 1px solid var(--hair-2); }
      #retainer .ret-steps li { display: grid; grid-template-columns: 3rem 1fr; gap: .5rem; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid var(--hair-2); }
      #retainer .ret-steps .mono { color: var(--faint); font-size: .8rem; }
      #retainer .ret-steps b { font-size: 1.15rem; font-weight: 700; letter-spacing: -.02em; }
      #retainer .ret-steps p { margin: .2rem 0 0; color: var(--dim); font-size: .95rem; line-height: 1.45; }
      #retainer .ret-incl { display: flex; flex-wrap: wrap; gap: .5rem; }
      #retainer .ret-incl span { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .8rem; border-radius: 999px; border: 1px solid var(--hair-2); background: rgba(255,255,255,.04); color: #d6d6da; font-size: .85rem; font-weight: 600; }
      #retainer .ret-incl span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2eb67d; }
      #retainer .ret-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .3rem; }
      #retainer .ret-cta { display: inline-flex; align-items: center; gap: .6rem; padding: .9rem 1.4rem; border-radius: 999px; background: var(--white); color: var(--black); font-weight: 700; text-decoration: none; transition: transform .2s ease; }
      #retainer .ret-cta:hover { transform: translateY(-2px); }
      #retainer .ret-cta.ret-cta-alt { background: transparent; color: var(--white); border: 1px solid var(--hair-2); }

      #retainer .ret-app { position: relative; height: clamp(560px, 50vw, 700px); display: grid; grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: 56px minmax(0, 1fr); overflow: hidden; border-radius: 22px; border: 1px solid var(--hair-2); background: #16161a; box-shadow: 0 40px 110px rgba(0,0,0,.55), 0 0 0 1px rgba(140,140,255,.08); }
      #retainer .ret-top { grid-column: 1 / -1; display: flex; align-items: center; gap: .8rem; padding: 0 1.1rem; border-bottom: 1px solid var(--hair-2); background: #1d1d22; }
      #retainer .m-dots { flex: none; width: 40px; height: 9px; background: radial-gradient(circle at 4px 4px, #ff5f57 3.5px, transparent 4px), radial-gradient(circle at 17px 4px, #febc2e 3.5px, transparent 4px), radial-gradient(circle at 30px 4px, #28c840 3.5px, transparent 4px); }
      #retainer .ret-top b { font-size: 1rem; font-weight: 700; white-space: nowrap; }
      #retainer .ret-members { margin-left: auto; display: inline-flex; align-items: center; font-size: .8rem; color: var(--dim); white-space: nowrap; }
      #retainer .ret-members i { width: 18px; height: 18px; margin-right: -5px; border-radius: 50%; border: 2px solid #1d1d22; background: linear-gradient(135deg, #8c8cff, #9fc4ff); }
      #retainer .ret-members i:nth-child(2) { background: #3b82f6; } #retainer .ret-members i:nth-child(3) { background: #fff; margin-right: 8px; }
      #retainer .ret-side { display: grid; align-content: start; gap: 3px; padding: .9rem .6rem; border-right: 1px solid var(--hair-2); background: #131317; }
      #retainer .ret-ch { display: flex; align-items: center; gap: .4rem; padding: .45rem .6rem; border-radius: 7px; font-size: .9rem; color: var(--dim); white-space: nowrap; }
      #retainer .ret-ch.on { background: rgba(140,150,255,.18); color: #fff; font-weight: 600; }
      #retainer .ret-ch.unread { color: #fff; font-weight: 700; }
      #retainer .ret-badge { margin-left: auto; min-width: 1.2rem; padding: 0 .35rem; border-radius: 999px; background: #e01e5a; color: #fff; font-style: normal; font-size: .7rem; font-weight: 800; line-height: 1.2rem; text-align: center; }
      #retainer .ret-badge[hidden] { display: none; }
      #retainer .ret-badge.pop { animation: retPop .35s cubic-bezier(.2,1.3,.4,1) both; }

      #retainer .ret-main { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
      #retainer .ret-feed { display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; padding: 1.2rem 1.3rem .6rem; min-height: 0; overflow: hidden;
                            -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 90px); mask-image: linear-gradient(to bottom, transparent 0, #000 90px); }
      #retainer .ret-join { display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.14); font-size: .82rem; color: var(--dim); }
      #retainer .ret-join b { color: #fff; }
      #retainer .ret-day { display: flex; align-items: center; gap: .7rem; color: var(--faint); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
      #retainer .ret-day::before, #retainer .ret-day::after { content: ""; flex: 1; height: 1px; background: var(--hair-2); }
      #retainer .ret-msg { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .7rem; }
      #retainer .ret-msg.old { opacity: .55; }
      #retainer .av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; font-style: normal; font-size: .8rem; font-weight: 800; }
      #retainer .av.a1 { background: #3b82f6; color: #fff; }
      #retainer .av.why { background: #fff; }
      #retainer .av.why img { width: 30px; height: auto; filter: brightness(0); }
      #retainer .ret-body b { font-size: .92rem; font-weight: 700; }
      #retainer .ret-body em { margin-left: .4rem; font-style: normal; font-size: .75rem; font-weight: 500; color: var(--faint); }
      #retainer .ret-body p { margin: .2rem 0 0; font-size: .98rem; line-height: 1.4; color: #d6d6da; }
      #retainer .ret-files { display: flex; gap: .6rem; margin-top: .6rem; }
      #retainer .ret-file { position: relative; width: 100px; height: 178px; margin: 0; overflow: hidden; border-radius: 10px; border: 1px solid var(--hair-2); background: var(--lift); }
      #retainer .ret-file:last-child { height: 100px; align-self: end; }
      #retainer .ret-file video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
      #retainer .ret-file span { position: absolute; left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 5px; background: rgba(0,0,0,.6); font-family: "IBM Plex Mono", monospace; font-size: .65rem; }
      #retainer .ret-react { display: inline-block; margin-top: .6rem; padding: .25rem .65rem; border-radius: 999px; border: 1px solid var(--hair-2); background: rgba(255,255,255,.05); font-size: .82rem; }
      #retainer .ret-dots { display: inline-flex; align-self: flex-start; gap: 5px; margin-left: 52px; padding: .6rem .8rem; border-radius: 14px; background: rgba(255,255,255,.09); }
      #retainer .ret-dots i { width: 7px; height: 7px; border-radius: 50%; background: #d4d4d9; animation: retDot 1s ease-in-out infinite; }
      #retainer .ret-dots i:nth-child(2) { animation-delay: .15s; } #retainer .ret-dots i:nth-child(3) { animation-delay: .3s; }
      #retainer .ret-compose { display: grid; gap: .35rem; padding: 0 1.3rem 1rem; }
      #retainer .ret-typer { min-height: 1.1em; font-size: .78rem; color: var(--dim); }
      #retainer .ret-input { padding: .7rem .9rem; border-radius: 10px; border: 1px solid var(--hair-2); background: #1b1b20; color: var(--faint); font-size: .9rem; }

      /* One round of the conversation: each line rises in, then the round fades before the next brief. */
      #retainer .ret-round { display: flex; flex-direction: column; gap: 1rem; transition: opacity .5s ease; }
      #retainer .ret-round.out { opacity: 0; }
      #retainer .ret-round > * { opacity: 0; transform: translateY(14px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.8,.2,1); }
      #retainer .ret-round > .in { opacity: 1; transform: none; }
      #retainer .ret-round > .in .ret-file { animation: retPop .45s cubic-bezier(.2,1.3,.4,1) both; }
      #retainer .ret-round > .in .ret-file:nth-child(1) { animation-delay: .35s; } #retainer .ret-round > .in .ret-file:nth-child(2) { animation-delay: .6s; } #retainer .ret-round > .in .ret-file:nth-child(3) { animation-delay: .85s; }
      #retainer .ret-round > .in .ret-react { animation: retPop .45s cubic-bezier(.2,1.3,.4,1) 1.6s both; }
      @keyframes retDot { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-5px); opacity: 1; } }
      @keyframes retPop { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
      @media (prefers-reduced-motion: reduce) {
        #retainer .ret-round > * { opacity: 1; transform: none; transition: none; }
        #retainer .ret-round > .in .ret-file, #retainer .ret-round > .in .ret-react, #retainer .ret-badge.pop { animation: none; }
      }
      @media (max-width: 1024px) { #retainer .ret-grid { grid-template-columns: 1fr; } }
      @media (max-width: 640px) {
        #retainer .ret-app { grid-template-columns: 1fr; height: 600px; }
        #retainer .ret-side, #retainer .ret-members { display: none; }
        #retainer .ret-feed { padding: 1rem 1rem .5rem; }
        #retainer .ret-compose { padding: 0 1rem .9rem; }
        #retainer .ret-file { width: 84px; height: 150px; }
        #retainer .ret-file:last-child { height: 84px; }
      }