/* Handwriting annotations — keep custom CSS; layout/typography elsewhere uses Tailwind. */

.hp-preview {
  --hand: "Caveat", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  --anno-blue: #2563eb;
}

.hp-preview .anno {
  font-family: var(--hand);
  font-size: 23px;
  line-height: 1.15;
  color: var(--anno-blue);
  position: absolute;
  z-index: 5;
  pointer-events: none;
  font-weight: 600;
}

.hp-preview .arrow {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
  color: var(--anno-blue);
}

.hp-preview .arrow path,
.hp-preview .arrow polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hp-preview .ink-blue {
  color: var(--anno-blue);
}

.hp-preview .hl {
  position: absolute;
  z-index: 4;
  left: var(--hero-hl-left, 10px);
  top: var(--hero-hl-top, 174px);
  width: var(--hero-hl-width, 191px);
  height: var(--hero-hl-height, 35px);
  transform: rotate(-0.5deg);
  border: 2px solid var(--anno-blue);
  border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
  pointer-events: none;
}

@media (max-width: 1120px) {
  .hp-preview .anno,
  .hp-preview .arrow,
  .hp-preview .hl {
    display: none;
  }
}

/* Hero screenshot */
.hp-preview .hero-shot {
  position: relative;
}

.hp-preview .hero-shot .anno {
  left: var(--hero-anno-left, 260px);
  top: var(--hero-anno-top, 0);
  width: var(--hero-anno-width, 280px);
  font-size: 30px;
  transform: rotate(-2deg);
}

.hp-preview .hero-shot .arrow {
  overflow: visible;
}

.hp-preview .hero-shot .arrow path,
.hp-preview .hero-shot .arrow polyline {
  stroke-width: 3px;
}

/* Calendly quote */
.hp-preview .source-quote-wrap .anno {
  right: -228px;
  top: 34px;
  width: 210px;
  font-size: 30px;
  transform: rotate(-2deg);
}

.hp-preview .source-quote-wrap .arrow {
  right: -58px;
  top: 58px;
  width: 118px;
  height: 78px;
}

.hp-preview .source-quote-wrap .arrow path,
.hp-preview .source-quote-wrap .arrow polyline {
  stroke-width: 3px;
}

/* Differentiators */
.hp-preview .diff-shot {
  position: relative;
  overflow: visible;
}

.hp-preview .diff-shot .hl {
  left: var(--diff-hl-left, 0);
  top: var(--diff-hl-top, 75px);
  width: var(--diff-hl-width, 638px);
  height: var(--diff-hl-height, 270px);
  transform: rotate(-0.6deg);
  border-width: 2.5px;
}

.hp-preview .diff-shot .anno {
  left: var(--diff-anno-left, 2px);
  top: var(--diff-anno-top, 8px);
  width: var(--diff-anno-width, 250px);
  font-size: 30px;
  transform: rotate(-2deg);
}

.hp-preview .diff-shot .arrow {
  left: var(--diff-arrow-left, 56px);
  top: var(--diff-arrow-top, 52px);
  width: var(--diff-arrow-width, 74px);
  height: var(--diff-arrow-height, 172px);
}

.hp-preview .diff-shot .arrow path,
.hp-preview .diff-shot .arrow polyline {
  stroke-width: 3.4px;
}

/* Features grid dashboard shot */
.hp-preview .features-shot {
  position: relative;
  overflow: visible;
}

.hp-preview .features-shot .hl {
  left: var(--features-hl-left, auto);
  top: var(--features-hl-top, auto);
  width: var(--features-hl-width, auto);
  height: var(--features-hl-height, auto);
  transform: rotate(-0.4deg);
}

.hp-preview .features-shot .anno {
  font-size: 40px;
  text-align: right;
  transform: rotate(-2deg);
}

.hp-preview .features-shot .arrow {
  overflow: visible;
}

.hp-preview .features-shot .arrow path,
.hp-preview .features-shot .arrow polyline {
  stroke-width: 2.4px;
}

/* Pricing */
.hp-preview .price-wrap .anno {
  font-size: 46px;
}

.hp-preview .amount-wrap svg.circle {
  color: var(--anno-blue);
}

.hp-preview .amount-wrap svg.circle ellipse {
  stroke-width: 3.3px;
}