/* Project-only hotspot: shared fuchsia sketch ellipse from assets. */
.hotspot {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none;
  background: url("../assets/images/hotspot-ellipse.svg") center / 100% 100% no-repeat;
  transform: scale(1.55);
  transform-origin: center center;
  animation: hotspotPulse 1.8s var(--ease-out) infinite;
}
@keyframes hotspotPulse {
  0%, 100% { opacity: 0.88; transform: scale(1.55); }
  50% { opacity: 1; transform: scale(1.68); }
}
@media (prefers-reduced-motion: reduce) {
  .hotspot { animation: none; opacity: 1; transform: scale(1.55); }
}

/* Keep screenshot rounding, but let arrow tips sit on edge targets. */
.screenshot-frame.zoomable { overflow: visible; }
.screenshot-frame.zoomable > img:not(.point-arrow) { border-radius: 16px; }

/* Big highlight callout — same tokens, larger type. */
.callout.big {
  padding: 1.35rem 1.45rem;
  margin: 1.1rem 0 1.4rem;
  background: rgba(255, 91, 192, 0.10);
  border: 1.5px solid var(--strong-pink);
  color: #000;
  align-items: flex-start;
}
.callout.big .callout-body {
  font-family: 'Rubik', 'Heebo', sans-serif;
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1.55;
}
.callout.big [data-lucide] {
  color: var(--strong-pink);
  width: 22px;
  height: 22px;
  margin-top: 4px;
}

/* Accordion body: full teaching copy, not caption size. */
.settings-item-panel-inner .step-desc {
  font-size: 1rem;
  color: #222;
  margin: 0.85rem 0 0;
}
.settings-item-panel-inner .step-desc + .step-desc,
.settings-item-panel-inner .step-desc + .callout { margin-top: 0.75rem; }

/* Grok completion: white sides to match the outro, no Claude mascots. */
.completion { background: #ffffff; }
.completion-btn.primary {
  background: var(--amber);
  color: var(--black);
  border-color: var(--amber);
  font-weight: 800;
  box-shadow: 0 0 0 4px rgba(92, 225, 230, 0.35);
}
.completion-btn.primary:hover,
.completion-btn.primary:focus-visible {
  box-shadow: 0 0 0 5px rgba(92, 225, 230, 0.5), 0 8px 22px rgba(0, 0, 0, 0.12);
}

/* Deeper install/first-bot blocks: room for Hebrew backs, English charter. */
.concept-row .concept-card { height: 186px; }
.concept-card.tall { height: 176px; max-width: 520px; }
.flip-grid.doors .flip-card { height: 226px; }
.prompt-block.en {
  direction: ltr;
  text-align: left;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.7;
  padding-top: 2.6rem;
}
.shield-layer.open .shield-layer-desc,
.shield-layer:hover .shield-layer-desc,
.shield-layer:focus-visible .shield-layer-desc {
  max-height: 420px;
}
.context-chip span { line-height: 1.35; }

/* Send-button arrow on the first-task screenshot: small, on the button only. */
.point-arrow.tight {
  width: 7.5% !important;
}