.gb-videos-page .gb-video-intro {
  max-width: 76rem;
  margin: 0 auto 3.6rem;
  text-align: center;
}
.gb-video-eyebrow {
  margin: 0 0 1.2rem;
  color: var(--gb-green-dark);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .2rem;
}
.gb-video-intro h1 { margin-bottom: 1.4rem; }
.gb-video-intro > p:last-child { color: #495664; font-size: 1.8rem; }
.gb-video-gallery { columns: 3; column-gap: 2.4rem; }
.gb-video-card {
  display: inline-block;
  width: 100%;
  margin: 0 0 2.4rem;
  break-inside: avoid;
  box-sizing: border-box;
  overflow: hidden;
  border: 1px solid var(--gb-border);
  border-radius: 1.8rem;
  background: white;
  box-shadow: 0 8px 26px #17232f08;
  transition: transform .18s ease, box-shadow .18s ease;
}
@media (hover: hover) {
  .gb-video-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px #17232f14; }
}
.gb-video-media { position: relative; aspect-ratio: 16 / 9; background: #203728; }
.gb-video-card--portrait .gb-video-media { aspect-ratio: 9 / 16; }
.gb-video-load {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: white;
  background: linear-gradient(145deg, #294c2b, #152c23);
  cursor: pointer;
  font: inherit;
}
.gb-video-load img { position: absolute; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.gb-video-demo-poster { cursor: default; }
.gb-video-load::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 40%, #0009); }
.gb-video-load:focus-visible { outline: 3px solid var(--gb-pink); outline-offset: -5px; }
.gb-video-format { position: absolute; top: 1.4rem; left: 1.4rem; z-index: 1; padding: .3rem .8rem; border-radius: .4rem; background: #14251bdd; color: white; font-size: 1rem; letter-spacing: .15rem; }
.gb-video-play { z-index: 1; display: grid; place-items: center; width: 5.6rem; height: 5.6rem; border: 1px solid #ffffff55; border-radius: 50%; background: var(--gb-pink); box-shadow: 0 4px 16px #0003; }
.gb-video-play svg { width: 2.6rem; height: 2.6rem; fill: currentColor; }
.gb-video-load-label { position: absolute; bottom: 1.3rem; left: 1rem; right: 1rem; z-index: 1; font-size: 1.2rem; line-height: 1.4; }
.gb-video-media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #111; }
.gb-video-caption { padding: 2rem; }
.gb-video-caption .gb-video-creator { margin: 0 0 .6rem; color: var(--gb-green-dark); font-size: 1.2rem; font-weight: 700; }
.gb-video-caption h2 { margin: 0 0 1rem; color: var(--gb-ink); font-size: 2.1rem; line-height: 1.25; letter-spacing: 0; }
.gb-video-caption .gb-video-comment { margin: 0 0 1.4rem; color: #495664; font-size: 1.4rem; line-height: 1.65; letter-spacing: .01rem; }
.gb-video-external { display: inline-block; padding: .5rem 0; color: var(--gb-green-dark); font-size: 1.2rem; font-weight: 700; text-underline-offset: .3rem; }
.gb-video-external-icon { width: 1.8rem; height: 1.8rem; vertical-align: middle; margin-right: .5rem; }
.gb-video-privacy { max-width: 76rem; margin: 0 auto 2.4rem; text-align: center; color: #5d6872; font-size: 1.2rem; line-height: 1.5; }
.gb-video-empty { max-width: 72rem; margin: 0 auto; padding: 5rem 2.4rem; box-sizing: border-box; border: 1px solid var(--gb-border); border-radius: 2rem; text-align: center; background: var(--gb-green-soft); }
.gb-video-empty-icon { display: inline-grid; place-items: center; width: 6rem; height: 6rem; margin-bottom: 1.6rem; border-radius: 50%; background: white; color: var(--gb-pink); font-size: 2rem; box-shadow: var(--gb-shadow); }
.gb-video-empty h2 { margin: 0 0 1rem; font-size: 2.6rem; line-height: 1.3; color: var(--gb-ink); }
.gb-video-empty p { max-width: 44rem; margin: 0 auto; color: #495664; line-height: 1.6; }

/* The dark experiment does not restyle the shared header, footer or homepage. */
body.gb-videos-dark { background: #000; }
.gb-videos-page {
  color-scheme: dark;
  color: #fff;
}
.gb-videos-page .gb-video-eyebrow { color: #a6df79; }
.gb-videos-page .gb-video-intro h1 { color: #fff; }
.gb-videos-page .gb-video-intro > p:last-child { color: #c5cac7; }
.gb-videos-page .gb-video-card {
  border-color: #2a2e2b;
  background: #121513;
  box-shadow: 0 10px 30px #0004;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.gb-videos-page .gb-video-media { background: #0b100d; }
.gb-videos-page .gb-video-load::after { background: linear-gradient(#0000 60%, #0004); }
.gb-videos-page .gb-video-format { border: 1px solid #ffffff29; background: #0c140fd9; }
.gb-videos-page .gb-video-caption .gb-video-creator { color: #a6df79; }
.gb-videos-page .gb-video-caption h2 { color: #fff; }
.gb-videos-page .gb-video-caption .gb-video-comment { color: #c5cac7; }
.gb-videos-page .gb-video-external {
  --gb-video-icon-cutout: #171d19;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  box-sizing: border-box;
  min-height: 4.4rem;
  margin-top: .3rem;
  padding: .8rem 1.3rem;
  border: 1px solid #424c45;
  border-radius: 999px;
  background: #171d19;
  color: #e1e8e3;
  font-size: 1.2rem;
  line-height: 1.4;
  letter-spacing: .025rem;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.gb-videos-page .gb-video-external-icon { margin: 0; flex: 0 0 1.8rem; }
.gb-videos-page .gb-video-external-arrow { margin-left: .5rem; color: #a6df79; font-size: 1.7rem; }
.gb-videos-page .gb-video-external:hover {
  --gb-video-icon-cutout: #26382b;
  border-color: #89c963;
  background: #26382b;
  color: #fff;
}
.gb-videos-page .gb-video-external:focus-visible,
.gb-videos-page .gb-video-load:focus-visible { outline: 3px solid #b7ec91; outline-offset: 4px; }
.gb-videos-page .gb-video-load:focus-visible { outline-offset: -5px; }
/* Keep repeated card hints out of the visual layout. */
.gb-videos-page .gb-video-load-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.gb-videos-page .gb-video-disclosure { position: relative; margin: -1rem 0 1.2rem; }
.gb-videos-page .gb-video-disclosure summary {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 4.4rem;
  height: 4.4rem;
  margin-left: auto;
  border: 1px solid #424c45;
  border-radius: 50%;
  background: #121513;
  color: #c5cac7;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.gb-videos-page .gb-video-disclosure summary::-webkit-details-marker { display: none; }
.gb-videos-page .gb-video-disclosure summary:focus-visible { outline: 3px solid #b7ec91; outline-offset: 3px; }
.gb-videos-page .gb-video-disclosure[open] summary { border-color: #89c963; color: #fff; }
.gb-videos-page .gb-video-disclosure .gb-video-privacy {
  position: absolute;
  z-index: 5;
  top: 5.2rem;
  right: 0;
  box-sizing: border-box;
  width: 32rem;
  max-width: calc(100vw - 4rem);
  margin: 0;
  padding: 1.6rem;
  border: 1px solid #424c45;
  border-radius: 1rem;
  background: #1c241e;
  color: #e1e8e3;
  text-align: left;
  box-shadow: 0 12px 30px #0009;
}
.gb-videos-page .gb-video-empty { border-color: #2a2e2b; background: #121513; }
.gb-videos-page .gb-video-empty h2 { color: #fff; }
.gb-videos-page .gb-video-empty p { color: #c5cac7; }
.gb-videos-page .gb-video-empty-icon { background: #26382b; color: #a6df79; }
@media (hover: hover) {
  .gb-videos-page .gb-video-card:hover { border-color: #4d614f; box-shadow: 0 14px 36px #0008; }
}
@media (max-width: 989px) { .gb-video-gallery { columns: 2; gap: 2rem; } .gb-video-card { margin-bottom: 2rem; } }
/* Shared video actions work on both light and dark gallery surfaces. */
.gb-video-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-top: .3rem; }
.gb-video-actions .gb-video-external,
.gb-video-actions .gb-video-shop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  box-sizing: border-box;
  min-height: 4.4rem;
  max-width: 100%;
  margin: 0;
  padding: .8rem 1.2rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .025rem;
  text-decoration: none;
  white-space: nowrap;
}
.gb-video-actions .gb-video-external-icon { flex: 0 0 1.8rem; margin: 0; }
.gb-video-actions .gb-video-external-arrow { margin: 0; font-size: 1.7rem; }
.gb-video-actions .gb-video-shop { margin-inline-start: auto; padding-inline: 1.6rem; border-color: #d6007e; background: #d6007e; color: #fff; font-size: 1.6rem; }
.gb-video-actions .gb-video-shop:hover { border-color: #b9006c; background: #b9006c; color: #fff; }
.gb-video-actions a:focus-visible { outline: 3px solid #367a27; outline-offset: 3px; }
.gb-videos-page .gb-video-actions a:focus-visible { outline-color: #b7ec91; }
@media (max-width: 599px) {
  .gb-video-gallery { columns: 1; }
  .gb-video-intro > p:last-child { font-size: 1.6rem; }
  .gb-video-empty { padding: 3.2rem 2rem; }
}
@media (prefers-reduced-motion: reduce) { .gb-video-card { transition: none; } .gb-video-card:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .gb-videos-page .gb-video-card,
  .gb-videos-page .gb-video-external { transition: none; }
}