/* what to expect: three videos (the indicator, the mentorship, the Discord) as cards, and a player that opens over the page */
.wte { padding: 12vh 0 14vh; border-top: 1px solid var(--line); }
.wte .head { text-align: center; margin-bottom: 44px; }
.wte .head h2 { margin: 0; }
.wte .head .lead { margin: 16px auto 0; max-width: 560px; color: var(--soft); font-size: 17px; line-height: 1.55; }
.wte-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.wcard { cursor: pointer; border-radius: 18px; border: 1px solid var(--line2); background: rgba(236, 232, 224, 0.02); overflow: hidden; transition: transform .3s, border-color .3s, box-shadow .3s; text-align: left; padding: 0; color: inherit; font: inherit; }
.wcard:hover { transform: translateY(-3px); border-color: rgba(230, 210, 164, 0.35); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }
.pv { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; }
.pv img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.wcard:hover .pv img { transform: scale(1.03); }
.pv .play { position: absolute; left: 16px; bottom: 16px; width: 48px; height: 48px; border-radius: 50%; background: var(--off); color: var(--ink); display: grid; place-items: center; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45); }
.pv .play svg { width: 18px; height: 18px; margin-left: 2px; }
.pv .dur { position: absolute; right: 14px; bottom: 18px; font: 500 12px var(--mono); letter-spacing: 0.06em; color: var(--off); background: rgba(7, 8, 10, 0.72); padding: 5px 9px; border-radius: 6px; }
.wcard .tx { padding: 20px 22px 24px; }
.wcard h3 { margin: 0 0 8px; font-size: 22px; font-stretch: 112%; letter-spacing: -0.005em; }
.wcard p { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.55; }
@media (max-width: 900px) { .wte-grid { grid-template-columns: 1fr; } }
.vm { position: fixed; inset: 0; z-index: 100; background: rgba(4, 5, 6, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: none; align-items: center; justify-content: center; padding: 24px; }
.vm.open { display: flex; }
.vm .box { width: min(1200px, 100%); aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid var(--line2); background: #000; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.7); }
.vm video { width: 100%; height: 100%; display: block; }
.vm .x { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(236, 232, 224, 0.06); color: var(--off); cursor: pointer; display: grid; place-items: center; }
.vm .x svg { width: 18px; height: 18px; }
/* the What to expect button in the hero: a gold light that runs around its edge (also on hover; still for people who turn motion off) */
@property --wa { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.btn-ghost.v-d, .btn-ghost.v-d:hover { border: 2px solid transparent; backdrop-filter: none;
  background: linear-gradient(#0f1013, #0f1013) padding-box, conic-gradient(from var(--wa), rgba(230,210,164,.2) 0deg, rgba(230,210,164,.2) 210deg, #F3E3BD 310deg, rgba(230,210,164,.2) 360deg) border-box;
  box-shadow: 0 0 40px rgba(200,164,100,.2); animation: wspin 4s linear infinite; }
.btn-ghost.v-d:hover { box-shadow: 0 0 52px rgba(200,164,100,.3); }
.v-d .ic { color: var(--gold-l); }
@keyframes wspin { to { --wa: 360deg; } }
@media (prefers-reduced-motion: reduce) { .btn-ghost.v-d { animation: none; } }