/* Personal Plan reference: shared public header, home hero, and footer. */
.landing { --plan-purple: #6d28d2; }
.landing-header { position: relative; border: 0; box-shadow: 0 2px 8px #18202b14; }
.landing-header__inner { width: calc(100% - 48px); min-height: 72px; gap: 22px; }
.landing-wordmark { position: relative; font-size: 32px; line-height: 1.2; }
.landing-wordmark::before { content: ''; position: absolute; top: -5px; inset-inline-start: 4px; width: 15px; height: 7px; background: var(--plan-purple); clip-path: polygon(0 100%, 50% 0, 100% 100%, 100% 70%, 50% 35%, 0 70%); }
.landing-explore, .landing-nav a { font-size: 14px; font-weight: 400; }
.landing-header__search { min-width: 120px; }
.ud-search input { border-color: #9194ac; background: #f6f7f9; }
.ud-search i { left: auto; inset-inline-start: 16px; }
.ud-search input { padding: 0 18px; padding-inline-start: 44px; }
.landing-header__actions { flex-shrink: 0; }
.landing-header__actions .landing-btn { border-radius: 5px; min-height: 40px; }
.landing-btn--purple { background: var(--plan-purple); }
.landing-btn--purple:hover { background: #5022a0; }
.landing-header__actions .landing-btn--ghost { border-color: var(--plan-purple); color: var(--plan-purple); }
.landing-nav__lang { width: 40px; height: 40px; border: 1px solid var(--plan-purple); border-radius: 5px; justify-content: center; color: var(--plan-purple); text-decoration: none; }
.landing-header__certificate { font-size: 22px !important; }
.ud-hero { min-height: 430px; padding: 64px 0; background: #f6f7f9; }
.ud-hero__visual { position: absolute; inset-block: 0; inset-inline-end: 0; width: 48%; display: block; }
.ud-hero__photo { position: absolute; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.ud-hero__stage { width: min(1180px, calc(100% - 96px)); }
.ud-hero__card { width: 51%; padding: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: start; }
.ud-hero__chip { padding: 0; background: none; color: #8b55d9; font-size: 16px; margin: 0 0 16px; }
.ud-hero__chip i { display: none; }
.ud-hero h1 { max-width: 480px; font-size: 40px; line-height: 1.25; font-weight: 800; }
.ud-hero__card > p:last-of-type { margin-top: 24px; color: #303141; font-size: 18px; line-height: 1.65; }
.ud-hero__cta { min-width: 280px; margin-top: 24px; border-radius: 5px; }
.ud-hero__card small { max-width: 280px; text-align: center; font-size: 12px; line-height: 1.6; }
.ud-stats { background: #fff; color: #303141; }
.ud-stats__grid { padding: 40px 0; }
.ud-stats h2 { color: #303141; }
.ud-stats p { color: #595c73; }
.landing-footer { background: #202230; }
.landing-footer__skills { padding: 40px 48px; background: #303141; }
.landing-footer__skills > h2 { font-size: 24px; margin-bottom: 28px; }
.landing-footer__skill-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.landing-footer__skill-grid h3 { margin: 0 0 8px; color: #fff; font-size: 16px; }
.landing-footer nav { gap: 8px; }
.landing-footer a { font-weight: 400; font-size: 14px; line-height: 1.6; }
.landing-footer a:hover { text-decoration: underline; }
.landing-footer__grid { width: calc(100% - 96px); grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 40px 0; }
.landing-footer__brand .landing-logo__mark { display: none; }
.landing-footer__brand small { margin-top: 12px; font-weight: 400; line-height: 1.7; }
.landing-footer__bar { width: calc(100% - 96px); display: flex; align-items: center; gap: 24px; border: 0; padding: 24px 0 32px; font-size: 12px; font-weight: 400; }
.landing-footer__bar .landing-wordmark { font-size: 30px; font-weight: 800; }
.landing-footer__language { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.landing a:focus-visible, .landing button:focus-visible, .landing summary:focus-visible { outline: 3px solid #a78bfa; outline-offset: 4px; }
@media (max-width: 1200px) { .landing-subscription { display: none; } .landing-header__inner { gap: 14px; } .landing-nav { gap: 14px; } }
@media (max-width: 980px) {
    .landing-header__inner { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; padding: 16px 0; }
    .landing-header__actions { display: flex; flex-direction: row; align-items: center; margin-inline-start: auto; }
    .landing-header__search { order: 4; flex-basis: 100%; }
    .landing-nav { display: flex; flex-direction: row; padding: 0; }
    .ud-hero__stage { display: flex; flex-direction: row; }
    .ud-hero__card { width: 52%; }
    .ud-stats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .landing-footer__grid, .landing-footer__skill-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .landing-header__inner { width: calc(100% - 32px); gap: 12px; }
    .landing-wordmark { font-size: 28px; }
    .landing-explore { display: none; }
    .landing-header__actions .landing-btn { padding: 0 10px; font-size: 12px; }
    .landing-nav { justify-content: space-between; gap: 12px; }
    .landing-nav a { font-size: 13px; }
    .ud-hero { display: flex; flex-direction: column; padding: 0; }
    .ud-hero__visual { position: relative; order: 0; width: 100%; height: 260px; }
    .ud-hero__stage { order: 1; width: calc(100% - 40px); padding: 28px 0 36px; }
    .ud-hero__card { width: 100%; }
    .ud-hero h1 { font-size: 32px; }
    .ud-hero__card > p:last-of-type { font-size: 16px; margin-top: 16px; }
    .ud-hero__cta, .ud-hero__card small { width: 100%; max-width: none; min-width: 0; }
    .ud-stats__grid { gap: 24px; }
    .landing-footer__skills { padding: 32px 20px; }
    .landing-footer__skills > h2 { font-size: 22px; }
    .landing-footer__skill-grid { grid-template-columns: 1fr; gap: 24px; }
    .landing-footer__grid, .landing-footer__bar { width: calc(100% - 40px); }
    .landing-footer__grid { grid-template-columns: 1fr; }
    .landing-footer__bar { flex-wrap: wrap; gap: 20px; }
    .landing-footer__bar > span { order: 3; width: 100%; }
}

@font-face { font-family: 'Udemy Sans'; src: url('../fonts/udemy/Udemy-Sans-Light-v1.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Udemy Sans'; src: url('../fonts/udemy/Udemy-Sans-Regular-v1.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Udemy Sans'; src: url('../fonts/udemy/Udemy-Sans-Medium-v1.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Udemy Sans'; src: url('../fonts/udemy/Udemy-Sans-Bold-v1.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('../fonts/udemy/Vazirmatn-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('../fonts/udemy/Vazirmatn-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
.landing { font-family: 'Udemy Sans', Vazirmatn, -apple-system, BlinkMacSystemFont, Roboto, 'Segoe UI', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 300; line-height: 1.6; color: oklch(0.2974 0.0362 281.74); }
.landing-header .landing-explore, .landing-header .landing-nav a { font-size: 14px; font-weight: 300; line-height: 1.6; color: oklch(0.2974 0.0362 281.74); }
.landing .landing-btn { font-weight: 700; font-size: 16px; line-height: 1.2; }
.landing-header .landing-btn { font-size: 14px; }
.ud-search input { font-weight: 300; font-size: 14px; color: oklch(0.2974 0.0362 281.74); }
.ud-search input::placeholder { color: oklch(0.4809 0.0371 279.08); opacity: 1; }
.ud-hero h1 { font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: 0; color: oklch(0.2974 0.0362 281.74); }
.ud-hero__chip { font-size: 18px; font-weight: 500; line-height: 1.2; color: oklch(0.5844 0.2596 306.65); }
.ud-hero__card > p:last-of-type { font-size: 18px; font-weight: 300; line-height: 1.5; color: oklch(0.2974 0.0362 281.74); }
.ud-hero__card small { font-size: 12px; font-weight: 300; line-height: 1.4; color: oklch(0.4809 0.0371 279.08); }
.landing-footer__skills > h2 { font-size: 18px; font-weight: 500; line-height: 1.2; color: #fff; }
.landing-footer h2, .landing-footer__skill-grid h3 { font-size: 16px; font-weight: 500; line-height: 1.2; color: #fff; }
.landing-footer a { font-size: 14px; font-weight: 300; line-height: 1.6; color: #fff; }
.landing-footer__bar, .landing-footer__brand small { font-size: 12px; font-weight: 300; line-height: 1.4; color: #fff; }
@media (max-width: 700px) {
    .ud-hero h1 { font-size: 32px; }
    .ud-hero__card > p:last-of-type { font-size: 18px; }
    .landing-header__actions .landing-btn { font-size: 14px; }
    .landing-footer__skills > h2 { font-size: 18px; }
}

@font-face { font-family: Vazirmatn; src: url('../fonts/udemy/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url('../fonts/udemy/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

.landing-header .landing-header__certificate { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; line-height: 1; }
.landing-header__certificate svg { display: block; flex-shrink: 0; }

/* Udemy header interaction colors, taken from its current stylesheet. */
.landing {
    --plan-purple: oklch(48.41% 0.2342 293.93deg);
    --plan-purple-hover: oklch(53.33% 0.2476 301.09deg);
    --plan-hover-wash: color-mix(in oklch, oklch(20.35% 0.0139 285.09deg) 4%, transparent);
}
.landing-header .landing-btn--purple:hover,
.landing-header .landing-btn--purple:active {
    color: #fff;
    background-color: var(--plan-purple-hover);
}
.landing-header .landing-btn--ghost:hover,
.landing-header .landing-btn--ghost:active,
.landing-header .landing-nav__lang:hover,
.landing-header .landing-nav__lang:active {
    color: var(--plan-purple);
    background-color: var(--plan-hover-wash);
}
.landing-header .landing-explore:hover,
.landing-header .landing-explore:active,
.landing-header .landing-nav a:hover,
.landing-header .landing-nav a:active {
    color: var(--plan-purple);
    text-decoration: none;
}
.landing-header .landing-header__certificate { border-radius: 4px; }
.landing-header .landing-header__certificate:hover,
.landing-header .landing-header__certificate:active {
    background-color: var(--plan-hover-wash);
}
.landing-header .ud-search input:hover {
    background-color: oklch(97.59% 0.0029 264.54deg);
}
.landing-header .ud-search:focus-within input {
    background-color: #fff;
    border-color: var(--plan-purple);
    box-shadow: inset 0 0 0 .5px var(--plan-purple);
    outline: none;
}

.landing-wordmark--image::before { display: none; }
.landing-wordmark--image img { display: block; width: 56px; height: 56px; object-fit: contain; border-radius: 50%; }
.landing-footer .landing-wordmark--image img { width: 64px; height: 64px; }

.elixir-banner { width: min(1440px, 100%); margin: 0 auto; background: #f2eadd; }
.elixir-banner img { display: block; width: 100%; height: auto; }
.elixir-banner__title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.majalis-section { padding: 56px 0 24px; background: #fff; }
.majalis-section__heading { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 28px; }
.majalis-section__eyebrow { margin: 0 0 8px; color: #6d28d2; font-size: 13px; font-weight: 500; }
.majalis-section__heading h2 { margin: 0 0 10px; color: #303141; font-size: 32px; font-weight: 500; line-height: 1.3; }
.majalis-section__heading p:not(.majalis-section__eyebrow) { margin: 0; color: #595c73; font-size: 15px; }
.majalis-section__all { display: inline-flex; align-items: center; gap: 10px; color: #6d28d2; font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
.majalis-section__all:hover { text-decoration: underline; }
.majalis-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.majalis-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e7e8ed; border-radius: 14px; background: #fff; transition: box-shadow .2s,border-color .2s; }
.majalis-card:hover { border-color: #c7b5e5; box-shadow: 0 8px 28px #30314110; }
.majalis-card__image { display: block; background: #f5f3f8; overflow: hidden; aspect-ratio: 1; }
.majalis-card__image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.majalis-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.majalis-card__category { color: #7b668e; font-size: 12px; margin-bottom: 10px; }
.majalis-card h3 { margin: 0 0 24px; font-size: 18px; line-height: 1.65; font-weight: 500; }
.majalis-card h3 a { color: #303141; text-decoration: none; }
.majalis-card h3 a:hover { color: #6d28d2; }
.majalis-card__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid #eeedf2; }
.majalis-card__price { display: flex; align-items: baseline; gap: 6px; margin: 0; color: #303141; }
.majalis-card__price strong { font-size: 28px; font-weight: 500; line-height: 1; }
.majalis-card__price span { font-size: 12px; color: #595c73; }
.majalis-card__cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 11px 14px; border-radius: 6px; color: #6d28d2; background: #f3edfc; text-decoration: none; font-size: 13px; font-weight: 500; }
.majalis-card__cta:hover { background: #e9ddfa; }
.majalis-section__note { margin: 22px 0 0; font-size: 12px; color: #74778a; }
@media(max-width:980px) { .majalis-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .majalis-section { padding-top: 36px; } .majalis-section__heading { align-items: flex-start; flex-direction: column; gap: 16px; } .majalis-section__heading h2 { font-size: 28px; } .majalis-grid { grid-template-columns: 1fr; gap: 20px; } }
@media(prefers-reduced-motion:reduce) { .majalis-card { transition: none; } }

.majalis-card__price .icon-saudi_riyal { font-size: 20px; color: #303141; }

.reference-hero { position: relative; overflow: hidden; background: linear-gradient(115deg,#23113e,#421779 60%,#200c3c); min-height: 500px; display: flex; align-items: center; }
.reference-hero__visual { position: absolute; inset-block: 0; left: 0; width: 59%; overflow: hidden; clip-path: polygon(0 24%,24% 0,42% 0,30% 40%,61% 0,79% 0,67% 53%,91% 16%,100% 25%,100% 85%,87% 100%,0 100%); }
.reference-hero__visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.reference-hero__stage { position: relative; z-index: 1; display: flex; justify-content: flex-start; padding: 48px 0; width: min(1250px,calc(100% - 64px)); }
.reference-hero__card { width: 48%; background: #fff; border-radius: 24px; padding: 32px; color: #172a4b; }
.reference-hero__badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 4px 8px; background: #ececf5; color: #243b64; font-size: 12px; line-height: 1.4; border-radius: 4px; }
.reference-hero h1 { font-family: inherit; font-size: 36px; font-weight: 400; color: #172a4b; line-height: 1.2; margin: 0; }
.reference-hero__description { color: #172a4b; font-size: 16px; font-weight: 300; line-height: 1.7; margin: 22px 0 18px; }
.reference-hero__cta { width: 280px; max-width: 100%; min-height: 48px; border-radius: 8px; }
.reference-hero__cta:hover { background: var(--plan-purple-hover); }
.reference-hero__card small { display: block; margin-top: 12px; color: #7380a1; font-size: 12px; line-height: 1.4; }
.reference-hero + .ud-stats { background: linear-gradient(110deg,#2a1648,#161029); }
.reference-hero + .ud-stats h2 { color: #fff; font-size: 16px; font-weight: 500; }
.reference-hero + .ud-stats p { color: #eee8fb; font-size: 14px; }
.reference-hero + .ud-stats .ud-stats__grid { padding: 32px 0; text-align: start; }
[dir="ltr"] .reference-hero__stage { justify-content: flex-end; }
@media(max-width:980px) { .reference-hero__card { width: 54%; padding: 28px; } .reference-hero h1 { font-size: 30px; } }
@media(max-width:700px) { .reference-hero { flex-direction: column; min-height: 0; } .reference-hero__visual { position: relative; width: 100%; height: 240px; clip-path: polygon(0 20%,35% 0,25% 35%,65% 0,100% 0,100% 100%,0 100%); } .reference-hero__stage { width: calc(100% - 32px); padding: 0 0 24px; margin-top: -20px; } .reference-hero__card { width: 100%; padding: 24px; border-radius: 18px; } .reference-hero h1 { font-size: 30px; } .reference-hero__cta { width: 100%; } }

/* Fill the visible viewport beneath the actual responsive header. */
.reference-hero {
    box-sizing: border-box;
    min-height: calc(100vh - var(--public-header-height, 72px));
    min-height: calc(100dvh - var(--public-header-height, 72px));
}
.reference-hero__stage { box-sizing: border-box; }
@media(max-width:700px) {
    .reference-hero { justify-content: center; }
    .reference-hero__visual { flex: 1 0 180px; min-height: 180px; height: clamp(180px, 30dvh, 360px); }
    .reference-hero__stage { flex-shrink: 0; }
}

/* Show the hero artwork without the purple cutout overlay. */
.reference-hero__visual { clip-path: none; }

.hero-complete { display: flex; flex-direction: column; min-height: calc(100vh - var(--public-header-height,72px)); min-height: calc(100dvh - var(--public-header-height,72px)); }
.hero-complete .reference-hero { flex: 1; min-height: 0; }
.hero-complete > .ud-stats { flex-shrink: 0; }

.majalis-grid.majalis-slider { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - 72px) / 4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 18px; scrollbar-width: thin; scrollbar-color: #c8b6e6 #f6f3fa; }
.majalis-slider .majalis-card { scroll-snap-align: start; min-width: 0; }
.majalis-slider .majalis-card__body { padding: 18px; }
.majalis-slider .majalis-card__bottom { flex-wrap: wrap; }
.majalis-slider__controls { display: flex; justify-content: flex-end; gap: 8px; margin: -8px 0 16px; }
.majalis-slider__controls button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #d8d3e2; border-radius: 50%; background: #fff; color: #6d28d2; cursor: pointer; }
.majalis-slider__controls button:hover { background: #f3edfc; border-color: #6d28d2; }
@media(max-width:1100px) { .majalis-grid.majalis-slider { grid-auto-columns: calc((100% - 48px) / 3); } }
@media(max-width:800px) { .majalis-grid.majalis-slider { grid-auto-columns: calc((100% - 24px) / 2); } }
@media(max-width:600px) { .majalis-grid.majalis-slider { grid-auto-columns: 85%; } }

.isnad-services { padding: 64px 0; background: #f7f5fb; border-block: 1px solid #eee9f5; }
.isnad-services__heading { max-width: 720px; margin: 0 auto 32px; text-align: center; }
.isnad-services__heading > span { display: inline-block; color: #6d28d2; font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.isnad-services__heading h2 { margin: 0 0 12px; color: #282337; font-size: clamp(26px,3vw,34px); line-height: 1.5; font-weight: 700; }
.isnad-services__heading p { margin: 0; color: #666174; font-size: 15px; line-height: 1.8; }
.isnad-services__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.isnad-service { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; border: 1px solid #e8e2f0; border-radius: 18px; background: #fff; text-decoration: none; color: #282337; transition: border-color .2s,box-shadow .2s,transform .2s; }
.isnad-service__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: #f1eafa; color: #6d28d2; font-size: 22px; margin-bottom: 22px; }
.isnad-service h3 { margin: 0 0 10px; font-size: 20px; line-height: 1.5; font-weight: 700; }
.isnad-service p { margin: 0 0 24px; color: #666174; font-size: 14px; line-height: 1.9; }
.isnad-service__link { display: flex; align-items: center; justify-content: space-between; align-self: stretch; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid #eee9f5; color: #6d28d2; font-size: 14px; font-weight: 700; }
.isnad-service:hover { border-color: #bda2df; box-shadow: 0 10px 28px #3923570d; transform: translateY(-3px); }
.isnad-service:focus-visible { outline: 2px solid #6d28d2; outline-offset: 4px; }
@media(max-width:800px) { .isnad-services__grid { grid-template-columns: 1fr; } .isnad-services { padding: 40px 0; } .isnad-service { padding: 24px; } }
@media(prefers-reduced-motion:reduce) { .isnad-service { transition: none; } .isnad-service:hover { transform: none; } }

.isnad-support { padding: 64px 0 72px; background: #fff; }
.isnad-support__banner { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 40px 44px; border-radius: 24px; background: linear-gradient(120deg,#231239,#4a2080); color: #fff; }
.isnad-support__eyebrow { display: block; margin-bottom: 12px; font-size: 13px; font-weight: 500; color: #decafa; }
.isnad-support__banner h2 { margin: 0 0 12px; font-size: clamp(25px,3vw,32px); line-height: 1.5; color: #fff; font-weight: 700; }
.isnad-support__banner p { margin: 0; color: #e8dff5; font-size: 15px; line-height: 1.8; }
.isnad-support__button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; flex-shrink: 0; padding: 15px 22px; border-radius: 10px; background: #fff; color: #51238b; font-size: 15px; font-weight: 700; text-decoration: none; transition: background .2s; }
.isnad-support__button:hover { background: #efe5fc; }
.isnad-faq { display: grid; grid-template-columns: 1fr 1.8fr; gap: 64px; align-items: start; margin-top: 60px; scroll-margin-top: 96px; }
.isnad-faq__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #f3edfc; color: #6d28d2; font-size: 24px; margin-bottom: 18px; }
.isnad-faq__intro h2 { margin: 0 0 12px; font-size: 30px; font-weight: 700; color: #282337; }
.isnad-faq__intro p { margin: 0 0 20px; color: #666174; font-size: 15px; line-height: 1.9; }
.isnad-faq a { color: #6d28d2; font-size: 14px; font-weight: 500; text-underline-offset: 4px; }
.isnad-faq__list { display: grid; gap: 12px; }
.isnad-faq details { border: 1px solid #e8e2f0; border-radius: 12px; overflow: hidden; background: #fff; }
.isnad-faq details[open] { background: #faf8fd; border-color: #d4c3eb; }
.isnad-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 500; color: #282337; }
.isnad-faq summary::-webkit-details-marker { display: none; }
.isnad-faq summary > span { position: relative; width: 22px; height: 22px; flex-shrink: 0; color: #6d28d2; }
.isnad-faq summary > span::before,.isnad-faq summary > span::after { content: ''; position: absolute; background: currentColor; border-radius: 1px; top: 10px; left: 4px; width: 14px; height: 2px; }
.isnad-faq summary > span::after { transform: rotate(90deg); }
.isnad-faq details[open] summary > span::after { display: none; }
.isnad-faq details p { margin: 0; padding: 0 22px 22px; color: #595467; font-size: 14px; line-height: 1.9; }
.isnad-faq details p a { display: inline-block; margin-inline-start: 4px; }
.isnad-faq summary:focus-visible,.isnad-support__button:focus-visible { outline: 2px solid #a477e8; outline-offset: -3px; }
@media(max-width:800px) { .isnad-faq { grid-template-columns: 1fr; gap: 24px; margin-top: 36px; } .isnad-support__banner { flex-direction: column; align-items: flex-start; padding: 28px; gap: 24px; } .isnad-support { padding: 40px 0; } }
@media(max-width:480px) { .isnad-support__button { width: 100%; box-sizing: border-box; } .isnad-faq summary { padding: 18px; font-size: 15px; } .isnad-faq details p { padding: 0 18px 18px; } }

.isnad-footer { background: #201b2d; color: #fff; padding: 32px 0 18px; }
.isnad-footer__main { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-bottom: 28px; }
.isnad-footer a { text-decoration: none; }
.isnad-footer__brand { display: flex; align-items: center; gap: 14px; color: #fff; }
.isnad-footer__brand img { width: 56px; height: 56px; object-fit: contain; border-radius: 50%; flex-shrink: 0; }
.isnad-footer__brand strong { display: block; font-size: 15px; font-weight: 700; }
.isnad-footer__brand small { display: block; color: #c2bccd; margin-top: 7px; font-size: 12px; }
.isnad-footer__links { display: flex; flex-wrap: wrap; gap: 14px 22px; max-width: 430px; }
.isnad-footer__links a { color: #e5e0ec; font-size: 13px; }
.isnad-footer__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.isnad-footer__whatsapp { display: flex; align-items: center; gap: 12px; flex-shrink: 0; padding: 12px 18px; border: 1px solid #507564; border-radius: 10px; background: #ffffff06; color: #fff; font-size: 13px; font-weight: 500; }
.isnad-footer__whatsapp > i { font-size: 28px; color: #6ce5a3; }
.isnad-footer__whatsapp small { display: block; margin-top: 5px; color: #c9d8d0; font-size: 12px; }
.isnad-footer__whatsapp:hover { background: #ffffff0d; border-color: #6ce5a3; }
.isnad-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-top: 18px; border-top: 1px solid #ffffff16; color: #bab3c6; font-size: 12px; }
.isnad-footer__bottom a { color: #e5e0ec; display: inline-flex; align-items: center; gap: 8px; }
.isnad-footer a:focus-visible { outline: 2px solid #b995ef; outline-offset: 5px; }
@media(max-width:1000px) { .isnad-footer__main { flex-wrap: wrap; } .isnad-footer__links { max-width: none; } }
@media(max-width:600px) { .isnad-footer__main { align-items: flex-start; flex-direction: column; gap: 24px; } .isnad-footer__bottom { align-items: flex-start; flex-wrap: wrap; line-height: 1.8; } }

.isnad-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 100px; }
.isnad-header__logo { flex-shrink: 0; display: block; background: none; border: 0; box-shadow: none; }
.isnad-header__logo img { display: block; width: 76px; height: 76px; object-fit: contain; border-radius: 0; background: none; }
.isnad-header__nav { display: flex; align-items: center; gap: 32px; margin-inline-end: auto; }
.isnad-header__nav a { color: #303141; font-size: 14px; font-weight: 500; text-decoration: none; padding-block: 12px; }
.isnad-header__nav a:hover { color: #6d28d2; }
.isnad-header__actions { display: flex; align-items: center; gap: 16px; }
.isnad-header__contact { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #6d28d2; color: #fff; border-radius: 8px; padding: 12px 18px; text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap; }
.isnad-header__contact:hover { background: #7d36df; }
.isnad-header__contact i { font-size: 20px; }
.isnad-header__language { display: inline-flex; align-items: center; gap: 7px; color: #595467; text-decoration: none; font-size: 13px; padding: 10px 0; }
.isnad-header__language:hover { color: #6d28d2; }
.isnad-header a:focus-visible { outline: 2px solid #6d28d2; outline-offset: 4px; }
.isnad-footer__brand img { border-radius: 50%; filter: none; }
@media(max-width:800px) { .isnad-header__inner { flex-wrap: wrap; gap: 0 16px; padding-block: 8px; } .isnad-header__logo img { width: 66px; height: 66px; } .isnad-header__actions { margin-inline-start: auto; } .isnad-header__nav { order: 3; width: 100%; justify-content: center; gap: 24px; border-top: 1px solid #eee9f5; } .isnad-header__nav a { font-size: 13px; padding-block: 12px; } }
@media(max-width:400px) { .isnad-header__nav { gap: 14px; } .isnad-header__nav a { font-size: 12px; } .isnad-header__contact { padding: 10px 12px; } }

[x-cloak] { display: none !important; }
.isnad-language { position: relative; flex-shrink: 0; }
.isnad-language__trigger { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 12px; border: 1px solid #e0d9ea; border-radius: 8px; background: #fff; color: #303141; font: inherit; font-size: 13px; cursor: pointer; }
.isnad-language img { display: block; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px #0000000d; flex-shrink: 0; }
.isnad-language__trigger:hover { background: #f7f3fc; border-color: #bda2df; }
.isnad-language__trigger > i { font-size: 10px; color: #777083; transition: transform .15s; }
.isnad-language__trigger > i.is-open { transform: rotate(180deg); }
.isnad-language__menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); width: 180px; padding: 6px; background: #fff; border: 1px solid #e8e2f0; border-radius: 12px; box-shadow: 0 10px 32px #201b2d1a; z-index: 100; }
.isnad-language__menu a { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 7px; color: #303141; text-decoration: none; font-size: 14px; }
.isnad-language__menu a:hover,.isnad-language__menu a[aria-current] { background: #f3edfc; color: #6d28d2; }
.isnad-language__menu a > i { margin-inline-start: auto; font-size: 12px; }
.isnad-language__trigger:focus-visible { outline: 2px solid #6d28d2; outline-offset: 3px; }
@media(max-width:400px) { .isnad-header__actions { gap: 8px; } .isnad-language__trigger { padding-inline: 8px; gap: 6px; } }

.certificate-verify { background: linear-gradient(180deg,#f4effb 0%,#faf9fc 60%,#fff 100%); padding: 56px 0 64px; min-height: 65vh; }
.certificate-verify__wrap { max-width: 800px; }
.certificate-verify__intro { text-align: center; max-width: 580px; margin: 0 auto 30px; }
.certificate-verify__emblem { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 20px; background: #6d28d2; color: #fff; font-size: 28px; box-shadow: 0 8px 24px #6d28d226; }
.certificate-verify__eyebrow { color: #6d28d2; font-size: 13px; font-weight: 500; }
.certificate-verify h1 { margin: 12px 0; color: #282337; font-size: clamp(28px,4vw,38px); font-weight: 700; line-height: 1.4; }
.certificate-verify__intro p { margin: 0; color: #666174; font-size: 15px; line-height: 1.9; }
.certificate-verify__card { border: 1px solid #e7dfef; border-radius: 20px; background: #fff; box-shadow: 0 12px 40px #35214908; overflow: hidden; }
.certificate-verify__form { padding: 32px; }
.certificate-verify__form label { display: block; margin-bottom: 12px; color: #303141; font-size: 14px; font-weight: 700; }
.certificate-verify__input-row { display: flex; gap: 12px; }
.certificate-verify__input { display: flex; align-items: center; flex: 1; min-width: 0; border: 1px solid #d6cedf; border-radius: 10px; overflow: hidden; }
.certificate-verify__input > span { padding-inline: 16px 0; color: #8a8296; font-size: 20px; }
.certificate-verify__input input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 16px; font: inherit; font-size: 15px; color: #303141; outline: none; }
.certificate-verify__input:focus-within { border-color: #6d28d2; box-shadow: 0 0 0 3px #6d28d212; }
.certificate-verify__input-row button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; border: 0; border-radius: 10px; background: #6d28d2; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.certificate-verify__input-row button:hover { background: #7d36df; }
.certificate-verify__input-row button:disabled { opacity: .65; cursor: wait; }
.certificate-verify__hint { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; color: #777082; font-size: 12px; line-height: 1.8; }
.certificate-verify__hint i { margin-top: 4px; }
.certificate-verify__error { color: #b42318; font-size: 13px; margin: 10px 0 0; }
.certificate-verify__result { border-top: 1px solid #eee9f5; padding: 28px 32px; }
.certificate-verify__status { display: flex; align-items: flex-start; gap: 14px; }
.certificate-verify__status > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; font-size: 22px; }
.is-valid .certificate-verify__status > span { background: #e9f7ef; color: #16804a; }
.is-warning .certificate-verify__status > span { background: #fff5e1; color: #9b6500; }
.is-revoked .certificate-verify__status > span { background: #feeeee; color: #b42318; }
.certificate-verify__status h2 { font-size: 20px; margin: 0 0 6px; font-weight: 700; color: #282337; }
.certificate-verify__status p { font-size: 13px; line-height: 1.8; color: #666174; margin: 0; }
.certificate-verify__facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; padding: 24px; margin: 24px 0 0; border: 1px solid #eee9f5; border-radius: 12px; background: #faf9fc; }
.certificate-verify__facts dt { font-size: 12px; color: #777082; margin-bottom: 6px; }
.certificate-verify__facts dd { font-size: 15px; color: #303141; font-weight: 500; margin: 0; overflow-wrap: anywhere; }
.certificate-verify__number { grid-column: 1 / -1; }
.certificate-verify__number dd { text-align: start; width: fit-content; }
.certificate-verify__privacy { display: flex; align-items: center; gap: 8px; color: #777082; font-size: 12px; margin: 18px 0 0; line-height: 1.8; }
.certificate-verify__help { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 24px; font-size: 14px; color: #777082; }
.certificate-verify__help a { display: inline-flex; align-items: center; gap: 8px; color: #6d28d2; font-weight: 500; text-decoration: none; }
.certificate-verify__help a:hover { text-decoration: underline; }
.certificate-verify button:focus-visible,.certificate-verify a:focus-visible { outline: 2px solid #6d28d2; outline-offset: 4px; }
@media(max-width:600px) { .certificate-verify { padding: 32px 0 40px; } .certificate-verify__form,.certificate-verify__result { padding: 24px 20px; } .certificate-verify__input-row { flex-direction: column; } .certificate-verify__input-row button { min-height: 48px; } .certificate-verify__facts { grid-template-columns: 1fr; padding: 18px; gap: 18px; } }

.certificate-retrieve__steps { display: flex; justify-content: center; gap: 32px; list-style: none; padding: 0; margin: 0 0 28px; }
.certificate-retrieve__steps li { display: flex; align-items: center; gap: 8px; color: #82798f; font-size: 13px; }
.certificate-retrieve__steps li > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #eae5f0; color: #777082; font-size: 12px; }
.certificate-retrieve__steps .is-current { color: #6d28d2; font-weight: 700; }
.certificate-retrieve__steps .is-current > span { background: #6d28d2; color: #fff; }
.certificate-retrieve__steps .is-complete > span { background: #e2f2e9; color: #16804a; }
.certificate-retrieve__form-title { font-size: 20px; font-weight: 700; color: #282337; margin: 0 0 24px; }
.certificate-retrieve__code-hint { color: #666174; font-size: 14px; line-height: 1.8; margin: -12px 0 20px; }
.certificate-retrieve__code-hint b { display: block; font-weight: 500; width: fit-content; overflow-wrap: anywhere; }
.certificate-retrieve__code { letter-spacing: 8px; }
.certificate-retrieve__notice { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #cce4d7; background: #edf8f2; color: #256044; border-radius: 12px; padding: 16px; font-size: 13px; line-height: 1.8; margin-bottom: 16px; }
.certificate-retrieve__notice i { margin-top: 5px; }
.certificate-retrieve__list { display: grid; gap: 20px; }
.certificate-retrieve__certificate { padding: 28px; }
.certificate-retrieve__certificate-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.certificate-retrieve__award { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #f3edfc; color: #6d28d2; font-size: 22px; }
.certificate-retrieve__certificate h2 { margin: 0; flex: 1; min-width: 150px; font-size: 20px; font-weight: 700; color: #282337; line-height: 1.6; }
.certificate-retrieve__badge { display: inline-block; padding: 5px 10px; border-radius: 20px; background: #e9f7ef; color: #16804a; font-size: 12px; }
.certificate-retrieve__badge.is-revoked { background: #feeeee; color: #b42318; }
.certificate-retrieve__downloads { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.certificate-retrieve__downloads a { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none; }
.certificate-retrieve__preview { border: 1px solid #d6c5eb; color: #6d28d2; }
.certificate-retrieve__preview:hover { background: #f3edfc; }
.certificate-retrieve__download { background: #6d28d2; color: #fff; }
.certificate-retrieve__download:hover { background: #7d36df; }
.certificate-retrieve__empty { padding: 40px 28px; text-align: center; }
.certificate-retrieve__empty > i { color: #9d83bf; font-size: 36px; margin-bottom: 18px; }
.certificate-retrieve__empty h2 { color: #282337; font-size: 22px; margin: 0 0 12px; }
.certificate-retrieve__empty p { color: #666174; font-size: 14px; line-height: 1.9; }
.certificate-retrieve__empty a { color: #6d28d2; font-size: 14px; }
@media(max-width:600px) { .certificate-retrieve__steps { gap: 14px; } .certificate-retrieve__steps li { font-size: 11px; gap: 5px; } .certificate-retrieve__steps li > span { width: 24px; height: 24px; } .certificate-retrieve__certificate { padding: 20px; } .certificate-retrieve__downloads a { flex: 1; } }

.public-course-certificate__fields { display: grid; gap: 20px; } .public-course-certificate__submit { margin-top: 24px; } .public-course-certificate__submit button { width: 100%; } .public-course-certificate__receipt { padding: 40px 28px; text-align: center; } .public-course-certificate__receipt > i { font-size: 40px; color: #6d28d2; margin-bottom: 20px; } .public-course-certificate__receipt h2 { color: #282337; font-size: 24px; margin: 0 0 16px; } .public-course-certificate__receipt p { color: #666174; line-height: 1.9; margin-bottom: 24px; } .public-course-certificate__receipt .landing-btn { gap: 10px; }