/* The product videos inside "Our product" (added by tools/build.py, not part of the design folder).
   One player across the full width, the text of the chosen video under it, and the list of all
   videos below (picture, topic, title, length). The posters are ours; YouTube's privacy-enhanced
   player loads only when one is pressed. */
.product-video{position:relative;flex-basis:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:30px;margin-top:8px}
.video-anchor{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
.video-poster,.video-frame{position:relative;display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--soft);border:1px solid var(--line);box-shadow:0 14px 34px #0c172c1a}
.video-poster img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.video-poster:hover img{transform:scale(1.02)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:11px;padding:6px 15px 6px 6px;border-radius:40px;font-size:13px;font-weight:600;color:var(--ink);background:#ffffffeb;box-shadow:0 10px 24px #0c172c2e;transition:transform .2s ease,box-shadow .2s ease}
.video-play-dot{position:relative;width:38px;height:38px;border-radius:50%;background:radial-gradient(ellipse at 50% 52%,#702809 0%,#7d2c07 47%,#a43b07 85%,#c1530d 100%);border:1px solid #ffc079;box-shadow:inset 0 1px 1px #ffe1a8,inset 0 0 3px 1px #ffbc69,inset 0 0 10px 2px #ff7109a6,0 0 3px 1px #ffa04f99,0 0 12px 2px #f16b1461}
.video-play-dot:after{content:'';position:absolute;left:14px;top:11px;border-style:solid;border-width:8px 0 8px 12px;border-color:transparent transparent transparent #fff6e9}
.video-poster:hover .video-play,.video-poster:focus-visible .video-play{transform:translateY(-2px);box-shadow:0 14px 30px #0c172c3a}
.video-time{color:var(--muted);font-weight:400}
.product-video-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:56px;align-items:start}
.product-video-copy>.eyebrow{grid-column:1;grid-row:1;text-transform:uppercase}
.product-video-copy>h3{grid-column:1;grid-row:2}
.product-video-copy>p:not(.eyebrow){grid-column:2;grid-row:1/3}
.product-video-links{grid-column:2;grid-row:3}
.product-video-copy h3{font-size:22px;letter-spacing:-.5px;line-height:1.25;margin-bottom:12px}
.product-video-copy>p:not(.eyebrow){font-size:14px;color:var(--muted)}
.product-video-copy .eyebrow{margin:0 0 14px;padding-left:0;border-left:0}
.product-video-links{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:20px}
.product-video-links .text-link{margin-left:0;white-space:nowrap}
.video-list{list-style:none;margin:0;padding:24px 0 0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.video-item{display:grid;grid-template-columns:128px minmax(0,1fr);gap:14px;align-items:center;height:100%;padding:8px 12px 8px 8px;border:1px solid var(--line);border-radius:12px;background:#ffffffa6;color:var(--ink);transition:border-color .2s,background .2s,box-shadow .2s}
.video-item:hover{border-color:#a9b9cc;background:#fff}
.video-item[aria-current=true]{border-color:var(--teal);background:#fff;box-shadow:0 8px 20px #0c172c14}
.video-thumb{display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--soft);border:1px solid var(--line)}
.video-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.video-item-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.video-item-topic{font-size:10px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--teal)}
.video-item-title{font-size:14px;line-height:1.4}
.video-item-time{font-size:12px;color:var(--muted)}
.product-video>.video-note{font-size:12px;color:var(--muted);margin-top:-14px}
@media(max-width:1000px){.video-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.product-video{gap:24px}.product-video-copy{display:block}}
@media(max-width:540px){.video-play{left:10px;bottom:10px;padding:5px 12px 5px 5px}.video-play-dot{width:32px;height:32px}.video-play-dot:after{left:12px;top:9px;border-width:7px 0 7px 10px}.video-play-label{display:none}.product-video-copy h3{font-size:20px}.video-list{grid-template-columns:1fr;gap:8px}.video-item{grid-template-columns:112px minmax(0,1fr);gap:12px}}
