/* The liquid glass guide: its showreel, the block that leads to the app, and the presets' clips */
.guide .glass-hero{margin:0 0 14px}
.glass-hero video{display:block;width:100%;height:auto;aspect-ratio:16/9;border:1px solid rgba(42,55,79,.85);border-radius:14px;background:#0a0f17}

.glass-get{display:flex;align-items:center;gap:16px;margin:0 0 26px;padding:16px 18px;border:1px solid rgba(107,159,255,.4);border-radius:14px;background:linear-gradient(135deg,rgba(107,159,255,.16),rgba(31,38,51,.9))}
.guide .glass-get img{flex:none;width:56px;height:56px;margin:0}
.glass-get-words{flex:1;min-width:0}
.guide .glass-get p{margin:0;font-size:.9rem;line-height:1.45}
.guide .glass-get .glass-get-title{margin-bottom:3px;color:var(--text-title);font-size:1.12rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.guide .glass-get .btn-primary{flex:none;color:#fff;text-decoration:none;white-space:nowrap}

.guide .glass-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px;margin:20px 0 26px;list-style:none}
.guide .glass-gallery li{margin:0;padding:0}
.guide .glass-gallery figure{margin:0}
.guide .glass-gallery figcaption{margin-top:7px;font-size:.76rem;line-height:1.4;text-align:left}
.guide .glass-gallery figcaption strong{display:block;color:var(--text-title);font-size:.86rem}
.glass-clip,.guide .glass-pair img{display:block;width:100%;height:auto;aspect-ratio:16/9;border:1px solid rgba(42,55,79,.85);border-radius:9px;background:#0a0f17;object-fit:cover}
.guide .glass-gallery a{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/9;padding:10px;border:1px solid rgba(107,159,255,.4);border-radius:9px;background:rgba(107,159,255,.12);color:var(--text-title);font-size:.9rem;font-weight:650;line-height:1.3;text-align:center;text-decoration:none;transition:background .15s,border-color .15s}
.guide .glass-gallery a:hover{border-color:var(--accent);background:rgba(107,159,255,.22)}
.guide .glass-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 14px}
.guide .glass-pair figure{margin:0}
.guide .glass-pair figcaption{text-align:left}

/* On a small screen the video comes straight after the title. */
@media(max-width:900px){
  .guide-toc{display:none}
}
@media(max-width:640px){
  .glass-get{flex-wrap:wrap;gap:12px;padding:14px}
  .guide .glass-get img{width:48px;height:48px}
  .glass-get-words{flex:1 1 0}
  .guide .glass-get .btn-primary{flex:1 1 100%;justify-content:center}
  .guide .glass-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
  .guide .glass-gallery li:last-child{grid-column:1/-1}
  .guide .glass-gallery a{aspect-ratio:auto;padding:16px}
  .guide .glass-pair{gap:10px}
}