/* Tutorials page.
 *
 * Ported out of the page's own <style> block: it set Roboto (the site is
 * Barlow), a literal light palette that could not dark-mode, and a 4px left
 * accent rail on the closing panel - the treatment we do not use.
 */

.asvt{
  max-width:var(--wrap);margin:0 auto;padding:8px 20px 56px;
  font-family:var(--f-body);color:var(--ink);
}
.asvt *{max-width:100%}
.asvt .lead{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:760px;margin:0 0 34px}
.asvt h2{
  font-family:var(--f-body);
  font-size:14px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--brand-on);font-weight:700;margin:44px 0 4px;
}
.asvt .h2sub{color:var(--ink-3);font-size:15.5px;margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--line)}

.asvt .hero{
  background:var(--inverse);border:1px solid var(--inverse-line);
  border-radius:var(--r);overflow:hidden;display:grid;
  grid-template-columns:1.5fr 1fr;margin-bottom:8px;
}
.asvt .hero>*{min-width:0}
.asvt .hero video{width:100%;height:100%;max-width:100%;display:block;background:#000;object-fit:cover;aspect-ratio:16/9}
.asvt .herometa{padding:30px 34px;display:flex;flex-direction:column;justify-content:center;gap:12px;color:var(--inverse-ink)}
.asvt .herometa h3{font-family:var(--f-display);margin:0;font-size:30px;font-weight:700;color:var(--inverse-ink);line-height:1.14}
.asvt .herometa p{margin:0;color:var(--inverse-ink-2);font-size:16.5px;line-height:1.6}

.asvt .grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr))}
.asvt .card{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;background:var(--surface);min-width:0;
}
.asvt .card video{width:100%;height:auto;max-width:100%;display:block;background:#000;aspect-ratio:16/9}
.asvt .meta{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.asvt .meta h3{font-family:var(--f-display);margin:0;font-size:20px;font-weight:700;line-height:1.24;color:var(--ink)}
.asvt .meta h3 .n{color:var(--brand-on);font-weight:700;font-variant-numeric:tabular-nums;margin-right:7px}
.asvt .meta p{margin:0;color:var(--ink-2);font-size:15.5px;line-height:1.55;flex:1}
.asvt .len{font-size:13.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;border-top:1px solid var(--line);padding-top:9px;margin-top:3px}

/* Flat panel, no accent rail. */
.asvt .full{
  margin-top:40px;border:1px solid var(--line);border-radius:var(--r);
  padding:24px 28px;background:var(--surface-2);
  display:flex;gap:22px;align-items:center;flex-wrap:wrap;
}
.asvt .full h3{font-family:var(--f-display);margin:0 0 5px;font-size:22px;font-weight:700;color:var(--ink)}
.asvt .full p{margin:0;color:var(--ink-2);font-size:16px;line-height:1.55}

.asvt .btn{
  display:inline-block;background:var(--brand);color:#fff!important;
  text-decoration:none;font-weight:600;font-size:16px;
  padding:14px 26px;border-radius:var(--r-sm);white-space:nowrap;
}
.asvt .btn:hover{background:var(--brand-h)}
@media(max-width:820px){.asvt .hero{grid-template-columns:1fr}}