/* Callouts, the hero scene: one window. Cal.com's pricing page fills its top edge to edge, the
   product's marks drawn over it by hero.js, and the note being made shows on the paper docked
   at its foot, the way the app's window keeps its note list under the picture. The pause key
   sits on that paper, so the page, the marks, the note and the key are one object. v4.css
   places the window (column 6 off the right edge); this file sets what is inside it. Every
   colour, face, size, gap and radius is a token from tools/ui/tokens.css. The four tag hues
   come from the kit's balloons, through hero.js, and land only on the marks and the tag label. */

.hero-pic{ display: flex; flex-direction: column; position: relative; }

/* the frame: the window's width, and a height that keeps the rest view (the frame's whole 757 page px of
   height at the window's shape) between 992 and 1196 page px wide: 757/992 = 76.31cqw, 757/1196 = 63.29cqw.
   Where both allow, it is no shorter than 631 (757 over 1.2), so the camera's move in on a note stays
   near 1.2 times (the camera is cut since HERO·WOW·3; the rule still shapes the one view), and never taller than 757, so no view is drawn past 1:1. It is the one part that
   gives when the window meets the first screen's foot (v4.css), so the sheet always fits whole. */
.hero-frame{ display: block; width: 100%; flex: 0 1 auto; min-height: 0; height: min(76.31cqw, max(631px, 63.29cqw), 757px); }
/* the marks and the cursor: one layer over the picture in page px (hero.js scales it to the view once per
   layout), clipped to the frame. Each mark and the cursor is its own layer with one animation on transform
   and opacity, so the compositor runs the take and the picture is never repainted while it plays. */
.hero-marks-clip{ position: absolute; overflow: hidden; pointer-events: none; }
.hero-marks{ position: absolute; left: 0; top: 0; width: 1440px; height: 757px; transform-origin: 0 0; }
.hero-mark{ position: absolute; overflow: visible; will-change: transform, opacity; }
.hero-cursor{ position: absolute; left: -2px; top: -2px; width: 16px; height: 23px; overflow: visible; transform-origin: 2px 2px; opacity: 0; will-change: transform, opacity; }

/* the paper, docked: no card of its own, one hairline where it meets the page. One padding on all four
   sides, and the key sits in the bottom-right corner at that same inset, the corner of the window you see
   (lined up with the nav's button instead, it floated mid-paper on a window wider than 1440). */
.hero-foot{
  display: flex; align-items: flex-end; gap: var(--space-6);
  padding: var(--space-6);
  background: var(--bg-sheet); color: var(--ink-sheet);
  box-shadow: inset 0 1px 0 var(--rule-light);
}

/* one note at a time, all four stacked in one cell so the window never changes height */
.hero-sheet{ flex: 1; min-width: 0; display: grid; list-style: none; margin: 0; padding: 0; }
.hero-note{ grid-area: 1 / 1; }
.hero-note + .hero-note{ opacity: 0; }
.hero-note-head{ display: flex; align-items: baseline; gap: var(--space-3); }
.hero-note .label, .hero-note .mono{ color: var(--ink-sheet); }
.hero-note-said{ margin-top: var(--space-2); max-width: 32em; font: var(--text-site-head); color: var(--ink-sheet); text-wrap: pretty; }   /* under 80 a line on any window */

/* the key that stops the take (WCAG 2.2.2): round, a glyph and a name, like a video's own.
   Hover and press darken the disc only. */
.hero-pause{
  flex: none; display: grid; place-items: center;
  width: max(var(--space-8), var(--hit-min)); height: max(var(--space-8), var(--hit-min));
  padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--paper-100); color: var(--ink-sheet);
  transition: background-color var(--dur-state) var(--ease-standard);
}
.hero-pause[hidden]{ display: none; }
.hero-pause svg{ width: var(--space-3); height: var(--space-3); fill: currentColor; }
.hero-pause:hover{ background: var(--paper-200); }
.hero-pause:active{ background: var(--paper-300); }
.hero-pause:focus-visible{ outline: var(--state-focus-w) solid var(--focus-ring); outline-offset: var(--state-focus-w); }

@media (max-width: 759px){
  /* a phone: note 1 alone, the view at 1:1 page px on it (sharp at 2x), a strip of the page and not a tall
     soft crop (his read, 29 Sep: "too long or too low resolution"), and one 16 padding on the sheet */
  .hero-frame{ height: calc(var(--space-4) * 8); }   /* 128: Try for free at 556 page px down to note 1's balloon at 669 is 113, so the crop still holds both; 144 put the strip's foot 34 under a 390 by 844 screen */
  .hero-foot{ gap: var(--space-4); padding: var(--space-4); }
  .hero-note-said{ font: var(--text-site-note); }   /* 15/22, the size the app's note list sets; at 17/26 the two lines cost 8 more */
  .hero-note[data-n="2"], .hero-note[data-n="3"], .hero-note[data-n="4"]{ display: none; }
}