/* The public pages, on top of kit.css. */

body { line-height: 1.5; }
svg { display: block; }

h1, h2, h3 { margin: 0; font-weight: 300; }
p { margin: 0; }
.band { --surface: var(--block); padding: 80px 0; }
/* a block on a white band takes the page colour */
.band.white { --surface: var(--page); background: var(--block); }
.h2 { font-size: 40px; line-height: 1.15; }
.lede { font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 640px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 48px; align-items: center; align-self: stretch; }
.cols.top { align-items: start; }
.stack { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.say { font-size: 22px; font-weight: 300; line-height: 1.45; }
.small, small { font-size: 15px; color: var(--muted); }
.job, .invite span { display: flex; flex-direction: column; gap: 3px; }

.hero { background: var(--warm); }
.hero .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-top: 96px; padding-bottom: 88px; }
.hero h1 { font-size: clamp(44px, 7.5vw, 88px); line-height: 1.04; letter-spacing: -2px; max-width: 1000px; }
.hero .lede { font-size: 20px; line-height: 1.5; color: var(--ink); max-width: 620px; }
.hero .pill { margin-top: 8px; }

.sheet { min-width: 0; border-radius: 12px; background: var(--surface); padding: 8px 24px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0 12px; font-size: 24px; line-height: 1.25; }
.seal { flex-shrink: 0; width: 56px; height: 56px; }
.seal circle { fill: var(--gold); }
.seal text { fill: var(--block); font-family: var(--sans); font-size: 34px; }
.row { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 17px; }
.row:first-child { border-top: 0; }
.row > span:last-child { text-align: right; }
.row .k, .row.head { color: var(--muted); }
.row.head { font-size: 15px; }
.row .job { text-align: left; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 2px; align-self: stretch; margin-top: 10px; border-radius: 12px; overflow: hidden; }
.tiles.framed { padding: 2px; background: var(--surface); }
.tile { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 200px; padding: 20px 22px; background: var(--block); }
.tile svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.tile span { display: flex; flex-direction: column; gap: 6px; }
.tile b { font-size: 20px; font-weight: 400; }
.tile span span { font-size: 15px; line-height: 1.45; color: var(--muted); }

.invite { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-radius: 12px; background: var(--surface); }
.invite::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.invite span { font-size: 17px; }
.week { gap: 8px; }

.qa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); column-gap: 48px; align-self: stretch; }
.qa div { display: flex; flex-direction: column; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.qa b { font-size: 19px; font-weight: 400; }
.qa p { line-height: 1.5; color: var(--muted); }

.faq { padding: 56px 0 72px; }
.faq .wrap { max-width: 820px; }
.faq .wrap > div { display: flex; flex-direction: column; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--line); }
.faq .wrap > div:last-child { border-bottom: 0; }
.faq h2 { font-size: 26px; }
.faq p { font-size: 17px; line-height: 1.55; color: var(--muted); }

pre { align-self: stretch; margin: 0; padding: 20px 22px; border-radius: 12px; background: var(--surface); font-family: var(--sans); font-size: 16px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
pre .c { color: var(--muted); }
.tools { display: flex; flex-wrap: wrap; gap: 10px; }
.tools span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 20px; background: var(--surface); font-size: 16px; }
.tools .soon { background: none; border: 1px solid var(--line); color: var(--muted); }

.final { background: var(--warm); }
.final .wrap { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; padding-top: 72px; padding-bottom: 72px; }

/* phones: the teasers of the other pages give way to the links above */
@media (max-width: 620px) {
  .desk { display: none; }
  .hero .wrap { padding-top: 56px; padding-bottom: 56px; gap: 20px; }
  .hero h1 { letter-spacing: -1px; }
  .hero .lede { font-size: 18px; }
  .band { padding: 48px 0; }
  .h2 { font-size: 32px; }
  .cols { gap: 32px; }
  .card-head { font-size: 20px; }
  .tile { min-height: 150px; }
  .final .wrap { padding-top: 48px; padding-bottom: 48px; }
  .final .pill { width: 100%; }
}