/* usergenerated.app · one page (Danny, 30.10.26): the calendar is open on arrival, the mission sits below it.
   Builds on the Spec system (tokens.css + site.css, palette Volt). */

/* Cover: the wordmark set as the display line. Smaller floor than the system display so 13 expanded
   letters fit a 360px phone. */
.cover { border-top: 0; }
main > section:not(.hero):not(.principle).cover { padding-block: 0; }
.cover__in { padding-block: var(--s-5) var(--s-7); }
.cover__mark {
  margin-top: var(--s-6);
  font-size: clamp(30px, 8.6vw, 124px);
  font-stretch: var(--wdth-display);
  font-weight: var(--w-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  white-space: nowrap;
}

/* One sentence under the wordmark: what the company is. Placeholder until Danny writes it. */
.cover__line { margin-top: var(--s-5); max-width: 46ch; }
.todo { color: var(--ink-3); }
/* Above the calendar: the pitch as a heading, the call itself as the subheading. */
.book__why { margin-bottom: var(--cal-air); }
.book__title span { display: block; }
/* Tablet and up: the heading runs as one line across the full measure (the line is 26.61em wide; 26.9 leaves a hair of slack). */
.book__why { container-type: inline-size; }
@media (min-width: 761px) {
  .book__title { font-size: calc(100cqw / 26.9); white-space: nowrap; }
  .book__title span { display: inline; }
}
.book__sub { margin-top: var(--s-4); }

/* Book: the open calendar sits right under its heading, no rule between them, so the call line reads as its label. */
/* Equal air around the calendar: subheading to calendar, calendar to rule, rule to band. Cal's own footer
   (the Cal.com mark) takes 80px under the booker, so 80px is the gap everywhere. */
.book { --cal-air: calc(var(--s-8) + var(--s-4)); }
main > section:not(.hero):not(.principle).book { padding-block: var(--s-6) var(--cal-air); }
.book__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-5); margin-bottom: var(--s-6); }
.book__plate {
  position: relative;
  min-height: 560px;
  border-bottom: var(--hairline) solid var(--rule);
}
#calendar { position: relative; z-index: 1; width: 100%; }
#calendar iframe { display: block; width: 100%; border: 0; }
.book__wait {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: var(--fs-label); color: var(--ink-3);
}
.book__wait[hidden] { display: none; }
.book__fallback { margin-top: var(--s-5); font-size: var(--fs-body); }

/* Mission: the one volt band. The first sentence is the headline; the rest is reading text at the normal width. */
.mission__head { grid-column: 4 / span 8; max-width: 22ch; }
.mission__body { grid-column: 4 / span 6; margin-top: var(--s-6); font-size: var(--fs-lead); font-stretch: var(--wdth-text); line-height: 1.45; letter-spacing: var(--tr-lead); max-width: 48ch; }
.mission__body p + p { margin-top: var(--s-4); }
.mission__end { font-weight: var(--w-strong); }

/* Why us: one line, then three numbers set like a spec table. */
.why__title { margin-top: var(--s-6); max-width: 24ch; }
.why__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s-8); border-top: var(--hairline) solid var(--rule); }
.why__stat { display: flex; flex-direction: column; padding: var(--s-6) var(--s-5) 0; }
.why__stat:first-child { padding-left: 0; }
.why__stat + .why__stat { border-left: var(--hairline) solid var(--rule); }
.why__stat dd {
  order: -1;
  font-size: clamp(48px, 6.4vw, 104px);
  font-stretch: var(--wdth-display);
  font-weight: var(--w-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
.why__stat dt { margin-top: var(--s-4); font-size: var(--fs-label); color: var(--ink-2); }

/* Motion (only when html.motion is set, so text never hides without JS or with reduced motion):
   text rises 28px and fades in, staggered within each section; the eased curve settles softly. */
.motion .rise { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease) var(--d, 0ms), transform 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms); }
.motion .rise.is-in { opacity: 1; transform: none; }

/* Footer: one line. */
.foot__row { display: flex; justify-content: space-between; gap: var(--s-5); padding-top: var(--s-5); font-size: var(--fs-label); color: var(--ink-2); }
.foot__row a:hover { color: var(--ink); }

@media (max-width: 760px) {
  .cover__mark { margin-top: var(--s-5); }
  .cover__in { padding-block: var(--s-4) var(--s-6); }
  /* Phone gaps, measured at 390px: sub to month 60, last row to rule 58, rule to band 60. The extra 12px under
     the rule matches the air Cal keeps inside its own frame above the month. */
  main > section:not(.hero):not(.principle).book { padding-block: var(--s-5) calc(var(--cal-air) + var(--s-3)); }
  .book { --cal-air: var(--s-7); }
  /* Phones get Cal's two-step view (short month grid; times open on their own screen), so the loading floor
     sits below the grid height (about 365 to 425px) and no empty band is left under the calendar. */
  .book__plate { margin-inline: calc(var(--inset) * -1); min-height: 320px; }
  .mission__head, .mission__body { grid-column: 1 / -1; }
  .why__stats { grid-template-columns: 1fr; margin-top: var(--s-7); }
  .why__stat, .why__stat:first-child { padding: var(--s-5) 0; }
  .why__stat + .why__stat { border-left: 0; border-top: var(--hairline) solid var(--rule); }
}

/* Proof sections 04-06 (Danny approved 30.10.26). Same system: ink on paper, hairlines, display numbers; volt stays for the band and buttons. */
.pf-title { margin-top: var(--s-6); max-width: 22ch; }
.pf-fig { margin-top: var(--s-8); }
.pf-fig figcaption { margin-top: var(--s-4); }
.pf-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pf-svg text { font-family: var(--font-sans); }
.pf-phone { display: none; }
.pf-line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pf-wash { fill: var(--brand); }
.pf-grid { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pf-base { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pf-dot { fill: var(--ink); stroke: var(--paper); stroke-width: 3; }
.pf-tick { font-size: 15px; fill: var(--ink-2); }
.pf-val { font-size: 22px; fill: var(--ink); font-weight: var(--w-strong); }
.pf-bar { fill: var(--brand); }
.pf-bar.is-hot { fill: var(--ink); }
.pf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); margin-top: var(--s-8); }
.pf-mini figcaption { margin-bottom: var(--s-5); }
.pf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--s-8); border-top: var(--hairline) solid var(--rule); }
.pf-stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-stat { display: flex; flex-direction: column; padding: var(--s-6) var(--s-5) 0; }
.pf-stat:first-child { padding-left: 0; }
.pf-stat + .pf-stat { border-left: var(--hairline) solid var(--rule); }
.pf-stat dd { order: -1; font-size: clamp(44px, 5.4vw, 88px); font-stretch: var(--wdth-display); font-weight: var(--w-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); }
.pf-stat dt { margin-top: var(--s-4); font-size: var(--fs-label); color: var(--ink-2); max-width: 30ch; }
.pf-src { margin-top: var(--s-7); font-size: 12px; color: var(--ink-3); max-width: 90ch; }
.pf-bars { margin-top: var(--s-8); display: grid; gap: var(--s-6); }
.pf-row { display: grid; grid-template-columns: minmax(180px, 26%) 1fr auto; gap: var(--s-5); align-items: center; }
.pf-lab { font-size: var(--fs-label); color: var(--ink-2); }
.pf-track { height: 40px; }
.pf-hb { display: block; height: 100%; min-width: 4px; background: var(--ink); border-radius: 0 4px 4px 0; }
.pf-hb.is-hot { background: var(--brand); }
.pf-num { font-size: clamp(32px, 3.6vw, 56px); font-stretch: var(--wdth-display); font-weight: var(--w-display); letter-spacing: var(--tr-display); line-height: 1; min-width: 4.2ch; text-align: right; }
.pf-num small { font-size: var(--fs-label); font-stretch: var(--wdth-text); color: var(--ink-2); letter-spacing: 0; margin-left: 4px; }
.pf-cta { margin-top: var(--s-8); font-size: var(--fs-lead); }
.pf-split { margin-top: var(--s-8); display: grid; gap: var(--s-5); }
.pf-split__cap { margin-bottom: var(--s-2); }
.motion .pf-hb { transform-origin: left; transform: scaleX(0); transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1) 300ms; }
.motion .is-in .pf-hb { transform: none; }
.motion .pf-split .pf-hb + .pf-hb, .motion .pf-split .pf-row + .pf-row .pf-hb { transition-delay: 600ms; }
@media (max-width: 760px) {
  .pf-desk { display: none; }
  .pf-phone { display: block; }
  .pf-phone .pf-tick { font-size: 24px; }
  .pf-phone .pf-val { font-size: 28px; }
  .pf-mini .pf-tick { font-size: 24px; }
  .pf-mini .pf-val { font-size: 32px; }
  .pf-pair { grid-template-columns: 1fr; gap: var(--s-7); }
  .pf-stats, .pf-stats--2 { grid-template-columns: 1fr; margin-top: var(--s-7); }
  .pf-stat, .pf-stat:first-child { padding: var(--s-5) 0; }
  .pf-stat + .pf-stat { border-left: 0; border-top: var(--hairline) solid var(--rule); }
  .pf-row { grid-template-columns: 1fr auto; }
  .pf-lab { grid-column: 1 / -1; }
  .pf-track { height: 28px; }
}