/* Certificate of completion: live template (scales with its container) */
.cert-wrap { container-type: inline-size; width: 100%; }
.cert-doc { position: relative; aspect-ratio: 1.414; background: #fff; color: var(--navy); border: .25cqw solid var(--brand); padding: 1.1cqw; box-shadow: 0 2cqw 4cqw -2cqw rgba(20,36,75,.35); }
.cert-doc .inner { position: relative; height: 100%; border: .1cqw solid #C9D3EA; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4.2cqw 7cqw 3.6cqw; }
.cert-doc .logo { width: 10cqw; }
.cert-doc .academy { margin-top: .8cqw; font: 500 1.05cqw/1 var(--sans); color: var(--brand); }
.cert-doc .academy small { display: block; margin-top: .45cqw; font-size: .6cqw; letter-spacing: .3em; }
.cert-doc .title { margin-top: 2.6cqw; font: 600 6.1cqw/1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.01em; color: var(--brand); }
.cert-doc .title-ku { margin-top: 1.4cqw; font: 600 2.4cqw/1.3 var(--kufi); color: var(--brand); direction: rtl; }
.cert-doc .certifies { margin-top: 2.2cqw; font: 400 1.6cqw/1 var(--sans); color: var(--muted); }
.cert-doc .name { margin-top: 1.4cqw; font: 500 italic 4.6cqw/1.05 var(--serif); font-variation-settings: "opsz" 72; color: var(--navy); padding: 0 4cqw .9cqw; border-bottom: .1cqw solid #C9D3EA; min-width: 42cqw; }
.cert-doc .completed { margin-top: 1.8cqw; font: 400 1.6cqw/1 var(--sans); color: var(--muted); }
.cert-doc .course { margin-top: 1.4cqw; font: 600 2cqw/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brand); }
.cert-doc .detail { margin-top: .9cqw; font: 400 1.35cqw/1.3 var(--sans); color: var(--muted); }
.cert-doc .foot { margin-top: auto; width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 2cqw; }
.cert-doc .sig { text-align: left; border-top: .1cqw solid var(--navy); padding-top: .9cqw; }
.cert-doc .sig b { display: block; font: 600 2cqw/1 var(--serif); color: var(--brand); }
.cert-doc .sig span, .cert-doc .meta span { display: block; margin-top: .7cqw; font: 500 .85cqw/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--brand); }
.cert-doc .seal { width: 10.5cqw; height: 10.5cqw; }
.cert-doc .meta { display: flex; gap: 1.4cqw; align-items: end; justify-content: flex-end; }
.cert-doc .meta .txt { text-align: right; border-top: .1cqw solid var(--navy); padding-top: .9cqw; flex: 1; }
.cert-doc .meta b { display: block; font: 500 1.35cqw/1 var(--sans); color: var(--navy); }
.cert-doc .qr { width: 7cqw; height: 7cqw; padding: .4cqw; border: .1cqw solid #C9D3EA; flex: none; background: #fff; }
.cert-doc .qr svg { display: block; width: 100%; height: 100%; }
.cert-doc .qr-cap { position: absolute; right: 7cqw; bottom: 1.2cqw; font: 500 .7cqw/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }