/* Bolt storefront preview polish — fixed geometry, calm transitions and the
   same blue credit treatment across every customer-facing card example. */

/* Product sample windows never change size between question, answer, diagram
   or subject states. The card itself scales inside this fixed viewport. */
[data-exact-sample] .sample-mac-window {
  display: grid !important;
  grid-template-rows: 39px 52px minmax(0, 1fr) 62px;
  height: 653px !important;
  overflow: hidden;
}

[data-exact-sample] .sample-mac-title,
[data-exact-sample] .sample-review-bar,
[data-exact-sample] .sample-review-controls {
  min-height: 0 !important;
}

[data-exact-sample] .sample-mac-window iframe {
  width: 100%;
  height: 100% !important;
  min-height: 0 !important;
  opacity: 1;
  transform: none !important;
  filter: none !important;
  transition: opacity 180ms ease !important;
}

/* Keep the new document hidden while it is loading and being prepared. This
   removes the completed-answer flash and the empty-frame flash. */
[data-exact-sample] .sample-mac-window.is-revealing iframe,
[data-exact-sample] .sample-mac-window iframe.is-leaving {
  opacity: 0 !important;
  transition: none !important;
}

[data-exact-sample] .sample-mac-window iframe.is-entering {
  opacity: 1 !important;
}

/* Let each hierarchy occupy its natural height. The previous fixed capture
   height made longer courses look trapped in a rigid internal scroller. */
.product-visual-window--capture {
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.product-visual-window--capture .anki-structure-window {
  height: auto !important;
  min-height: clamp(390px, 36vw, 470px) !important;
  overflow: hidden !important;
}

/* Homepage answers sit near the top of the Anki window rather than floating
   in a large empty area. */
.feature-demo-panel {
  min-height: 620px !important;
}

.feature-demo-content {
  height: 560px !important;
  min-height: 560px !important;
}

.feature-anki-stage {
  height: 460px !important;
}

.feature-answer-layer {
  place-items: start center !important;
  padding-top: clamp(20px, 4.5vh, 38px);
}

.feature-answer-card {
  width: min(100%, 620px);
  padding-top: 0 !important;
}

/* The calculation showcase reads like a worked method, not three loose
   bullets floating in an oversized blank panel. */
.feature-anki-stage[data-focus="hint"] .feature-answer-card {
  width: min(calc(100% - 34px), 570px);
  padding: 20px 22px 22px !important;
  border: 1px solid #dfe5ec;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}

.feature-anki-stage[data-focus="hint"] .feature-answer-question {
  margin-top: 0 !important;
}

.feature-anki-stage[data-focus="hint"] .feature-answer-points {
  display: grid;
  gap: 8px;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
  counter-reset: bolt-calculation-step;
}

.feature-anki-stage[data-focus="hint"] .feature-answer-step {
  counter-increment: bolt-calculation-step;
  position: relative;
  margin: 0 !important;
  padding: 9px 12px 9px 40px !important;
  border: 1px solid #edf0f4;
  border-radius: 9px;
  background: #fff;
}

.feature-anki-stage[data-focus="hint"] .feature-answer-step::before {
  content: counter(bolt-calculation-step);
  position: absolute;
  top: 50%;
  left: 11px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #f1f4f8;
  color: #667085;
  font-size: 11px;
  font-weight: 700;
  transform: translateY(-50%);
}

/* Explicit, top-to-bottom reveal. Transitions are used instead of competing
   keyframes so Safari cannot briefly paint the completed answer first. */
.feature-answer-step,
.feature-answer-box {
  opacity: 0 !important;
  transform: translateY(8px) !important;
  animation: none !important;
  transition:
    opacity 280ms ease,
    transform 320ms cubic-bezier(.22, 1, .36, 1) !important;
}

.feature-answer-layer.is-visible .feature-answer-step,
.feature-answer-layer.is-visible .feature-answer-box {
  opacity: 1 !important;
  transform: none !important;
  transition-delay: calc(120ms + (var(--answer-order) * 420ms)) !important;
}

/* Exact credit phrases keep their bold weight and gain the restrained Bolt
   blue highlighter used throughout the decks. */
.feature-answer-step strong,
.feature-answer-step b {
  padding: 0 .08em;
  border-radius: 2px;
  background-image: linear-gradient(transparent 54%, rgba(185, 220, 255, .62) 54%);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0 100%;
  transition: background-size 360ms cubic-bezier(.22, 1, .36, 1);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.feature-answer-layer.is-visible .feature-answer-step strong,
.feature-answer-layer.is-visible .feature-answer-step b {
  background-size: 100% 100%;
  transition-delay: calc(260ms + (var(--answer-order) * 420ms));
}

@media (max-width: 680px) {
  [data-exact-sample] .sample-mac-window {
    grid-template-rows: 34px 48px minmax(0, 1fr) 56px;
    height: 568px !important;
  }

  .product-visual-window--capture .anki-structure-window {
    min-height: 340px !important;
  }

  .feature-demo-panel {
    min-height: 480px !important;
  }

  .feature-demo-content {
    height: 500px !important;
    min-height: 500px !important;
  }

  .feature-anki-stage {
    height: 420px !important;
  }

  .feature-answer-layer {
    padding-top: 14px;
  }

  .feature-answer-card {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  .feature-anki-stage[data-focus="hint"] .feature-answer-card {
    width: min(calc(100% - 20px), 570px);
    padding: 15px 14px 16px !important;
  }

  .feature-anki-stage[data-focus="hint"] .feature-answer-step {
    padding: 8px 9px 8px 35px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-exact-sample] .sample-mac-window iframe,
  .feature-answer-step,
  .feature-answer-box {
    transition: none !important;
  }

  .feature-answer-step,
  .feature-answer-box {
    opacity: 1 !important;
    transform: none !important;
  }

  .feature-answer-step strong,
  .feature-answer-step b {
    background-size: 100% 100%;
    transition: none;
  }
}