.video-tutorials{scroll-margin-top:64px;}
.video-group{margin-top:42px;}
.video-group-eyebrow{
  color:var(--lp-accent-text);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:8px;
}
.video-group-title{color:var(--text);font-size:20px;line-height:1.3;margin-bottom:18px;}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.video-grid article{min-width:0;}
.video-card{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
  background:var(--white);border:1.5px solid var(--border);border-radius:14px;
  color:var(--text);text-decoration:none;transition:box-shadow .22s,transform .22s,border-color .22s;
}
.video-card:hover{border-color:var(--lp-accent-text);box-shadow:0 10px 32px rgba(14,196,166,.14);transform:translateY(-3px);}
.video-card:focus-visible,.video-dialog a:focus-visible,.video-dialog-close:focus-visible{outline:2px solid var(--lp-accent-text);outline-offset:3px;}
.video-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--gray-lt);}
.video-thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.video-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:rgba(13,43,34,.88);color:#fff;
}
.video-play svg{width:24px;height:24px;margin-left:3px;}
.video-duration{
  position:absolute;right:10px;bottom:10px;padding:3px 7px;border-radius:4px;
  background:rgba(13,43,34,.9);color:#fff;font-size:12px;font-weight:700;
}
.video-card-body{display:flex;flex:1;flex-direction:column;padding:20px;}
.video-card-label{color:var(--lp-accent-text);font-size:11.5px;font-weight:700;margin-bottom:8px;}
.video-card h4{font-size:15px;line-height:1.4;margin-bottom:8px;}
.video-card p{color:var(--gray);font-size:13px;line-height:1.6;}
.video-card-watch{color:var(--lp-accent-text);font-size:13px;font-weight:700;margin-top:auto;padding-top:16px;}
.video-grid-featured{grid-template-columns:1fr;}
.video-grid-featured .video-card{display:grid;grid-template-columns:1fr 1fr;}
.video-grid-featured .video-card-body{justify-content:center;padding:28px;}
.video-grid-featured .video-card-watch{margin-top:0;}

.video-dialog{
  width:min(880px,calc(100% - 32px));max-width:none;max-height:calc(100vh - 32px);
  margin:auto;padding:20px;border:1px solid var(--border);border-radius:14px;
  background:var(--white);color:var(--text);box-shadow:0 24px 70px rgba(13,43,34,.35);
}
.video-dialog::backdrop{background:rgba(5,24,18,.75);}
.video-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;}
.video-dialog-header h3{font-size:18px;line-height:1.4;}
.video-dialog-close{
  display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:6px;
  background:var(--gray-lt);color:var(--text);font-size:24px;line-height:1;cursor:pointer;
}
.video-dialog-frame{aspect-ratio:16/9;max-height:calc(100vh - 180px);margin:0 auto;background:#000;}
.video-dialog-frame iframe{display:block;width:100%;height:100%;border:0;}
.video-dialog p{color:var(--gray);font-size:13px;line-height:1.5;margin-top:14px;}
.video-dialog a{color:var(--lp-accent-text);font-weight:600;}

@media(max-width:900px){
  .video-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .video-grid-featured{grid-template-columns:1fr;}
}
@media(max-width:720px){
  .video-group{margin-top:32px;}
  .video-grid,.video-grid-featured .video-card{grid-template-columns:1fr;}
  .video-grid-featured .video-card-body{padding:20px;}
  .video-dialog{padding:16px;}
}