/* Reference landing page. Scoped to avoid changing the exam player and admin. */
.prep-home{--primary:#008452;--text:#080f15;--text-2:#5f6972;--bg:#fff;--surface:#fff;--border:#e5e9eb;color-scheme:light;background:#fff;color:var(--text)}
.prep-home main a{text-decoration:none}.prep-home main svg{width:24px;height:24px;flex-shrink:0}.prep-container{width:calc(100% - 64px);max-width:1116px;margin-inline:auto}
.prep-hero{position:relative;isolation:isolate;display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;min-height:488px;padding-block:42px 24px}.prep-hero:before{content:"";position:absolute;z-index:-1;inset:0 -80px 0 36%;border-radius:18px;background:radial-gradient(ellipse at 62% 36%,#dbf7eac2,transparent 76%),linear-gradient(130deg,#fff,#eefaf4);mask-image:linear-gradient(to right,transparent,#000 30%)}.prep-intro h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(46px,5.6vw,72px);line-height:.98;font-weight:700;letter-spacing:-3px;margin:0 0 18px;max-width:590px}.prep-intro h1 em{display:block;color:#008452;font-style:normal}.prep-intro p{font-size:25px;line-height:1.32;max-width:420px;letter-spacing:-.7px;margin-bottom:20px;color:#20333e}.prep-cta{display:inline-flex;align-items:center;justify-content:center;gap:17px;padding:12px 32px;min-height:55px;border-radius:8px;background:linear-gradient(120deg,#00945f,#007345);color:#fff;font-size:20px;font-weight:500;box-shadow:inset 0 1px 2px #ffffff55,0 6px 16px #0084520c;transition:transform .2s,box-shadow .2s}.prep-cta:hover{color:white;transform:translateY(-2px);box-shadow:0 7px 20px #00845225}.prep-sample{display:flex;align-items:center;gap:20px;color:#162936;margin-top:10px;font-size:15px}.prep-sample>span{border:1px solid #c9ded7;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;background:#ffffffa0}.prep-sample svg{fill:#008452;stroke:#008452;width:19px;height:19px}
.prep-plan-wrap{position:relative;padding-top:17px}.prep-badge{position:absolute;top:-13px;left:-11px;z-index:1;padding:4px 17px;border-radius:30px;background:#ceff75;color:#142217;font-size:14px;font-weight:500}.prep-plan{border:1px solid #9bdac3;border-bottom-color:#dceee7;border-radius:13px;padding:25px 26px 24px;background:linear-gradient(145deg,#ffffffec,#f8fbfbd9);box-shadow:0 15px 42px #00a36c0b;min-height:360px}.prep-plan-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}.prep-plan-heading h2{font-size:21px;letter-spacing:-.7px;margin:0;line-height:1.25}.prep-plan-heading strong{font-size:21px;display:block;line-height:1.25}.prep-plan-heading small{font-size:14px;display:block;color:#727b82}.prep-progress{display:flex;align-items:center;gap:20px;margin-bottom:21px}.prep-progress progress{appearance:none;border:0;height:18px;flex:1;min-width:0;border-radius:30px;overflow:hidden;background:#edf2f4}.prep-progress progress::-webkit-progress-bar{background:#edf2f4;border-radius:30px}.prep-progress progress::-webkit-progress-value{background:linear-gradient(#009961,#007d50);border-radius:30px}.prep-progress progress::-moz-progress-bar{background:#008452;border-radius:30px}.prep-progress strong{font-size:20px;min-width:49px}.prep-steps{list-style:none;padding:0;margin:0;display:grid;gap:12px}.prep-steps li{border:1px solid #edf0f2;border-radius:12px;background:#ffffffd9;box-shadow:0 4px 10px #172d4003}.prep-steps a{display:flex;align-items:center;gap:14px;min-height:65px;padding:10px 13px;color:#243442}.prep-steps a:hover{background:#f1fbf6;border-radius:12px}.prep-step-icon{width:44px;height:44px;flex-shrink:0;background:#eaf0f3;border-radius:11px;display:grid;place-items:center;color:#627985}.prep-step-icon.done{color:#008452;background:#e8f5ee}.prep-step-icon.started{color:#fff;background:linear-gradient(145deg,#009963,#006a43)}.prep-step-icon.started svg{fill:currentColor;width:20px}.prep-step-icon.done svg{width:29px;height:29px}.prep-step-title{font-size:13px;flex:1;line-height:1.5;overflow-wrap:anywhere}.prep-step-status{color:#008452;display:flex}.prep-step-status svg{width:21px;height:21px;stroke-width:3}.prep-step-icon i,.prep-step-status i{display:block;width:18px;height:18px;border:2px solid #9aadb8;border-radius:50%}.prep-step-count{font-size:13px;color:#8b9aa5;white-space:nowrap}.prep-empty{padding:20px;color:#6b7d77;font-size:14px}
.prep-programs{position:relative;padding-block:20px 12px}.prep-programs:before{content:"";position:absolute;top:0;left:-45px;right:-45px;border-top:1px solid #c2e7dc}.prep-programs h2{text-align:center;font-size:21px;margin-bottom:12px;letter-spacing:-.7px}.prep-program-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.prep-program{display:flex;align-items:center;gap:23px;border:1px solid #e5e8eb;box-shadow:0 1px 3px #20334005;border-radius:12px;padding:15px 26px;min-height:88px;color:#090e19;transition:border-color .2s,background .2s,transform .2s}.prep-program:hover,.prep-program.selected{border-color:#badfcf;background:#fcfffd}.prep-program:hover{transform:translateY(-2px)}.prep-program-icon{color:#008e57;display:flex}.prep-program-icon svg{width:43px;height:43px;stroke-width:2.7}.prep-program strong{display:block;font-size:23px;line-height:1.25;letter-spacing:-.7px}.prep-program small{display:block;font-size:15px;color:#67717c;margin-top:3px}.prep-program-arrow{margin-left:auto;color:#008452;width:20px!important}
@media(min-width:1450px){.prep-hero{min-height:540px}.prep-intro h1{font-size:76px}}
@media(max-width:1000px){.prep-hero{gap:24px}.prep-intro h1{font-size:55px;letter-spacing:-2px}.prep-intro p{font-size:21px}.prep-plan{padding:22px 16px}.prep-plan-heading h2,.prep-plan-heading strong{font-size:18px}.prep-steps a{gap:9px;padding-inline:9px}.prep-step-icon{width:34px;height:38px}.prep-program{padding:15px;gap:15px}.prep-program small{font-size:13px}.prep-hero:before{right:-24px}.prep-programs:before{left:0;right:0}}
@media(max-width:760px){.prep-hero{grid-template-columns:1fr;padding-top:26px;gap:48px}.prep-intro h1{font-size:clamp(42px,9vw,65px);max-width:570px;line-height:1.02}.prep-intro p{max-width:380px}.prep-plan-wrap{max-width:520px;width:100%;margin-inline:auto;margin-bottom:28px}.prep-plan{padding:25px}.prep-plan-heading h2,.prep-plan-heading strong{font-size:20px}.prep-step-title{font-size:14px}.prep-hero:before{inset:37% -24px 0;border-radius:0;mask-image:linear-gradient(transparent,#000 20%)}.prep-program-grid{grid-template-columns:1fr}.prep-program{padding:18px 24px}.prep-programs h2{font-size:19px}}
@media(prefers-reduced-motion:reduce){.prep-home *{transition:none!important;scroll-behavior:auto!important}}

/* Keep the decorative glow inside the viewport at intermediate widths. */
.prep-home{overflow-x:clip}

/* English copy uses the same three-part editorial hierarchy. */
.prep-intro h1{font-size:clamp(44px,5.2vw,66px)}
@media(max-width:760px){.prep-intro h1{font-size:clamp(40px,8.5vw,60px)}}

/* ---------- Certificate carousel (hero card) ---------- */
.cert-carousel{--interval:4000ms;--move:650ms;--ease:cubic-bezier(.22,.8,.24,1);position:relative;display:flex;flex-direction:column;padding:0}
.cert-track{display:grid;flex:1;overflow:hidden;border-radius:13px 13px 0 0;touch-action:pan-y;user-select:none}
.cert-slide{grid-area:1/1;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;padding:25px 26px 20px;visibility:hidden;opacity:0}
.cert-slide.is-active,.cert-slide.leave-next,.cert-slide.leave-prev{visibility:visible;opacity:1}
.cert-slide.is-active{z-index:2}
.cert-watermark{position:absolute;right:-8px;bottom:-14px;z-index:-1;font-family:Georgia,'Times New Roman',serif;font-size:118px;font-weight:700;line-height:1;letter-spacing:-6px;color:#0084520a;pointer-events:none;white-space:nowrap}
.cert-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.cert-icon{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#009963,#006a43);box-shadow:0 6px 14px #0084522a}
.cert-icon svg{width:25px;height:25px}
.cert-code{font-size:23px;letter-spacing:-.6px;line-height:1}
.cert-index{margin-left:auto;font-size:13px;font-weight:600;color:#8b9aa5;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.cert-name{font-size:21px;line-height:1.3;letter-spacing:-.6px;margin:0 0 20px;max-width:400px;color:#0d1b24}
.cert-stat{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid #e3f1eb;border-radius:12px;background:linear-gradient(120deg,#f2fbf6,#ffffffd9);margin-bottom:16px}
.cert-stat strong{font-family:Georgia,'Times New Roman',serif;font-size:56px;line-height:.95;letter-spacing:-2px;background:linear-gradient(135deg,#00a36c,#006642);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:lining-nums}
.cert-stat span{font-size:15px;font-weight:500;color:#2d4250;line-height:1.35;padding-top:2px}
.cert-desc{font-size:14px;line-height:1.6;color:#5f6f79;margin:0 0 14px;max-width:420px}
.cert-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;align-self:flex-start;font-size:14px;font-weight:600;color:#008452}
.cert-link svg{width:18px;height:18px;transition:transform .2s}
.cert-link:hover svg{transform:translateX(3px)}
.cert-controls{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 26px;padding:16px 0 22px;border-top:1px solid #edf2f0}
.cert-tabs{display:flex;gap:6px;flex-wrap:wrap}
.cert-tab{position:relative;overflow:hidden;padding:7px 13px 9px;border:1px solid #e1e8e5;border-radius:999px;background:#fff;color:#5d6d76;font:inherit;font-size:12.5px;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.cert-tab:hover{color:#0d1b24;border-color:#c5dcd2}
.cert-tab.is-active{color:#006a43;border-color:#9bdac3;background:#f1fbf6}
.cert-tab i{position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,#00a36c,#007d50)}
.cert-tab.is-active i{animation:cert-fill var(--interval) linear forwards}
.cert-carousel.is-paused .cert-tab.is-active i{animation-play-state:paused}
@keyframes cert-fill{from{width:0}to{width:100%}}
.cert-arrows{display:flex;gap:6px}
.cert-arrow{width:38px;height:38px;border-radius:50%;border:1px solid #d9e3df;background:#fff;color:#1d3340;display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .1s}
.cert-arrow:hover{background:#008452;border-color:#008452;color:#fff}
.cert-arrow:active{transform:scale(.94)}
.cert-arrow svg{width:19px;height:19px;stroke-width:2.4}
.cert-tab:focus-visible,.cert-arrow:focus-visible,.cert-link:focus-visible{outline:2px solid #008452;outline-offset:2px}
@media(max-width:1000px){.cert-slide{padding:22px 16px 18px}.cert-controls{margin:0 16px}.cert-stat strong{font-size:46px}.cert-name{font-size:19px}.cert-watermark{font-size:92px}}
@media(max-width:420px){.cert-controls{flex-wrap:wrap}.cert-stat{flex-direction:column;gap:6px}.cert-tab{padding:6px 10px 8px}}
/* Slide motion: the new certificate glides in, the old one glides out, then its content
   rises in one item after another and the number counts up (see home-carousel.js).
   !important + higher specificity keeps these working under the global reduced-motion resets
   in theme.css and app.css, which would otherwise switch every animation off. */
.cert-carousel .cert-slide.enter-next{animation:cert-in-next var(--move) var(--ease) both!important}
.cert-carousel .cert-slide.enter-prev{animation:cert-in-prev var(--move) var(--ease) both!important}
.cert-carousel .cert-slide.leave-next{animation:cert-out-next var(--move) var(--ease) both!important}
.cert-carousel .cert-slide.leave-prev{animation:cert-out-prev var(--move) var(--ease) both!important}
.cert-carousel .cert-slide.is-revealing .cert-icon{animation:cert-pop .6s var(--ease) .12s both!important}
.cert-carousel .cert-slide.is-revealing .cert-code,.cert-carousel .cert-slide.is-revealing .cert-index{animation:cert-rise .55s var(--ease) .16s both!important}
.cert-carousel .cert-slide.is-revealing .cert-name{animation:cert-rise .55s var(--ease) .24s both!important}
.cert-carousel .cert-slide.is-revealing .cert-stat{animation:cert-rise .55s var(--ease) .32s both!important}
.cert-carousel .cert-slide.is-revealing .cert-desc{animation:cert-rise .55s var(--ease) .40s both!important}
.cert-carousel .cert-slide.is-revealing .cert-link{animation:cert-rise .55s var(--ease) .48s both!important}
.cert-carousel .cert-slide.is-revealing .cert-watermark{animation:cert-drift 1.2s var(--ease) both!important}
.cert-carousel .cert-tab.is-active i{animation:cert-fill var(--interval) linear forwards!important}
.cert-carousel.is-paused .cert-tab.is-active i{animation-play-state:paused!important}
@keyframes cert-in-next{from{opacity:0;transform:translateX(56px)}to{opacity:1;transform:none}}
@keyframes cert-in-prev{from{opacity:0;transform:translateX(-56px)}to{opacity:1;transform:none}}
@keyframes cert-out-next{from{opacity:1;transform:none}to{opacity:0;transform:translateX(-56px)}}
@keyframes cert-out-prev{from{opacity:1;transform:none}to{opacity:0;transform:translateX(56px)}}
@keyframes cert-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cert-pop{0%{opacity:0;transform:scale(.55) rotate(-12deg)}70%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{transform:none}}
@keyframes cert-drift{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}

.cert-stat strong{white-space:nowrap;flex:none}

/* Same content edges as the site header and .container (1116px wide, 32px / 20px gutters). */
@media(max-width:760px){.prep-container{width:calc(100% - 40px)}}

/* Clip the hero glow at the viewport edge without creating a scroll container (no sideways scroll). */
.prep-home main{overflow-x:clip}