/* Channelsmith landing: the one section the landing kit has no template for ("One real episode"), in the Daylight
   look (loaded after /daylight.css by postbuild.py). Uses the Daylight tokens (--dl-*) and the product wash (--wash). */
html[data-theme="bento"] .ep { padding-top: 120px; }
html[data-theme="bento"] .ep-head { max-width: 860px; }
html[data-theme="bento"] .ep-head .sub { margin-top: 18px; }
.ep-video { max-width: 960px; margin: 40px auto 0; padding: clamp(10px, 1.6vw, 18px); border-radius: 32px;
  background: radial-gradient(80% 90% at 0% 0%, color-mix(in oklab, var(--wash2, var(--wash)) 28%, #fff), transparent 70%),
              color-mix(in oklab, var(--wash) 10%, #fff); }
.ep-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 22px; background: #0E1030;
  box-shadow: 0 40px 80px -40px rgba(14, 16, 48, .55); }
.ep-video figcaption { margin: 14px 6px 4px; font-size: 15px; line-height: 1.4; color: var(--dl-slate, #5C6180); }
.ep-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.ep-card { padding: 28px clamp(20px, 2.4vw, 32px); border-radius: 28px; background: var(--dl-mist, #F5F6FB); min-width: 0; }
.ep-card .label { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--dl-slate, #5C6180); }
.ep-card .label + .label, .ep-card ol + .label, .ep-card ul + .label { margin-top: 26px; }
.ep-card ol, .ep-card ul { margin: 0; padding: 0; list-style: none; }
.ep-titles li { padding: 10px 0; border-top: 1px solid var(--dl-line, #E6E8F2); font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; color: var(--dl-ink, #0E1030); }
.ep-chap li { display: flex; gap: 14px; padding: 7px 0; border-top: 1px solid var(--dl-line, #E6E8F2); font-size: 16px; color: var(--dl-ink, #0E1030); }
.ep-chap time { flex: none; width: 3.2em; font-variant-numeric: tabular-nums; color: var(--dl-slate, #5C6180); }
.ep-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 2px 10px; padding: 10px 0; border-top: 1px solid var(--dl-line, #E6E8F2); }
.ep-checks li::before { content: ""; grid-row: 1 / span 2; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
  background: var(--dl-open, #17B26A) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ep-checks b { font-size: 16px; font-weight: 600; color: var(--dl-ink, #0E1030); }
.ep-checks span { font-size: 14.5px; line-height: 1.4; color: var(--dl-slate, #5C6180); }
.ep-card .fine { margin: 16px 0 0; font-size: 14px; line-height: 1.45; color: var(--dl-slate, #5C6180); }
.ep-thumbs { max-width: 1040px; margin-left: auto !important; margin-right: auto !important; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0 0; padding: 0; list-style: none; }
.ep-thumbs figure { margin: 0; }
.ep-thumbs img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; }
.ep-thumbs figcaption { margin-top: 8px; font-size: 14px; color: var(--dl-slate, #5C6180); }
.ep-credits { margin-top: 16px; padding: 18px clamp(20px, 2.4vw, 32px); border-radius: 24px; border: 1px solid var(--dl-line, #E6E8F2); }
.ep-credits summary { cursor: pointer; font-weight: 600; font-size: 16px; color: var(--dl-ink, #0E1030); min-height: 40px; display: flex; align-items: center; }
.ep-credits ul { margin: 12px 0 4px; padding: 0 0 0 18px; columns: 2 420px; column-gap: 36px; }
.ep-credits li { break-inside: avoid; margin: 0 0 8px; font-size: 13.5px; line-height: 1.45; color: var(--dl-slate, #5C6180); overflow-wrap: anywhere; }
.ep-credits li a { color: var(--dl-indigo, #3B2DFF); }
.ep-credits p { margin: 8px 0 0; font-size: 13.5px; color: var(--dl-slate, #5C6180); }
@media (max-width: 900px) {
  html[data-theme="bento"] .ep { padding-top: 76px; }
  .ep-grid { grid-template-columns: 1fr; }
  .ep-thumbs { grid-template-columns: 1fr; }
  .ep-video { border-radius: 24px; }
  .ep-video video { border-radius: 16px; }
}
@media (min-width: 560px) and (max-width: 900px) { .ep-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* screenshot slots: a placeholder image says so itself; this only marks the frame around it */
img[src*="slot-"] { outline: 2px dashed rgba(229, 64, 46, .55); outline-offset: -2px; }
.ep-checks li.no::before { background: #B45309; }
/* feature cards: one 16:10 frame for every screenshot at every width (the kit gives the first two cards a taller
   box than the third, and its phone rule lets each image keep its own height); the picture fills it */
html[data-theme="bento"] #features .card .shot,
html[data-theme="bento"] #features .card:nth-child(-n+2) .shot { height: auto; max-height: none; aspect-ratio: 16 / 10; }
html[data-theme="bento"] #features .card .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* short page (owner rule): compact grids on wide screens */
@media (min-width: 1100px) {
  html[data-theme="bento"] #features .cards > .card { grid-column: span 2; }
  html[data-theme="bento"] .docs .dgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ep-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
  .ep-checks { columns: 2; column-gap: 28px; }
  .ep-checks li { break-inside: avoid; }
}