/* Video Quotes: extra styles for the video gallery pages (ugc.html, explainers.html), 3 Nov 2026.
   Load after vq.css. Header, nav and cards match videos.html. */
.top nav{display:flex;gap:22px;font-size:14px;color:var(--muted)}
.top nav a{text-decoration:none}.top nav a:hover,.top nav a[aria-current]{color:var(--ink)}
.menu{display:none;font:inherit;font-size:14px;font-weight:700;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 14px;cursor:pointer;margin-left:auto}
section{padding:72px 0;border-top:1px solid var(--line);scroll-margin-top:62px}
.page-hero{padding-top:44px;border-top:0}
.back{display:inline-block;margin-bottom:14px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none}
.back:hover{color:var(--ink)}
.sechead{max-width:680px;margin-bottom:34px}
.sechead p{color:var(--muted);margin:12px 0 0}
.sechead .tag{margin-bottom:14px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:34px}
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;transform:none}
footer a{color:var(--ink)}

/* page switcher: Explainers, Presenters, Character ads */
.switch{display:inline-flex;gap:4px;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:999px;margin:0 0 22px;flex-wrap:wrap}
.switch a{font-size:14px;font-weight:700;color:var(--muted);text-decoration:none;padding:8px 16px;border-radius:999px;transition:background .2s,color .2s}
.switch a:hover{color:var(--ink)}
.switch a[aria-current]{background:var(--panel2);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(143,180,236,.35)}

/* labels on cards, same as videos.html */
.vbody{padding:14px 16px 18px}
.vtopic{font-size:20px;font-weight:800;color:var(--ink);margin:0}
.vsub{margin:6px 0 0;color:var(--muted);font-size:14.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chip{font-size:12px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.vdesc{margin:10px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
.chip.ai{color:var(--warm);border-color:rgba(255,181,71,.4)}

/* portrait reels */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
.rcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.reel{position:relative;aspect-ratio:9/16;background:#000;cursor:pointer;color:#fff}
.reel video{width:100%;height:100%;object-fit:cover;display:block}
.reel .rplay{font:inherit;color:#fff;cursor:pointer;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;background:rgba(10,18,32,.78);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:10px 16px 10px 12px;font-size:14px;font-weight:700;white-space:nowrap;transition:opacity .25s,transform .2s}
.reel .rplay:before{content:"";border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;margin-left:4px}
.reel:hover .rplay{transform:translate(-50%,-50%) scale(1.05)}
.reel.playing .rplay{opacity:0;pointer-events:none}
.reel .muted-note{position:absolute;left:10px;top:10px;font-size:11.5px;font-weight:700;background:rgba(10,18,32,.7);border-radius:99px;padding:4px 9px;opacity:0;transition:opacity .25s}
.reel.previewing .muted-note{opacity:1}
.reel.playing .muted-note{opacity:0}
.pair{display:grid;grid-template-columns:1fr minmax(0,250px) minmax(0,250px);align-items:start;gap:22px;background:linear-gradient(180deg,rgba(143,180,236,.07),transparent);border:1px solid rgba(143,180,236,.25);border-radius:20px;padding:22px}
.pair .pairhead{align-self:center;max-width:380px}
.pair .pairhead h3{font-size:22px}
.pair .pairhead p{color:var(--muted);margin:6px 0 0}

/* presenter picker */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.filters button{font:inherit;font-size:14px;font-weight:700;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer}
.filters button[aria-pressed="true"]{color:#0A1220;background:var(--accent);border-color:var(--accent)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
.pcard{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pcard img{width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
.pcard figcaption{padding:10px 12px 12px;font-size:13.5px;color:var(--muted)}
.pcard figcaption b{display:block;color:var(--ink);font-size:15px}
.pcard[hidden]{display:none}

/* how it works */
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s;list-style:none;padding:0;margin:0}
.steps4 li{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;counter-increment:s}
.steps4 li:before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--grad);font-weight:800;margin-bottom:12px}
.steps4 h3{font-size:17px;margin-bottom:6px}
.steps4 p{margin:0;color:var(--muted);font-size:14.5px}
.honest{margin-top:22px;background:rgba(255,181,71,.08);border:1px solid rgba(255,181,71,.3);border-radius:14px;padding:14px 18px;font-size:14.5px;color:#FFD9A0;max-width:820px}

@media (max-width:980px){
  .top nav{display:none}
  .menu{display:inline-flex}
  .top nav.open{display:flex;flex-direction:column;gap:0;position:absolute;left:0;right:0;top:100%;background:rgba(10,18,32,.97);border-bottom:1px solid var(--line);padding:8px 20px 14px}
  .top nav.open a{padding:12px 0;font-size:16px;color:var(--ink);border-top:1px solid var(--line)}
  .top nav.open a:first-child{border-top:0}
  .steps4{grid-template-columns:1fr 1fr}
  .pair{grid-template-columns:1fr 1fr}
  .pair .pairhead{grid-column:1/-1;max-width:none}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .top .btn{display:none}
  .rgrid{grid-template-columns:1fr 1fr;gap:12px}
  .pair{gap:12px;padding:14px}
  .pgrid{grid-template-columns:1fr 1fr;gap:12px}
  .steps4{grid-template-columns:1fr}
  .vtopic{font-size:17px}
  .reel .rplay{font-size:12.5px;padding:8px 12px 8px 10px}
  section{padding:56px 0}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
}

@media (max-width:560px){.switch{flex-wrap:nowrap;max-width:100%}.switch a{font-size:13px;padding:7px 11px;white-space:nowrap}}