/* User review: a recognizable laptop around the authentic class recording. */
.home-advantages-visual.is-screen-capture{
  display:grid;grid-template-rows:minmax(0,1fr) 18px auto;align-items:center;
  justify-items:center;gap:0;padding:clamp(24px,3vw,42px);
  background:linear-gradient(145deg,#283b43,#12222a 72%);min-height:560px;
}
.home-advantages-visual.is-screen-capture::after{content:none}
.home-advantages-visual.is-screen-capture>img{
  grid-row:1;width:100%;height:auto;max-height:360px;aspect-ratio:16/9;
  object-fit:contain;background:#0b0d10;padding:0;
  border:clamp(9px,1.3vw,15px) solid #141b22;border-bottom-width:19px;
  border-radius:13px 13px 4px 4px;box-shadow:0 20px 40px #0005;
}
.home-advantages-visual.is-screen-capture::before{
  content:"";grid-row:2;align-self:start;width:64%;height:18px;
  background:linear-gradient(#b5bbc0,#6f767e);
  clip-path:polygon(12% 0,88% 0,100% 82%,96% 100%,4% 100%,0 82%);
  box-shadow:0 8px 18px #0004;
}
.home-advantages-visual.is-screen-capture figcaption{
  grid-row:3;align-self:end;position:static;width:100%;margin-top:22px;
  padding:18px 0 0;border-top:1px solid #ffffff36;
}
.home-advantages-visual.is-screen-capture figcaption strong{font-size:clamp(27px,3vw,40px)}

/* Retain the product cover format while using a quieter study photograph. */
.product-hero-preview-tutoring{
  background-image:linear-gradient(90deg,#10202acc 0%,#14232e8a 49%,#14232e32 100%),url(/visual-diagnosis.webp)!important;
  background-position:center 52%!important;
}

/* Two evidence stories, each with a full-width image and concise explanation. */
body:has(.product-hero-preview-tutoring) .product-evidence,
body:has(.product-hero-exam-sprint) .product-evidence{
  display:block;padding:clamp(50px,7vw,96px) clamp(18px,5vw,80px);
}
body:has(.product-hero-preview-tutoring) .product-evidence-copy,
body:has(.product-hero-exam-sprint) .product-evidence-copy{
  position:static;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);
  align-items:end;gap:18px 48px;padding:0 0 32px;
}
body:has(.product-hero-preview-tutoring) .product-evidence-copy .section-kicker,
body:has(.product-hero-exam-sprint) .product-evidence-copy .section-kicker{grid-column:1/-1;margin:0}
body:has(.product-hero-preview-tutoring) .product-evidence-copy h2,
body:has(.product-hero-exam-sprint) .product-evidence-copy h2{
  font-size:clamp(31px,3.8vw,51px);margin:0;max-width:840px;
}
body:has(.product-hero-preview-tutoring) .product-evidence-copy>p:not(.section-kicker),
body:has(.product-hero-exam-sprint) .product-evidence-copy>p:not(.section-kicker){font-size:15px;line-height:1.7}
body:has(.product-hero-preview-tutoring) .product-evidence-copy>span,
body:has(.product-hero-exam-sprint) .product-evidence-copy>span{
  grid-column:1/-1;max-width:none;margin:2px 0 0;padding-top:12px;
}
body:has(.product-hero-preview-tutoring) .product-evidence-gallery,
body:has(.product-hero-exam-sprint) .product-evidence-gallery{
  display:grid;grid-template-columns:minmax(0,1fr);gap:26px;
  width:min(100%,1060px);margin:0 auto;padding:0;overflow:visible;
}
body:has(.product-hero-preview-tutoring) .product-evidence-card,
body:has(.product-hero-exam-sprint) .product-evidence-card{
  width:100%;min-width:0;max-width:none;margin:0!important;padding:10px 10px 20px;
  background:#fff;border:1px solid #d8d2c8;box-shadow:0 10px 28px #141b2212;
}
body:has(.product-hero-preview-tutoring) .product-evidence-card figure,
body:has(.product-hero-exam-sprint) .product-evidence-card figure{
  width:100%;aspect-ratio:16/8.7;max-height:none;border:0;background:#e7e5df;
}
body:has(.product-hero-preview-tutoring) .product-evidence-card figure::after,
body:has(.product-hero-exam-sprint) .product-evidence-card figure::after{content:none}
body:has(.product-hero-preview-tutoring) .product-evidence-card.is-document img,
body:has(.product-hero-exam-sprint) .product-evidence-card.is-document img{
  width:100%;height:100%;padding:0;object-fit:contain;background:#f8f8f6;
}
body:has(.product-hero-preview-tutoring) .product-evidence-card.is-classroom figure,
body:has(.product-hero-exam-sprint) .product-evidence-card.is-classroom figure{aspect-ratio:16/8.7}
body:has(.product-hero-preview-tutoring) .product-evidence-card>div,
body:has(.product-hero-exam-sprint) .product-evidence-card>div{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.65fr) 24px;
  gap:9px 28px;align-items:center;padding:17px 12px 0;
}
body:has(.product-hero-preview-tutoring) .product-evidence-card>div small,
body:has(.product-hero-exam-sprint) .product-evidence-card>div small{grid-column:1/-1;font-size:11px}
body:has(.product-hero-preview-tutoring) .product-evidence-card>div h3,
body:has(.product-hero-exam-sprint) .product-evidence-card>div h3{font-size:clamp(22px,2.8vw,34px);margin:0}
body:has(.product-hero-preview-tutoring) .product-evidence-card>div p,
body:has(.product-hero-exam-sprint) .product-evidence-card>div p{font-size:14px;line-height:1.65;margin:0}
body:has(.product-hero-preview-tutoring) .product-evidence-card>div i,
body:has(.product-hero-exam-sprint) .product-evidence-card>div i{position:static;grid-column:3}

/* The actual class screenshot gets the whole image area. */
body:has(.product-hero-preview-tutoring) .classroom-screen-stage,
body:has(.product-hero-exam-sprint) .classroom-screen-stage{
  display:block;inset:42px 0 0;background:#10151a;
}
body:has(.product-hero-preview-tutoring) .classroom-whiteboard,
body:has(.product-hero-exam-sprint) .classroom-whiteboard{width:100%;height:100%}
body:has(.product-hero-preview-tutoring) .classroom-whiteboard img,
body:has(.product-hero-exam-sprint) .classroom-whiteboard img{
  width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;
}
body:has(.product-hero-preview-tutoring) .classroom-material,
body:has(.product-hero-exam-sprint) .classroom-material,
body:has(.product-hero-preview-tutoring) .classroom-screen-meta,
body:has(.product-hero-exam-sprint) .classroom-screen-meta{display:none}

@media(max-width:700px){
  .home-advantages-visual.is-screen-capture{min-height:0;grid-template-rows:auto 12px auto;padding:20px 16px 24px}
  .home-advantages-visual.is-screen-capture>img{border-width:8px;border-bottom-width:12px;max-height:none}
  .home-advantages-visual.is-screen-capture::before{height:12px}
  .home-advantages-visual.is-screen-capture figcaption{margin-top:18px}
  body:has(.product-hero-preview-tutoring) .product-evidence-copy,
  body:has(.product-hero-exam-sprint) .product-evidence-copy{display:block;padding-bottom:25px}
  body:has(.product-hero-preview-tutoring) .product-evidence-copy h2,
  body:has(.product-hero-exam-sprint) .product-evidence-copy h2{font-size:31px;margin:16px 0}
  body:has(.product-hero-preview-tutoring) .product-evidence-gallery,
  body:has(.product-hero-exam-sprint) .product-evidence-gallery{gap:18px}
  body:has(.product-hero-preview-tutoring) .product-evidence-card,
  body:has(.product-hero-exam-sprint) .product-evidence-card{flex:auto;padding:6px 6px 18px}
  body:has(.product-hero-preview-tutoring) .product-evidence-card figure,
  body:has(.product-hero-exam-sprint) .product-evidence-card figure,
  body:has(.product-hero-preview-tutoring) .product-evidence-card.is-classroom figure,
  body:has(.product-hero-exam-sprint) .product-evidence-card.is-classroom figure{aspect-ratio:16/9}
  body:has(.product-hero-preview-tutoring) .product-evidence-card>div,
  body:has(.product-hero-exam-sprint) .product-evidence-card>div{
    display:block;padding:15px 12px 0;
  }
  body:has(.product-hero-preview-tutoring) .product-evidence-card>div h3,
  body:has(.product-hero-exam-sprint) .product-evidence-card>div h3{font-size:23px;margin:6px 0}
  body:has(.product-hero-preview-tutoring) .product-evidence-card>div p,
  body:has(.product-hero-exam-sprint) .product-evidence-card>div p{font-size:14px}
  body:has(.product-hero-preview-tutoring) .classroom-screen-stage,
  body:has(.product-hero-exam-sprint) .classroom-screen-stage{inset:27px 0 0}
  body:has(.product-hero-preview-tutoring) .classroom-window-bar,
  body:has(.product-hero-exam-sprint) .classroom-window-bar{height:27px}
}
