/* Hand-written callout notes (Hero, Features, Install). Injected by js/callouts.js.
   Paper: "Enhancements review" page, layers "Hand note · Hero / Features / Install". */
:root{--co:#6EE05A;--co-on:#8DFF78;--co-glow-a:#6EE05A;--co-glow-b:#6EE05A99;--co-ring:#6EE05A;--co-ring-glow:#6EE05A73}
:root[data-theme="light"]{--co:#2F9E3A;--co-on:#23A83A;--co-glow-a:#4ADE8099;--co-glow-b:#2F9E3A66;--co-ring:#2F9E3A;--co-ring-glow:#2F9E3A73}

.callout-slot{position:absolute;z-index:3;pointer-events:none}
.callout{all:unset;box-sizing:border-box;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start;gap:2px;cursor:pointer;color:var(--co);font-family:"Caveat",system-ui,sans-serif;font-weight:500;-webkit-tap-highlight-color:transparent}
.callout:focus-visible{outline:2px solid var(--co);outline-offset:4px;border-radius:4px}
.callout__rot{display:flex;flex-direction:column;gap:2px;rotate:-3deg;transform-origin:50% 50%}
.callout__text{display:block;width:max-content;font-size:22px;line-height:24px;color:var(--co);white-space:nowrap}
.callout__line{display:block;height:2px;width:100%;flex-shrink:0;border-radius:1px;background:var(--co)}
.callout__arrow{display:block;flex-shrink:0;width:44px;height:40px;margin-left:var(--co-arrow,60px);overflow:visible}
.callout__arrow path{fill:none;stroke:var(--co);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.callout__arrow--l{display:none}

/* per-note arrow offset (Paper marginLeft) */
.callout-slot--hero{--co-arrow:60px}
.callout-slot--install{--co-arrow:6px}
.callout-slot--footer{--co-arrow:60px}
.callout-slot--install .callout__arrow--r{display:none}
.callout-slot--install .callout__arrow--l{display:block}

/* glow pulse: OFF = as drawn, ON = glow on text and underline. ~2.4s ease-in-out, forever */
@keyframes co-text{0%,100%{color:var(--co);text-shadow:none}50%{color:var(--co-on);text-shadow:0 0 6px var(--co-glow-a),0 0 18px var(--co-glow-b)}}
@keyframes co-line{0%,100%{box-shadow:none}50%{box-shadow:0 0 6px var(--co-glow-a),0 0 14px var(--co-glow-b)}}
.callout__text{animation:co-text 2.4s ease-in-out infinite}
.callout__line{animation:co-line 2.4s ease-in-out infinite}
:root[data-theme="light"] .callout{--co-glow-a:#4ADE8099;--co-glow-b:#2F9E3A66}

/* Features: under the demo window at the LEFT (owner pin, Paper "Round 2 final"), arrow above the text pointing up into it, never past the window edge */
.callout-slot.callout-slot--features{position:static;display:flex;justify-content:flex-start;width:100%;margin-top:8px;padding-left:64px}
.callout-slot.callout-slot--features .callout{align-items:flex-start;margin-left:0}
.callout-slot--features .callout__arrow{margin-left:0}
.callout-slot--features .callout__rot{rotate:-1.5deg}
@media (max-width:599px){.callout-slot.callout-slot--features{padding-left:24px}}

/* ---- Desktop placement (Paper 1440): note straddles the target edge ---- */
@media (min-width:1200px){
  .callout-slot--hero{bottom:calc(100% + 6px);right:164px}
  .callout-slot--install{top:63px;left:772px}   /* Paper Feedback 8B: note on the right of the card, same height as before (level with "Install") */
  .install__card{position:relative}
}

/* ---- Tablet + phone: each note sits in its own added space ABOVE its target, arrow pointing down at it ---- */
@media (max-width:1199px){
  .callout-slot{position:static;display:flex;justify-content:flex-end}
  .callout-slot--hero{height:74px;padding-right:24px}
  .callout-slot--install{height:80px;margin-top:var(--co-install-mt,-18px);padding-right:28px}
  .callout-slot--hero,.callout-slot--install,.callout-slot--footer{--co-arrow:60px}
  .callout-slot--install .callout__arrow--r{display:block}
  .callout-slot--install .callout__arrow--l{display:none}
  .callout-slot .callout{align-self:flex-start;margin-top:0}
  .callout-slot{align-items:flex-start}
  .callout-slot .callout{margin-left:auto}
}
@media (max-width:599px){
  .callout__text{font-size:20px;line-height:22px}
  .callout-slot--hero{height:72px;padding-right:8px;--co-arrow:56px}
  .callout-slot--install{height:78px;padding-right:12px;--co-install-mt:-30px;--co-arrow:6px}
  .callout-slot--install .callout__arrow--r{display:none}
  .callout-slot--install .callout__arrow--l{display:block}
}
@media (prefers-reduced-motion:reduce){
  .callout__text,.callout__line{animation:none}
}

/* Facts + demo-note spacing (Paper, all viewports): Facts 48/48, demo note 16 top / 48 bottom (phone 12 / 28). Two classes so these beat scale90.css, which loads before this file. */
.facts.facts{padding-top:48px;padding-bottom:48px}
.demo-note.demo-note{padding-top:16px;padding-bottom:48px}
@media (max-width:599px){
  .demo-note.demo-note{padding-top:12px;padding-bottom:0}
}

/* phone (owner 2026-10-30): no hand notes on Features ("try it yourself") and Install ("super simple, four clicks"); the hero and footer notes stay */
@media (max-width:599px){.callout-slot.callout-slot--features,.callout-slot.callout-slot--install{display:none}}

/* Footer note (Paper p-O-2 "Footer · art inside the lines"): sits INSIDE the horizon art on every viewport, arrow pointing at the AMZN marker.
   Left edge is a share of the art width (Paper 614/1080 desktop, 415/730 tablet, 110/374 phone); the arrow is the small Paper arrow (25x23), 87px in from the text start. */
.callout-slot.callout-slot--footer{position:absolute;z-index:3;top:32px;left:56.85%;right:auto;bottom:auto;height:auto;padding:0;margin:0;display:block;transition:opacity .25s}
.callout-slot--footer .callout{margin-left:0}
.callout-slot--footer .callout__arrow{width:25px;height:23px;margin-left:87px}
.map-wrap:has(.map.is-playing) .callout-slot--footer{opacity:0;pointer-events:none}
@media (max-width:599px){.callout-slot.callout-slot--footer{left:29.4%}}