/* "Inside my AI lab" — replaces the template CTA on the home page.
   Tiles are positioned by lab.js; everything else is plain CSS. */
section.framer-jss6mg { display: none !important; }

.sj-lab {
  --forest: #14261D; --slate: #45564B; --sage: #497E64; --orange: #E8722C;
  --cream: #F4F0E5; --beige: #EAE4D3; --blush: #F6D7E8;
  position: relative; overflow: hidden; width: 100%;
  background: var(--beige); padding: 140px 0 120px;
  font-family: "Instrument Sans", "Instrument Sans Placeholder", sans-serif; color: var(--slate);
}
.sj-lab * { box-sizing: border-box; }

.sj-lab__head { position: relative; z-index: 3; max-width: 820px; margin: 0 auto; padding: 0 24px; text-align: center; }
.sj-lab__pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 999px;
  background: var(--blush); color: var(--forest); font-size: 15px; line-height: 1.4;
}
.sj-lab__pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.sj-lab__title {
  margin: 18px 0 14px; color: var(--forest);
  font: 600 clamp(44px, 5.7vw, 82px)/1.1 "Bricolage Grotesque", "Bricolage Grotesque Placeholder", sans-serif;
  letter-spacing: -0.08em;
}
.sj-lab__hl { position: relative; display: inline-block; color: var(--sage); transform: rotate(5deg); padding: 0 .12em .14em 0; }
.sj-lab__hl .u { position: absolute; left: 0; right: 0; bottom: -.08em; height: .5em; width: 100%; pointer-events: none; }
.sj-lab__hl .s { position: absolute; top: -.18em; right: -.42em; width: .42em; height: .42em; pointer-events: none; }
.sj-lab__lede { margin: 0 auto; max-width: 560px; font-size: 17px; line-height: 1.45; }

/* ---- stage ---- */
.sj-lab__stage { position: relative; z-index: 2; margin: 24px auto 0; width: min(1240px, 100%); height: 680px; }
.sj-lab__orbits { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sj-lab__orbits ellipse { fill: none; stroke: var(--sage); stroke-opacity: .22; stroke-width: 1.2; stroke-dasharray: 3 9; }
.sj-lab.is-in .sj-lab__orbits ellipse { animation: sjDash 40s linear infinite; }
.sj-lab__orbits ellipse:nth-child(2) { animation-direction: reverse !important; animation-duration: 60s !important; }
@keyframes sjDash { to { stroke-dashoffset: -480; } }

.sj-lab__glow {
  position: absolute; left: var(--cx); top: var(--cy); width: 520px; height: 520px; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(232,114,44,.20), rgba(232,114,44,.07) 55%, transparent 72%);
  pointer-events: none; animation: sjPulse 5s ease-in-out infinite;
}
@keyframes sjPulse { 50% { transform: translate(-50%, -50%) scale(1.08); opacity: .8; } }

.sj-lab__brain {
  position: absolute; left: var(--cx); top: var(--cy); width: var(--bw); margin: 0;
  transform: translate(-50%, -50%) scale(.7); opacity: 0;
  transition: transform 1s cubic-bezier(.34,1.56,.64,1), opacity .6s ease;
}
.sj-lab.is-in .sj-lab__brain { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.sj-lab__brain img { display: block; width: 100%; height: auto; animation: sjBreathe 6s ease-in-out infinite; }
@keyframes sjBreathe { 50% { transform: translateY(-6px) scale(1.025); } }
.sj-lab__brain figcaption {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%) rotate(-3deg); white-space: nowrap;
  padding: 8px 16px; border-radius: 999px; background: var(--forest); color: var(--cream);
  font: 600 15px/1 "Bricolage Grotesque", "Bricolage Grotesque Placeholder", sans-serif; letter-spacing: -.01em;
  box-shadow: 0 10px 24px -12px rgba(20,38,29,.6);
}
.sj-lab__brain figcaption b { color: var(--orange); font-weight: 600; }

/* ---- tools ---- */
.sj-lab__tools { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.sj-tool {
  position: absolute; left: var(--cx); top: var(--cy); width: var(--s); height: var(--s);
  transform: translate(-50%, -50%) scale(.2); opacity: 0;
  transition: transform .9s cubic-bezier(.34,1.56,.64,1), opacity .5s ease;
  transition-delay: var(--d);
}
.sj-lab.is-in .sj-tool { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1); opacity: 1; }
.sj-tool__float { position: relative; display: block; width: 100%; height: 100%; animation: sjFloat var(--fd) ease-in-out var(--fdl) infinite alternate; }
@keyframes sjFloat { from { transform: translate(0, 0) rotate(var(--r0)); } to { transform: translate(var(--fx), var(--fy)) rotate(var(--r1)); } }
.sj-tool__par { display: block; width: 100%; height: 100%; transition: transform .6s cubic-bezier(.2,.8,.2,1); transform: translate(var(--px, 0px), var(--py, 0px)); }
.sj-tool img {
  display: block; width: 100%; height: 100%; border-radius: 23%;
  box-shadow: 0 10px 22px -12px rgba(20,38,29,.45), 0 1px 0 rgba(20,38,29,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.sj-tool__name {
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translate(-50%, 4px); white-space: nowrap;
  padding: 4px 10px; border-radius: 999px; background: var(--forest); color: var(--cream); font-size: 12px; line-height: 1.3;
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 5;
}
.sj-tool:hover { z-index: 6; }
.sj-tool:hover img { transform: translateY(-4px) scale(1.12); box-shadow: 0 18px 30px -14px rgba(20,38,29,.55); }
.sj-tool:hover .sj-tool__name { opacity: 1; transform: translate(-50%, 0); }

/* Claude = main tool */
.sj-tool.is-core { z-index: 4; }
.sj-tool.is-core img { box-shadow: 0 0 0 4px var(--cream), 0 0 0 6px var(--orange), 0 18px 36px -12px rgba(232,114,44,.55); }
.sj-tool.is-core .sj-tool__name { opacity: 1; transform: translate(-50%, 0); background: var(--orange); }
.sj-tool.is-core .sj-tool__name::before { content: "Core · "; font-weight: 600; }

.sj-lab__foot { position: relative; z-index: 3; margin: 8px auto 0; text-align: center; font-size: 15px; color: var(--slate); }
.sj-lab__foot strong { color: var(--forest); font-weight: 600; }

@media (max-width: 809px) {
  .sj-lab { padding: 90px 0 80px; }
  .sj-lab__lede { font-size: 16px; }
  .sj-lab__stage { height: 560px; margin-top: 8px; }
  .sj-lab__glow { width: 300px; height: 300px; }
  .sj-lab__brain figcaption { font-size: 13px; padding: 7px 12px; }
  .sj-tool.is-core .sj-tool__name::before { content: ""; }
}
@media (prefers-reduced-motion: reduce) {
  .sj-tool, .sj-lab__brain { transition: none; }
  .sj-tool__float, .sj-lab__brain img, .sj-lab__glow, .sj-lab__orbits ellipse { animation: none !important; }
}