/* A4: User-approved visual. Keep the raster identical and overlay semantic links. */
.approved-sr-only {
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.hero-approved {
  display:block; position:relative; max-width:1672px; min-height:0;
  margin:0 auto 38px; padding:0; border-radius:0; overflow:visible;
  background:#07372c;
}
.hero-approved::after { content:none; }
.hero-approved .approved-desktop {
  position:relative;display:block;line-height:0;isolation:isolate;
}
.hero-approved .approved-desktop img {
  display:block; width:100%; height:auto; aspect-ratio:1672/941;
  object-fit:contain; max-width:100%; border:0;
}
.hero-approved .approved-desktop::after {
  content:"";position:absolute;z-index:0;inset:0;pointer-events:none;
  background:transparent;
}
.hero-approved .approved-hit {
  z-index:2;position:absolute;display:flex;justify-content:center;
  align-items:center;box-sizing:border-box;border-radius:999px;
  text-decoration:none;line-height:1.2;text-align:center;
  color:transparent;background:transparent;outline:none;outline-offset:0;
  transition:box-shadow .17s ease,background-color .17s ease;
}
/* Focus / hover stays INSIDE the printed buttons; no offset or doubled outer ring. */
.hero-approved .approved-hit:hover {
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 0 0 2px rgba(255,250,232,.76);
}
.hero-approved .approved-hit:focus-visible {
  background:rgba(255,255,255,.075);
  outline:3px solid #fff9e9;outline-offset:-4px;
  box-shadow:inset 0 0 0 6px rgba(2,51,40,.76);
}
.hero-approved .approved-hit:active { background:rgba(0,0,0,.13); }
/* Measured on the unmodified 1672×941 approved PNG (pixel bounding rectangles):
   Practice (61,404)-(386,476), Timed (405,403)-(729,474).
   These are NOT interchangeable: the printed pills differ slightly in size. */
.hero-approved .approved-hit.practice {
  left:3.648%;top:42.934%;width:19.438%;height:7.651%;
}
.hero-approved .approved-hit.timed {
  left:24.222%;top:42.827%;width:19.378%;height:7.545%;
}
.hero-approved .approved-mobile { display:none; }
.hero-approved .approved-mobile .mobile-top {
  padding:26px 20px 13px;
  background:linear-gradient(135deg,#003b33,#062a28 68%,#123a35);
}
.hero-approved .mobile-kicker {
  margin:0;color:#ffb16d;font-size:13px;letter-spacing:.04em;font-weight:750;
}
.hero-approved .approved-mobile h1,
.hero-approved .approved-mobile h2 {
  margin:10px 0 6px;color:#ff972a;font-size:clamp(45px,12vw,68px);
  letter-spacing:-.07em;line-height:1.25;text-shadow:0 3px 20px #0004;
}
.hero-approved .approved-mobile .mobile-slogan {
  color:#f9f6ea;font-size:17px;font-weight:730;line-height:1.65;margin:4px 0 20px;
}
.hero-approved .approved-mobile .mobile-cta { display:grid;gap:11px; }
.hero-approved .approved-mobile .mobile-cta a {
  display:flex;align-items:center;justify-content:space-between;
  font-weight:800;font-size:16px;min-height:53px;padding:11px 19px;border-radius:13px;
}
.hero-approved .approved-mobile .mobile-cta .primary {
  color:#221709;background:linear-gradient(115deg,#ffb63f,#ef6c14);
  box-shadow:0 9px 21px #d95a2945;border:1px solid #ffbb66;
}
.hero-approved .approved-mobile .mobile-cta .timed {
  color:#fff7e9;background:#082823;border:2px solid #ffaf4b;
}
.hero-approved .approved-mobile .mobile-cta a:focus-visible {
  outline:3px solid #fff;outline-offset:3px;
}
.hero-approved .mobile-scene {
  position:relative;overflow:hidden;background:#074337;height:clamp(290px,88vw,450px);
  isolation:isolate;
}
 .hero-approved .mobile-scene img {
  position:absolute;inset:0;width:100%;height:100%;max-width:100%;
  object-fit:cover;object-position:52% 53%;pointer-events:none;
}
.hero-approved .mobile-scene::after {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#052f2c44,transparent 30%,#04372c88 100%);
}
.hero-approved .mobile-tags {
  background:#063b33;padding:15px 14px 19px;
  display:flex;flex-wrap:wrap;gap:9px;justify-content:center;
}
.hero-approved .mobile-tags span {
  font-size:12px;font-weight:650;color:#faf8ed;border:1px solid #ffa145;
  border-radius:999px;padding:7px 11px;background:#06342e;
}
@media(max-width:1000px) {
  .hero-approved { margin:0 16px 28px; border-radius:18px;overflow:hidden; }
  .hero-approved .approved-desktop { display:none; }
  .hero-approved .approved-mobile { display:block; }
}
@media(max-width:540px) {
  .hero-approved { margin:0 10px 22px; }
  .hero-approved .mobile-scene { height:300px; }
  .hero-approved .mobile-scene img { object-position:51% 53%; }
}
@media(prefers-reduced-motion:reduce) {
  .hero-approved .approved-hit { transition:none; }
}