/* Each video got better: the same kind of video, then and now, side by side (in #one-tip, under the time chart) */
.gbx .gb-card { display: grid; gap: 28px; padding: clamp(18px, 2.4vw, 28px); border-radius: var(--r-l); background: oklch(1 0 0 / .035); box-shadow: inset 0 0 0 1px var(--dark-line); }
.gb-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; align-items: start; }
.gb-row + .gb-row { padding-top: 26px; border-top: 1px solid var(--dark-line); }
.gb-what { grid-column: 1 / -1; margin: 0; font-size: var(--t-body); line-height: 1.5; color: var(--on-dark-2); text-wrap: pretty; }
.gb-what b { font-weight: 600; color: var(--on-dark); }

.gb-side { min-width: 0; margin: 0; display: grid; gap: 10px; align-content: start; }
button.gb-side { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gb-scr { position: relative; display: block; overflow: hidden; border-radius: var(--r-s); background: oklch(0.1 0.005 70); outline: 1px solid oklch(1 0 0 / .12); outline-offset: -1px; box-shadow: 0 24px 40px -24px oklch(0 0 0 / .9); }
.gb-wide .gb-scr { aspect-ratio: 16 / 9; }
.gb-tall .gb-side { width: min(100%, 330px); }
.gb-tall .gb-scr { aspect-ratio: 9 / 16; }
/* the first frame waits underneath (loaded lazily); the loop covers it once it plays */
.gb-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gb-v { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; }

.gb-cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--t-small); color: var(--on-dark-soft); }
.gb-cap b { font: 500 var(--t-label)/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-dark); }
.gb-now .gb-cap b { color: var(--signal); }

.gb-play { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px 7px 9px; border-radius: var(--r-pill); background: oklch(0.12 0.006 70 / .74); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--on-dark); font: 500 var(--t-label)/1 var(--mono); letter-spacing: .04em; transition: background-color .2s, color .2s; }
.gb-play svg { width: 13px; height: 13px; fill: currentColor; }
.gb-now .gb-scr { transition: translate .3s cubic-bezier(.2, 0, 0, 1); }
@media (hover: hover) and (pointer: fine) {
  .gb-now:hover .gb-scr { translate: 0 -3px; }
  .gb-now:hover .gb-play { background: var(--signal); color: var(--ink); }
}
.gb-now:focus-visible { outline: none; }
.gb-now:focus-visible .gb-scr { outline: 2px solid var(--signal); outline-offset: 3px; }
.gb-now:active .gb-scr { scale: .985; }

.gb-foot { margin: 16px 0 0; font-size: var(--t-small); color: var(--on-dark-soft); text-wrap: pretty; }

/* tablets and phones: one clip per line, big enough to see what changed; the date sits above its clip */
@media (max-width: 900px) {
  .gb-wide { grid-template-columns: 1fr; gap: 12px; }
  .gb-wide .gb-side .gb-cap { order: -1; }
}
@media (max-width: 640px) {
  .gbx .gb-card { gap: 22px; }
  .gb-tall { gap: 12px; }
  .gb-tall .gb-side { width: 100%; }
  .gb-row + .gb-row { padding-top: 20px; }
  .gb-play { left: 8px; bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .gb-now .gb-scr { transition: none; }
}