/* usergenerated.app · About page only. Loads after page.css. */

/* Email us: one slim row, label left and address right. It sits in the calendar's slot near the top
   and again as the closing call to action at the bottom (Danny picked version A, 31.10.26). */
main > section:not(.hero):not(.principle).contact { padding-block: var(--s-5); }
.contact__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3) var(--s-5); flex-wrap: wrap; }
main > section > .sheet.contact__row > .index { margin: 0; }
.contact__link { font-size: var(--fs-lead); letter-spacing: var(--tr-lead); }

/* The market: worst-to-best bar chart of what brands pay per 1,000 views */
main > section:not(.hero):not(.principle).mk { padding-block: var(--s-8); }
.mk-thesis { max-width: 20ch; }
.mk-claim { margin-top: var(--s-4); font-size: var(--fs-lead); line-height: var(--lh-lead); letter-spacing: var(--tr-lead); max-width: 46ch; color: var(--ink); }
.mk-fig { margin-top: var(--s-8); }
.mk-cap { font-size: var(--fs-label); color: var(--ink-2); }
.mk-fig .pf-svg { margin-top: var(--s-6); overflow: visible; }  /* the big $57 label rises a few px above the chart box */
.mk-b { fill: #DCDCD5; }
.mk-b--best { fill: var(--brand); }
.mk-b--worst { fill: var(--ink); }
.mk-big { font-size: 56px; font-weight: 600; font-stretch: 125%; letter-spacing: -0.02em; fill: var(--ink); }
.mk-v { font-size: 18px; fill: var(--ink-3); }
.mk-ax { font-size: 18px; fill: var(--ink-2); }
.mk-ax--best { fill: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  main > section:not(.hero):not(.principle).mk { padding-block: var(--s-7); }
  .mk-fig { margin-top: var(--s-7); }
  .pf-phone .mk-big { font-size: 64px; }
  .pf-phone .mk-ax { font-size: 26px; }
}

/* The big picture: a pull quote */
.qt { margin: var(--s-6) 0 0; }
.qt__text { max-width: 24ch; text-indent: -0.4em; }
.qt__by { margin-top: var(--s-5); font-size: var(--fs-label); color: var(--ink-2); }
.qt__now { margin-top: var(--s-7); }