* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { color: #2d2f31; font-family: Arial, Helvetica, sans-serif; font-size: 14px; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.site-header { height: 73px; display: flex; align-items: center; gap: 24px; padding: 0 21px; border: 1px solid #f7f7f7; box-shadow: 0 2px 8px #00000015; white-space: nowrap; }
.brand { flex: 0 0 auto; width: 89px; display: flex; align-items: center; }
.brand img { display: block; width: 93px; height: 37px; object-fit: contain; }
.header-link { color: #2d2f31; font-size: 13px; }
.subscribe { margin-right: 5px; }
.header-link:hover, .course-title:hover, .verification-copy a:hover { color: #5624d0; }
.header-search { height: 48px; flex: 1; min-width: 100px; border: 1px solid #c9cde5; border-radius: 999px; display: flex; align-items: center; gap: 12px; padding: 0 11px; color: #667085; font-size: 13px; }
.header-search svg { width: 15px; height: 15px; fill: none; stroke: #667085; stroke-width: 1.5; }
.cart { width: 20px; height: 20px; margin-left: 8px; }
.cart svg, .language svg, .download-button svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav-button { height: 40px; border: 1px solid #6d28d9; color: #5624d0; border-radius: 8px; padding: 0 19px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.nav-button.login { margin-left: -8px; }
.nav-button.signup { color: white; background: #6d28d9; padding: 0 15px; margin-left: -14px; }
.nav-button.language { width: 40px; padding: 10px; margin-left: -16px; }
.page-layout { max-width: 1291px; margin: 24px auto 0; display: grid; grid-template-columns: minmax(0, 945px) minmax(0, 322px); gap: 24px; align-items: start; }
.certificate-frame { width: 100%; border: 1px solid #d1d7ed; padding: 19px 19px 16px; background: white; }
.certificate-link { display: block; width: 100%; line-height: 0; }
.certificate-link[aria-disabled="true"] { cursor: default; }
.certificate-preview { display: block; width: 100%; height: auto; aspect-ratio: 905 / 666; object-fit: contain; background: #f8f9fc; }
.pdf-fallback { aspect-ratio: 905 / 666; display: grid; place-items: center; margin: 0; background: #f8f9fc; font-size: 15px; line-height: 1.4; text-align: center; }
.verification-copy { margin: 10px 0 0; font-size: 15.5px; line-height: 25.5px; letter-spacing: .05px; }
.verification-copy a { color: #5624d0; }
.course-sidebar h2 { font-size: 17px; line-height: 21px; margin: 2px 0 16px; font-weight: 700; }
.recipient-row { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.avatar { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: white; background: #191b22; font-size: 15px; font-weight: 700; }
.course-sidebar h2.course-heading { margin: 26px 0 15px; }
.course-image { display: block; width: 100%; aspect-ratio: 322 / 182; object-fit: cover; }
.course-title { display: block; margin-top: 9px; font-size: 15px; line-height: 19px; font-weight: 700; }
.instructor { margin-top: 3px; font-size: 12px; color: #565c76; }
.rating-line { display: flex; align-items: center; gap: 4px; margin-top: 5px; font-size: 13px; color: #8b4309; }
.stars { font-size: 13px; letter-spacing: -2px; color: #b45f06; margin-right: 4px; }
.review-count { color: #565c76; font-size: 12px; }
.course-duration { margin-top: 5px; color: #565c76; font-size: 12px; }
.price-line { margin-top: 9px; display: flex; align-items: baseline; gap: 9px; font-size: 15px; }
.price-line s { color: #686f87; font-size: 13px; }
.download-button { margin-top: 27px; height: 40px; width: max-content; border: 1px solid #6d28d9; border-radius: 8px; color: #5624d0; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; padding: 0 13px; }
.download-button svg { width: 14px; height: 17px; }
.download-button:hover, .nav-button.login:hover, .nav-button.language:hover { background: #f5f1ff; }
.loading { max-width: 1290px; margin: 36px auto; }
@media (max-width: 1350px) { .page-layout { margin-left: 24px; margin-right: 24px; } .site-header { gap: 16px; } }
@media (max-width: 1000px) { .site-header .business, .site-header .teach, .site-header .subscribe { display: none; } .page-layout { grid-template-columns: minmax(0, 1fr) 270px; gap: 20px; } }
@media (max-width: 760px) { .site-header { height: 62px; gap: 16px; padding: 0 16px; } .site-header .explore, .site-header .cart, .site-header .login, .site-header .signup, .site-header .language { display: none; } .brand { width: 89px; } .header-search { height: 40px; } .page-layout { display: flex; flex-direction: column; margin: 16px; gap: 26px; } .primary-column, .course-sidebar { width: 100%; } .certificate-frame { padding: 10px; } .course-sidebar { padding-bottom: 30px; } .course-image { max-width: 380px; } .verification-copy { font-size: 14px; line-height: 23px; } }