/* 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__in--split { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-5); }
.cover__in--split .cover__logo { flex: none; width: clamp(52px, 9vw, 132px); height: auto; margin-top: var(--s-6); }
.cover__in--split > :not(.cover__logo) { min-width: 0; }
@media (max-width: 340px) { .cover__in--split .cover__logo { width: 44px; } }
.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-8) var(--cal-air); } /* was s-6 above the old "01 Book a call" label row */
.book__head { display: flex; justify-content: flex-end; align-items: baseline; gap: var(--s-5); } /* holds only the visually hidden heading now (31.10.26) */
.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. */
/* Match the content inset; the shared footer styles otherwise remove it. */
.foot .foot__row { padding-inline: var(--inset); }
.foot__row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3) var(--s-5); padding-top: var(--s-5); font-size: var(--fs-label); color: var(--ink-2); }
.foot__row > * { min-width: 0; }
.foot__row a { overflow-wrap: anywhere; }
.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-7) 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; }
}

/* Top strip (2026-10-31): the system nav, holding only About at the top right. Not sticky: one link
   doesn't earn a bar that follows you down the page. */
.nav { position: relative; }
.nav__about { grid-column: -4 / -1; justify-self: end; font-size: var(--fs-label); color: var(--ink); padding-block: var(--s-3); }

/* Confession: "We underpaid our creators" (version A, 31.10.26). Two 100% bars: who brought the views, who got the money. */
.un-lead { margin-top: var(--s-5); max-width: 44ch; }
.un-viz { margin-top: var(--s-8); }
.un-note { margin-top: var(--s-7); font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--tr-lead); max-width: 48ch; }
.un-note + .un-note { margin-top: var(--s-4); }
.un-note--quiet { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); max-width: 64ch; }
.un-stack { display: grid; gap: var(--s-8); }
.un-srow { display: grid; grid-template-columns: minmax(180px, 26%) 1fr; gap: var(--s-5); align-items: center; }
.un-bar { display: flex; height: 76px; gap: 3px; }
.un-seg { position: relative; width: var(--w); min-width: 8px; border-radius: 4px; background: rgb(11 11 11 / 0.07); display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 12px; overflow: hidden; }
.un-seg b { font-size: clamp(20px, 2.1vw, 32px); font-stretch: var(--wdth-display); font-weight: var(--w-display); letter-spacing: var(--tr-statement); line-height: 1; }
.un-seg i { font-style: normal; font-size: 13px; line-height: 1.3; color: var(--ink-2); margin-top: 4px; white-space: nowrap; }
.un-seg.is-top { background: var(--brand); }
.un-seg.is-top i { color: var(--band-ink-2); }
.un-seg.is-low { background: rgb(11 11 11 / 0.2); }
.un-seg.is-cut { background: var(--ink); color: var(--paper); }
.un-seg.is-cut i { color: rgb(250 250 247 / 0.7); }
.un-seg.is-thin { padding: 0; overflow: visible; }
.un-seg.is-narrow .un-out { display: none; }
.un-seg.is-thin .un-out { position: absolute; top: calc(100% + 8px); right: 0; white-space: nowrap; font-size: 13px; color: var(--ink-2); }
.un-seg.is-thin .un-out b { font-size: 13px; font-stretch: var(--wdth-text); font-weight: var(--w-strong); letter-spacing: 0; color: var(--ink); }
@media (max-width: 760px) {
  .un-srow { grid-template-columns: 1fr; gap: var(--s-3); }
  .un-bar { height: 64px; gap: 2px; }
  .un-seg { padding: 8px 6px; }
  .un-seg b { font-size: 20px; }
  .un-seg i { font-size: 12px; }
  /* Narrow segment (bottom half on the money bar): label moves under the bar on phones. */
  .un-seg.is-narrow { padding: 0; overflow: visible; }
  .un-seg.is-narrow > b, .un-seg.is-narrow > i { display: none; }
  .un-seg.is-narrow .un-out { display: block; position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; color: var(--ink-2); }
  .un-seg.is-narrow .un-out b { font-size: 13px; font-stretch: var(--wdth-text); font-weight: var(--w-strong); letter-spacing: 0; color: var(--ink); }
}
@media (max-width: 360px) {
  /* 320px phones: keep labels at the 11px floor and give them the segment's full width. */
  .un-seg { padding-inline: 2px; }
  .un-seg i { font-size: 11px; }
  .un-seg.is-cut i { white-space: normal; -webkit-hyphens: manual; hyphens: manual; } /* Middle-men breaks at its soft hyphen */
}

/* The business (home): design A, picked by Danny 31.10.26. Text column left, area-true squares right: big = $16M ad value, small = $1.1M paid, small side = 26.44% of big side. */
.bza-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s-9); align-items: end; }
.bza-text .pf-src { margin-top: var(--s-8); max-width: 40ch; }
.bza-fig { margin: 0; container-type: inline-size; }
.bza-fig figcaption { margin-bottom: var(--s-5); }
.bza-pair { display: flex; align-items: flex-end; gap: var(--s-5); }
.bza-big { flex: none; width: 72cqw; aspect-ratio: 1; background: var(--brand); border-radius: 6px; padding: var(--s-6); display: flex; flex-direction: column; }
.bza-big b, .bza-small b { font-stretch: var(--wdth-display); font-weight: var(--w-display); letter-spacing: var(--tr-display); line-height: 1; }
.bza-big b { font-size: clamp(64px, 7.5vw, 120px); }
.bza-big span { margin-top: var(--s-3); font-size: var(--fs-label); color: var(--band-ink-2); max-width: 22ch; }
.bza-small { display: flex; flex-direction: column; align-items: flex-start; }
.bza-small i { order: 3; margin-top: var(--s-4); display: block; width: calc(72cqw * 26.4426 / 100); aspect-ratio: 1; background: var(--ink); border-radius: 3px; }
.bza-small b { font-size: var(--fs-statement); }
.bza-small span { margin-top: var(--s-2); font-size: var(--fs-label); color: var(--ink-2); }
.motion .bza-big { transform: scale(0.2644); transform-origin: left bottom; transition: transform 1400ms cubic-bezier(0.16, 1, 0.3, 1) 400ms; }
.motion .bza-big > * { opacity: 0; transition: opacity 500ms 1300ms; }
.motion .is-in .bza-big { transform: none; } .motion .is-in .bza-big > * { opacity: 1; }
@media (max-width: 760px) {
  .bza-wrap { grid-template-columns: 1fr; row-gap: var(--s-8); }
  .bza-text .pf-src { display: none; }
  .bza-big { width: 70cqw; padding: var(--s-4); } .bza-big b { font-size: 48px; }
  .bza-small i { width: calc(70cqw * 26.4426 / 100); } .bza-small b { font-size: 26px; } .bza-small span { font-size: 12px; }
  .bza-fig::after { content: "Content Rewards, all 75 live campaigns, counted Oct 30, 2026. TikTok ads at the $9.16 average CPM (WebFX, 2026 benchmarks)."; display: block; margin-top: var(--s-6); font-size: 12px; color: var(--ink-3, #8a8a85); }
}

/* The potential (home, draft 31.10.26): placeholder until the data is in. */
/* The potential (design A, 31.10.26): a launch timeline. Solid to Day 109 (median days, to scale), then dashed to the
   year-one ceiling of the best creator-led apps (not to scale). Phones: the track turns vertical. */
.pot-fig { margin: var(--s-9) 0 0; }
.pot-track { position: relative; height: 230px; border-bottom: 4px solid rgb(11 11 11 / 0.1); }
.pot-fill { position: absolute; left: 0; bottom: -4px; height: 4px; width: calc(var(--w) * 100%); background: var(--brand); }
.pot-dash { position: absolute; left: calc(var(--w) * 100%); right: 0; bottom: -4px; height: 4px; background: repeating-linear-gradient(90deg, var(--band-ink-2) 0 10px, transparent 10px 20px); }
.pot-m { position: absolute; left: calc(var(--x) * 100%); bottom: -13px; display: flex; flex-direction: column-reverse; align-items: flex-start; transform: translateX(-11px); }
.pot-dot { width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 4px solid var(--ink); }
.pot-m.is-hot .pot-dot { background: var(--brand); width: 30px; height: 30px; margin-bottom: -4px; }
.pot-m b { margin-bottom: var(--s-4); font-size: clamp(32px, 4vw, 64px); font-stretch: var(--wdth-display); font-weight: var(--w-display); letter-spacing: var(--tr-display); line-height: 1; white-space: nowrap; }
.pot-m b small { font-size: var(--fs-label); font-stretch: var(--wdth-text); font-weight: 400; letter-spacing: 0; color: var(--ink-2); margin-left: 4px; }
.pot-m.is-soft b { font-size: var(--fs-statement); color: var(--ink-2); }
.pot-m.is-hot b { font-size: clamp(64px, 8vw, 128px); }
.pot-m em { order: 2; margin-bottom: var(--s-2); font-style: normal; font-size: var(--fs-label); color: var(--ink-2); white-space: nowrap; }
.pot-m.is-hot em { color: var(--ink); font-weight: var(--w-strong); }
.pot-m.is-end { align-items: flex-end; transform: translateX(calc(-100% + 15px)); }
.pot-cap { margin-top: var(--s-7); font-size: var(--fs-label); color: var(--ink-2); max-width: 70ch; }
.pot-fig + .pf-src { margin-top: var(--s-4); }
.motion .pot-fill { transform: scaleX(0); transform-origin: left; transition: transform 1600ms cubic-bezier(0.16, 1, 0.3, 1) 300ms; }
.motion .pot-fig.is-in .pot-fill { transform: none; }
@media (max-width: 760px) {
  .pot-track { height: auto; border-bottom: 0; border-left: 4px solid rgb(11 11 11 / 0.1); margin-left: 11px; padding-left: 28px; display: grid; row-gap: var(--s-7); }
  /* Rows have different heights, so the solid part is drawn per step (Launch to $1K to $10K) instead of by --w. */
  .pot-fill { display: none; }
  .pot-dash { left: -4px; top: 0; bottom: 0; right: auto; width: 4px; height: auto; background: repeating-linear-gradient(180deg, var(--band-ink-2) 0 10px, transparent 10px 20px); }
  .pot-m:not(.is-hot):not(:nth-last-child(2))::after { content: ""; position: absolute; left: -32px; top: 11px; width: 4px; height: calc(100% + var(--s-7)); background: var(--brand); }
  .pot-dot { z-index: 1; }
  .motion .pot-m::after { transform: scaleY(0); transform-origin: top; transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1) 300ms; }
  .motion .pot-fig.is-in .pot-m::after { transform: none; }
  .motion .pot-fig.is-in .pot-m:nth-of-type(2)::after { transition-delay: 900ms; }
  .pot-m, .pot-m.is-end { position: relative; left: auto; bottom: auto; transform: none; flex-direction: column; align-items: flex-start; }
  .pot-m em { order: 1; margin: 0 0 var(--s-2); font-size: 12px; white-space: normal; }
  .pot-m b { order: 2; margin: 0; font-size: 40px; } .pot-m.is-hot b { font-size: clamp(44px, 15vw, 64px); } .pot-m.is-soft b { font-size: 20px; } .pot-m b small { font-size: 12px; }
  .pot-dot { position: absolute; left: -45px; top: 0; } .pot-m.is-hot .pot-dot { left: -49px; margin: 0; }
}

/* Closing CTA (31.10.26): a volt band after Why us; the button goes back up to the calendar. */
.principle.end > .sheet { padding-block: var(--s-9); display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; }
.end__t { margin: 0; }
.end__btn { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.end__btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.end__btn > span { margin-left: 6px; }
@media (max-width: 760px) { .principle.end > .sheet { padding-block: var(--s-8); } .end__btn { width: 100%; } }

/* Visually hidden, still read by screen readers (the Book a call heading, 31.10.26: Danny dropped the visible "01 Book a call" label). */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Intro: the case in four lines on a green band, right after the calendar (31.10.26). */
main > section.intro { padding-block: var(--s-9); background: var(--band); color: var(--band-ink); border-top-color: var(--band); }
.intro__title { font-size: var(--fs-statement); font-stretch: var(--wdth-display); font-weight: var(--w-display); line-height: var(--lh-statement); letter-spacing: var(--tr-statement); }
.intro ol { margin-top: var(--s-7); list-style: none; border-top: var(--hairline) solid var(--band-rule); }
.intro li { border-bottom: var(--hairline) solid var(--band-rule); }
.intro li a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-5); padding: var(--s-5) 0; font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--tr-lead); }
.intro li a:hover { background: linear-gradient(var(--ink), var(--ink)) left bottom / 100% 2px no-repeat; }
@media (max-width: 760px) { main > section.intro { padding-block: var(--s-8); } }

/* In-page links glide instead of jumping, and land with air above the section label (Danny, 31.10.26). */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
main h2[id] { scroll-margin-top: var(--s-8); }
main h2[tabindex="-1"]:focus { outline: none; }  /* the centring script focuses the heading it scrolls to */