/* Dark media gallery followed by a light, vertically stacked resource index. */
#watch::before { pointer-events:none; }
#watch .social-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
#watch .platform-card { display:flex; flex-direction:column; min-width:0; }
#watch .platform-heading { padding:22px 20px; gap:12px; }
#watch .platform-heading h3 { font-size:20px; gap:9px; }
#watch .platform-heading>a { display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
#watch .platform-heading>a strong { font-size:24px; }
#watch .platform-body { display:flex; flex-direction:column; flex:1; padding:24px 20px; }
#watch .platform-body .button { margin-top:auto; align-self:flex-start; }
.facebook-feature { display:block; position:relative; aspect-ratio:16/9; overflow:hidden; }
.facebook-feature img { width:100%; height:100%; object-fit:cover; object-position:38% 40%; }
.facebook-feature-label { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:32px 20px 18px; color:white; font-size:14px; font-weight:700; background:linear-gradient(transparent,#000c); }
.button-facebook { background:#1877f2; color:white; }
.button-facebook:hover { background:#1261c9; color:white; }
@media (max-width:1000px) {
  #watch .social-grid { grid-template-columns:minmax(0,1fr); }
  #watch .platform-heading>a { flex-direction:row; align-items:baseline; gap:8px; }
}
#watch.social-connect { background:#191711; color:#f8f1e7; padding:60px 0 48px; }
#watch.social-connect>.shell { border-top:0; padding-top:0; }
#watch .platform-body { padding:20px; }
#start.resources-feature { padding:56px 0; background:var(--paper); color:var(--ink); border-bottom:1px solid var(--line); }
#start>.shell { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,2fr); gap:clamp(32px,5vw,72px); border-top:0; padding-top:0; }
#start .resource-heading { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:24px; margin:0; padding-top:20px; }
#start .resource-heading h2 { font-size:clamp(36px,3.6vw,48px); line-height:1.05; }
#start .resource-heading p { color:var(--muted); font-size:15px; margin-top:16px; max-width:260px; }
#start .text-link { color:var(--orange-dark); }
#start .resource-heading>.text-link { margin:0; align-self:flex-start; min-height:44px; display:inline-flex; align-items:center; font-size:11px; }
#start .resource-grid { grid-template-columns:minmax(0,1fr); gap:0; border-top:1px solid var(--line); }
#start .resource-card { display:block; padding:24px 0; background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none; }
#start .resource-summary { display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:24px; }
#start .resource-visual { grid-row:1 / 3; float:none; width:64px; height:80px; margin:0; border-radius:6px; transition:transform .25s ease; }
#start .resource-preview { box-shadow:3px 4px 0 var(--paper-deep); border-color:var(--line); }
#start .resource-visual-icon { background:var(--paper-deep); color:var(--orange-dark); border-color:var(--line); }
#start .resource-visual-quiz { color:#386d30; background:#e7eddc; }
#start .resource-summary h3 { margin:0 0 8px; font-size:28px; line-height:1.1; color:var(--ink); }
#start .resource-summary p { color:var(--muted); font-size:14px; line-height:1.6; margin:0; max-width:600px; }
#start .resource-card>.text-link { margin:8px 0 -8px 88px; padding:0; min-height:44px; font-size:11px; }
@media (hover:hover) {
  #start .resource-card:hover .resource-visual { transform:translateY(-3px); }
}
@media (prefers-reduced-motion:no-preference) {
  #start .resource-card.is-revealed { animation:resource-arrive .65s backwards; }
}
@keyframes resource-arrive { from { opacity:.3; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:760px) {
  #watch.social-connect { padding-top:44px; }
  #start.resources-feature { padding:36px 0; }
  #start>.shell { grid-template-columns:minmax(0,1fr); gap:24px; }
  #start .resource-heading { padding-top:0; gap:8px; }
  #start .resource-heading p { max-width:none; margin-top:12px; }
  #start .resource-card { padding:22px 0; }
  #start .resource-summary { grid-template-columns:48px minmax(0,1fr); column-gap:16px; }
  #start .resource-visual { width:48px; height:64px; }
  #start .resource-summary h3 { font-size:25px; }
  #start .resource-card>.text-link { margin-left:64px; }
}
@media (prefers-reduced-motion:reduce) {
  #start .resource-card, #start .resource-visual { transition:none; }
  #start .resource-card:hover .resource-visual { transform:none; }
}