/* Callouts, the marketing page, fourth build. Every colour, face, size and gap below is a
   token from tools/ui/tokens.css, on the product's own names that follow the mode. The page
   ground is --app-ground, a raised surface is --app-pane. No tag hue appears here: the four
   note colours live only in the pictures, on real notes. */

:root{
  /* the page's measures, each built from a spacing step */
  --page-max:     calc(var(--space-18) * 20);  /* 1440 */
  --m:            var(--space-18);             /* 72, the outer margin at 1440 */
  --g:            var(--space-6);              /* 24, the gutter */
  --beat-section: calc(var(--space-8) * 4);    /* 128 between sections */
  --beat-head:    calc(var(--space-8) * 2);    /* 64 from a head to its picture */
  --beat-band:    calc(var(--space-12) * 2);   /* 96 inside the one flipped band */
  --nav-h:        calc(var(--space-8) * 2);    /* 64 */
  --bleed:        calc(var(--m) + max(0px, (100vw - var(--page-max)) / 2));
}
[data-appearance="dark"]{ color-scheme: dark; }
[data-appearance="light"]{ color-scheme: light; }

*, *::before, *::after{ box-sizing: border-box; }
html{ overflow-x: clip; }
body{
  margin: 0;
  background: var(--app-ground);
  color: var(--app-ink);
  font: var(--text-site-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure, ol{ margin: 0; padding: 0; }
img{ display: block; }
a{ color: inherit; }

.wrap{ max-width: var(--page-max); margin-inline: auto; padding-inline: var(--m); }
.grid{ display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }

.skip{
  position: absolute; left: var(--space-4); top: calc(-1 * var(--space-18));
  background: var(--primary-fill); color: var(--primary-ink);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-key);
  font: var(--text-site-note); text-decoration: none; z-index: 2;
}
.skip:focus{ top: var(--space-4); }

/* type by role */
.title{ font: var(--text-site-title); color: var(--app-ink); text-wrap: balance; }
.body{ font: var(--text-site-body); color: var(--app-ink-2); text-wrap: pretty; }
.note{ font: var(--text-site-note); color: var(--app-ink-2); text-wrap: pretty; }
.mono{ font: var(--text-mono); color: var(--app-ink-label); }
.label{
  font: var(--text-label); letter-spacing: var(--track-mark); text-transform: uppercase;
  color: var(--app-ink-label);
}

/* the one ask, filled on the accent */
.button{
  display: inline-flex; align-items: center;
  font: var(--text-site-note); font-weight: 600;
  background: var(--primary-fill); color: var(--primary-ink);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-key);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-state) var(--ease-standard), opacity var(--dur-state) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine){ .button:hover{ background: var(--primary-hover); } }
.button:active{ background: var(--primary-pressed); transition: none; }   /* the press lands at once, and the release eases back over --dur-state */
.button-small{ padding: var(--space-2) var(--space-4); }
:is(a, button, input):focus-visible{ outline: var(--state-focus-w) solid var(--focus-ring); outline-offset: var(--state-focus-w); }
button.button{ border: 0; cursor: pointer; }
button.button:disabled{ cursor: default; opacity: 0.6; }

/* the waitlist: the email and the one ask on one line, wrapping on a phone; what happened is said under them */
.sr-only{ position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.waitlist{ display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: 32rem; }
.waitlist input[type="email"]{
  flex: 1 1 14rem; min-width: 0;
  font: var(--text-site-note); color: var(--app-ink); background: var(--app-well);
  padding: var(--space-3) var(--space-4); border: 0; border-radius: var(--radius-key);
  box-shadow: inset 0 0 0 var(--rule) var(--app-ink-label);
  transition: box-shadow var(--dur-state) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine){ .waitlist input[type="email"]:hover{ box-shadow: inset 0 0 0 var(--rule) var(--app-ink-2); } }
.waitlist input[type="email"]::placeholder{ color: var(--app-ink-label); }
.waitlist .wl-trap{ position: absolute; left: -100vw; width: 1px; height: 1px; opacity: 0; }
.wl-said{ flex-basis: 100%; min-height: 0; }
.wl-said:empty{ display: none; }
.waitlist.is-in input, .waitlist.is-in button{ display: none; }
.waitlist.is-in .wl-said{ color: var(--app-ink); }
/* a word under the field fades in ("Joining", or what went wrong); the joined line arrives, as the field and the ask leave */
.wl-said:not(:empty){ animation: m-fade var(--dur-state) var(--ease-standard); }
.waitlist.is-in .wl-said{ animation: m-arrive var(--dur-view) var(--ease-enter); }

/* a picture box. One rule for every picture on the page: the picture fills its box edge to edge and
   the box's radius clips it, so its corners are the box's 12 and no inner radius can disagree with the
   outer. Every picture is a capture with a ground of its own (Cal.com's grey, the app's pane, a white
   page), so a padded mat puts a second ground round the first: the graphite band pair-before and
   pair-after carried until 29 Sep, 13 top and bottom against 24 at the sides, a square page inside a
   round box. A card's picture fills the card's top the same way: its top corners are the card's 12 and
   it meets the words square, under one hairline. */
.pic{ position: relative; overflow: hidden; background: var(--app-pane); border-radius: var(--radius-window); }
.pic img{ width: 100%; height: 100%; object-fit: cover; }
.pic::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--app-rule);
}

/* 0 · nav */
.nav{ display: flex; align-items: center; gap: var(--space-6); height: var(--nav-h); }
/* his read, twice: the header sat tight to the window's top. 24 above the 64 row puts the wordmark's centre
   56 down, with the same 24 of air under the row before the hero's own top (29 Sep). */
header.nav{ margin-top: var(--space-6); }
.nav-mark{ display: flex; color: var(--app-ink); }
.wordmark{ display: block; height: calc(var(--space-1) * 5); width: auto; }
.nav-links{ display: flex; gap: var(--space-6); margin-left: auto; margin-right: var(--space-6); }
.nav-links a{ font: var(--text-site-note); color: var(--app-ink-2); text-decoration: none; transition: color var(--dur-state) var(--ease-standard); }
@media (hover: hover) and (pointer: fine){ .nav-links a:hover{ color: var(--app-ink); } }

/* 1 · hero, 5/7: the words, 48 of air, then one window from column 6 off the right edge */
/* the hero owns the first screen, nav to foot, so the next section's head never shows above the fold
   (his read, 29 Sep: "we can see the title for the next section still"); the window fills it less 32 a side */
.hero{ padding-block: var(--space-8); align-items: center; min-height: calc(100svh - var(--nav-h) - var(--space-6)); }
.hero-words{ grid-column: 1 / span 5; padding-right: var(--g); }   /* his read, 29 Sep: the words sat tight to the picture. One gutter plus this makes 48 */
.hero-head{ font: var(--text-site-hero); color: var(--app-ink-bright); text-wrap: balance; }
.hero-sub{ margin-top: var(--space-6); font: var(--text-site-body); color: var(--app-ink-2); text-wrap: pretty; }
.ask{ margin-top: var(--space-8); }
.ask .mono{ margin-top: var(--space-3); }
.hero-pic{
  grid-column: 6 / -1;
  margin-right: calc(-1 * var(--bleed));
  border-radius: var(--radius-window) 0 0 var(--radius-window);
  max-height: calc(100svh - var(--nav-h) - var(--space-6) - 2 * var(--space-8));
  container-type: inline-size;
}

/* 2 · before and after, 6/6 */
.pair{ margin-top: var(--beat-section); }
.pair-head{ grid-column: 1 / span 6; }
.pair-line{ grid-column: 1 / span 5; margin-top: var(--space-4); }
.pair-row{ margin-top: var(--beat-head); }
.pair-side{ grid-column: span 6; }
.pair-side .label{ margin-bottom: var(--space-3); }
.pic-pair{ aspect-ratio: 1060 / 716; }   /* the recut's own shape: Teams and Organizations with half a Cal.com gutter of ground on three sides, cut under the second feature line */
.transcript{ list-style: none; margin-top: var(--space-6); }
.transcript li{
  display: grid; grid-template-columns: var(--space-18) minmax(0, 1fr); column-gap: var(--space-4);
  align-items: baseline; font: var(--text-site-note); color: var(--app-ink-2);
}
.transcript li + li{ margin-top: var(--space-3); }

/* 3 · what you get back, the one flipped band, the densest section */
.band{
  margin-top: var(--beat-section); padding-block: var(--beat-band);
  background: var(--app-ground); color: var(--app-ink);
}
.bento{ margin-top: var(--beat-head); row-gap: var(--g); }
.card{
  position: relative; display: flex; flex-direction: column;
  background: var(--app-pane); border-radius: var(--radius-window); overflow: hidden;
}
.card::after{
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--app-rule);
}
.card .pic{ border-radius: 0; }
.card .pic::after{ box-shadow: inset 0 -1px 0 var(--app-rule); }
.card-board{ grid-column: span 8; }
.card-doc{ grid-column: span 4; }
.card-app{ grid-column: span 7; }
.card-rec{ grid-column: span 5; }
.card-board .pic, .card-doc .pic{ height: calc(var(--space-18) * 6); }
.card-app .pic, .card-rec .pic{ height: calc(var(--space-18) * 4); }
.card-board img{ object-position: 0 50%; }
.card-doc img{ object-position: 0 0; }
.card-app img{ object-position: 0 0; }
.card-rec img{ object-position: 50% 64%; }
.card-words{ padding: var(--space-6); }
.card-words .label{ color: var(--app-ink); }
.card-words p{ margin-top: var(--space-2); font: var(--text-site-note); color: var(--app-ink-2); max-width: 52ch; text-wrap: pretty; }

/* 4 · a second reviewer: the head and the paragraph stacked on the left, the picture beside them on the right.
   review-pair.jpg is 1420 wide, so it draws at most 710 (two pixels a point on a 2x screen): spread across the whole
   column it was drawn at about 2.1 times its pixels and went soft. */
.review{ margin-top: var(--beat-section); }
.review-head{ grid-column: 1 / span 5; grid-row: 1; }
.review-line{ grid-column: 1 / span 5; grid-row: 2; margin-top: var(--space-6); }
.pic-review{ grid-column: 7 / -1; grid-row: 1 / span 3; align-self: start; width: 100%; max-width: calc(1420px / 2);
  aspect-ratio: 1420 / 844; }
.pic-review img{ object-position: 0 50%; }

/* 5 · close, 7/5, the shortest section */
.close{ margin-top: var(--beat-section); align-items: start; }
.close-words{ grid-column: 1 / span 7; }
.close-words .body{ margin-top: var(--space-4); max-width: 34em; }   /* 17px words, under the 80 a line the MEASURED block holds */
.close-ask{ grid-column: 8 / -1; }
.close-ask .ask{ margin-top: 0; }
.close-ask .note{ margin-top: var(--space-6); }

.foot{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--beat-head); padding-block: var(--space-8);
  border-top: 1px solid var(--app-rule); color: var(--app-ink-2);
}
.foot .wordmark-foot{ height: var(--space-4); }
.foot-mail{ text-decoration: none; transition: color var(--dur-state) var(--ease-standard); }
@media (hover: hover) and (pointer: fine){ .foot-mail:hover{ color: var(--app-ink); } }

/* motion under the hero. motion.js adds .m-on to <html> and .is-in to a [data-enter] block the first
   time it is 15% in view; without the script nothing is hidden. A block rises --motion-travel and fades
   in over --dur-moment; blocks that arrive together go in page order, --stagger apart (the script sets
   --i). Reduce motion sets travel and stagger to zero in tokens.css, so only the fade is left. */
.m-on [data-enter]{
  transition: opacity var(--dur-moment) var(--ease-enter), transform var(--dur-moment) var(--ease-enter);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.m-on [data-enter]:not(.is-in){ opacity: 0; transform: translateY(var(--motion-travel)); }
.m-on [data-enter].is-now{ transition: none; }                            /* on screen when the page opened */
.m-on [data-enter]:focus-within{ opacity: 1; transform: none; }           /* a tab into a block shows it */
@media print{ .m-on [data-enter]:not(.is-in){ opacity: 1; transform: none; } }

/* the review picture's two late parts, laid by motion.js over their own ground and removed once landed */
.review-play{ position: absolute; inset: 0; pointer-events: none; }
.review-play > *{ position: absolute; overflow: hidden; }
.review-play img{ position: absolute; max-width: none; object-fit: fill; }
.rp-layer{ opacity: 0; transition: opacity var(--dur-moment) var(--ease-enter), transform var(--dur-moment) var(--ease-enter); }
.rp-col{ transform: translateY(var(--motion-travel)); }
.rp-rec{ transition-delay: var(--stagger); }
.review-play.is-on .rp-layer{ opacity: 1; transform: none; }

@keyframes m-fade{ from{ opacity: 0; } }
@keyframes m-arrive{ from{ opacity: 0; transform: translateY(var(--motion-travel)); } }

/* between a tablet and 1440: the same twelve columns on a narrower margin */
@media (max-width: 1099px){
  :root{ --m: var(--space-8); }
}

/* a phone: one column, 16 margins, sections 64 apart */
@media (max-width: 759px){
  :root{
    --m: var(--space-4);
    --beat-section: calc(var(--space-8) * 2);
    --beat-head: var(--space-8);
    --beat-band: calc(var(--space-8) * 2);
  }
  .grid{ grid-template-columns: minmax(0, 1fr); }
  .grid > *{ grid-column: 1 / -1; }
  .nav-links{ display: none; }
  .nav .button-small{ margin-left: auto; }
  .hero-words{ padding-right: 0; }
  .hero{ min-height: 0; padding-top: var(--space-6); }   /* 24 over the headline, not 32: at 390 by 844 the window ended at 878 (29 Sep). With this, the ask at 24, the frame at 128 and the note at 15px it ends at 838 */
  .ask{ margin-top: var(--space-6); }   /* 24, the same air as the window gets under the form; at 32 the form sat further from its own sub than the window sat from the form */
  .hero-pic{ margin-top: var(--space-6); margin-right: 0; border-radius: var(--radius-window); max-height: none; }
  .pair-line, .review-line{ margin-top: var(--space-4); }
  .review-head, .review-line, .pic-review{ grid-row: auto; }
  .pic-review{ margin-top: var(--beat-head); }
  .pair-side + .pair-side{ margin-top: var(--space-8); }
  .card-board .pic, .card-doc .pic, .card-app .pic, .card-rec .pic{ height: auto; aspect-ratio: 4 / 3; }
  .close-ask{ margin-top: var(--space-6); }
  .foot{ flex-wrap: wrap; }
}

/* What this page renders, read off the browser by `python3 site/measure.py`, which counts
   characters in line boxes and reads heights off rects. Every number the page states about its
   own render lives here and nowhere else, and `tests/test_the_site_states_what_it_renders.py` runs
   the sweep and goes red when one drifts. Measured 2026-09-29 on the v4 page, 88d6cb9e.

   MEASURED band-heights @1440 = 812 · 842 · 1298 · 378 · 164
       the hero went to 812 on 29 Sep when HERO·WOW made it own the first screen: the window 818 by 748 from the whole frame, the next heading below the fold
       the review went from 808 to 930 on 29 Sep when its picture became the pair alone (1420 by 844), without the list, and to 378 when the picture moved beside the head and paragraph, drawn at most 710 wide so it stays sharp
       the hero went from 824 to 576 on 29 Sep when HERO·MOTION put the scene in a window that fits the first screen, and to 621 when SITE·HERO made it one window again, 818 by 589 with the note docked at its foot; the pair's boxes took their recut's shape, 636 by 430, on the same day
       the five sections' heights at 1440, top to bottom: hero, pair, band, review, close.
   MEASURED prose-longest @1440 = 74
       the longest line a block at the reading size, --text-site-body at 17px, sets; 80 is the ceiling.
   MEASURED headline-longest @1440 = 14
       the headline's longest line in characters; at 1440 it sets five lines of 11 to 14.
   MEASURED prose-over-80 = 3
       blocks with a line past 80 characters at any of eight widths, all 81 at 15px: the close's note at 600, the third transcript line at 1440 and 1920.
   MEASURED widths-that-overflow = 0
       widths from 390 to 1920 where the page scrolls sideways. */