/* Overview canvas. From "herkesesite Artboards.dc.html". */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #dedbd4; color: #161513; font-family: var(--brand-font); }
a { color: #c2410c; }
a:hover { color: #161513; }

.canvas { padding: 80px; display: flex; flex-direction: column; gap: 96px; width: max-content; }
.intro { display: flex; flex-direction: column; gap: 8px; max-width: 900px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 18px; height: 18px; border-radius: 5px; background: #c2410c; }
.brand-name { font-weight: 800; font-size: 22px; }
.title { margin: 0; font-weight: 800; font-size: 48px; line-height: 1.05; }
.lead { margin: 0; font-size: 18px; color: #3b3935; }
.quick ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 16px; }

.group { display: flex; flex-direction: column; gap: 24px; }
.group-head, .tail-head { display: flex; flex-direction: column; gap: 4px; }
.group-title { margin: 0; font-weight: 800; font-size: 30px; }
.group-sub { font-size: 17px; color: #3b3935; }
.row { display: flex; gap: 64px; align-items: flex-start; }
.board { display: flex; flex-direction: column; gap: 10px; }
.tag { align-self: flex-start; font-weight: 800; font-size: 14px; background: #161513; color: #fff; padding: 4px 10px; border-radius: 6px; }
.frame { background: #fff; box-shadow: 0 0 0 1px #c9c4ba; }
.frame.m { width: 390px; }
.frame.d { width: 1280px; }
iframe { display: block; border: 0; }
.frame iframe { width: 100%; }

.tail { display: flex; gap: 96px; align-items: flex-start; }
.tail-col { display: flex; flex-direction: column; gap: 16px; }
.chat-frame { width: 390px; height: 908px; background: transparent; }
.poster-frame { width: 794px; height: 1123px; }

/* On a phone the canvas is too wide to take in; keep the page links easy to reach. */
@media (max-width: 700px) {
  .canvas { padding: 24px; gap: 48px; }
  .title { font-size: 32px; }
}