/* v17 (2026-09-28): the 60 s showreel. A "Watch the reel" pill under the hero's buttons (thumbnail + play mark, so it
   reads as a video, not a third button) opens a full-screen <dialog> that plays it with sound. Nothing downloads until
   the click (preload="none"); phones get the 720p copy. Markup: .reel-open in its own .reel-row under .hero-ctas (a third
   item widened the centred button row and slid it under a floating photo), #reel at body level. */
.reel-row { display: flex; justify-content: center; margin-top: 16px; }
/* 2026-09-28 (Gene: "make it a little bigger so people know to click it"): a white card lifted off the page, a 16:9
   thumbnail with a round green play button that pulses, and two lines of text ("1 min · sound on"). */
.reel-open {
  display: inline-flex; align-items: center; gap: 16px; padding: 7px 28px 7px 7px; border-radius: 999px;
  color: var(--ink); text-decoration: none; font-family: var(--font-body); background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line), 0 10px 26px -8px rgba(20, 32, 26, .22);
  transition: box-shadow var(--dur-feedback) ease, transform var(--dur-fast) var(--ease-standard);
}
.reel-open .rt { position: relative; width: 112px; height: 63px; border-radius: 32px 14px 14px 32px; overflow: hidden; flex: none; }
.reel-open .rt img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-fast) var(--ease-standard); }
.reel-open .rt::before {                    /* the play button: a green disc with a pulse ring */
  content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: var(--green); box-shadow: 0 2px 8px rgba(0, 0, 0, .35), 0 0 0 0 color-mix(in oklab, var(--green), transparent 30%);
  animation: reel-pulse 2.4s var(--ease-standard) infinite;
}
.reel-open .rt::after {                     /* the triangle on it */
  content: ""; position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -7px 0 0 -4px;
  border-left: 12px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
}
@keyframes reel-pulse {
  0% { box-shadow: 0 2px 8px rgba(0, 0, 0, .35), 0 0 0 0 color-mix(in oklab, var(--green), transparent 30%); }
  70%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, .35), 0 0 0 14px color-mix(in oklab, var(--green), transparent 100%); }
}
@media (prefers-reduced-motion: reduce) { .reel-open .rt::before { animation: none; } }
.reel-open .rl { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.15; }
.reel-open .rl b { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.reel-open .rm { font-size: 13.5px; color: color-mix(in oklab, var(--ink), transparent 42%); font-weight: 500; font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .reel-open:hover { box-shadow: inset 0 0 0 1.5px var(--green), 0 14px 30px -8px rgba(20, 32, 26, .28); transform: translateY(-2px); }
  .reel-open:hover .rt img { transform: scale(1.08); }
}
.reel-open:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

#reel { border: 0; padding: 0; margin: auto; width: min(92vw, calc(84vh * 16 / 9)); max-width: none; background: transparent; overflow: visible; }
#reel::backdrop { background: rgba(8, 13, 12, .9); }
#reel video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0B1113; border-radius: 12px; }
#reel .reel-x {
  position: absolute; right: 0; top: -48px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  font: 600 14px var(--font-body);
}
#reel .reel-x:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (hover: hover) { #reel .reel-x:hover { background: rgba(255, 255, 255, .22); } }
@media (max-width: 720px) { #reel { width: 96vw; } #reel video { border-radius: 8px; } }
/* phones: the three hero photos are pinned near the hero's bottom (v11 grok.css section 5); the pill adds a row, so keep
   room for the strip under the buttons and let the hero grow instead of overlapping */
@media (max-width: 760px) { .hero-c .hero-core { padding-bottom: 190px; } }