/* ==========================================================================
   Certificate Verification (/certificate-verification)
   Loaded AFTER new-theme/css/certificate_verify.css (shared with the
   certificate showcase page), so it wins on equal specificity. Every rule is
   scoped to .certificate_page_main, the cv_ / cvx_ class namespaces, or the
   body.cv_result_view state class, so no other MYCPE ONE page is affected.

   Two states on one page, toggled by jQuery:
     - #certificate_form     Screen 1, certificate number input  (cv_*)
     - #certificate_details  Screen 2, verified completion       (cvx_*)
   body.cv_result_view is set while Screen 2 is visible; it switches the page
   background. The site header is the same on both screens.
   ========================================================================== */

/* ---- Page shell ----------------------------------------------------------
   The certificate area claims the viewport height left over AFTER the real
   rendered header. --certificate-header-height is written by the header
   probe in the view; 136px is the measured desktop height of
   .header_top + .new_header, used before it runs or without JS. */
.certificate_page_main{
    --cert-header-h: var(--certificate-header-height, 136px);
    --cert-area-h: calc(100vh - var(--cert-header-h));
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: var(--cert-area-h);
}
@supports (min-height: 100svh){
    .certificate_page_main{
        --cert-area-h: calc(100svh - var(--cert-header-h));
    }
}
/* The visible state fills the remaining space. .d-none is display:none
   !important, so the hidden state stays hidden. */
.certificate_page_main > .certificate_verify{
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: clamp(24px, 4vh, 56px) 0;
}
.certificate_page_main > .certificate_verify > .container{
    width: 100%;
}
/* The single-viewport rule is a desktop goal only. */
@media (max-width: 991.98px){
    .certificate_page_main{
        display: block;
        min-height: 0;
    }
    .certificate_page_main > .certificate_verify{
        display: block;
    }
}

/* ==========================================================================
   SCREEN 1 - verification form
   ========================================================================== */
.certificate_page_main{
    --cv-blue: #1478FF;
    --cv-blue-dark: #0F62D6;
    --cv-ink: #111827;
    --cv-body: #52627A;
    --cv-muted: #718096;
    --cv-border: #DCE3EC;
    --cv-card: #FFFFFF;
    --cv-page: #F6FAFF;
    background: var(--cv-page);
}

/* ---- Section shell + decorative background --------------------------- */
.certificate_page_main .cv_section{
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #F8FBFF 0%, #EEF4FF 100%);
}
.certificate_page_main .cv_section > .container{
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: min(1180px, 92vw);
}
/* Oversized low-contrast diagonal bands. Pointer-events off and
   aria-hidden, so they stay purely decorative. */
.certificate_page_main .cv_bg{
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
.certificate_page_main .cv_bg span{
    position: absolute;
    display: block;
    background: linear-gradient(120deg, rgba(20,120,255,.09), rgba(20,120,255,.02));
    transform: skewX(-22deg);
    border-radius: 6px;
}
.certificate_page_main .cv_bg span:nth-child(1){
    top: -14%; left: -12%; width: 190px; height: 128%;
}
.certificate_page_main .cv_bg span:nth-child(2){
    top: -14%; left: 6%; width: 74px; height: 128%;
    background: linear-gradient(120deg, rgba(20,120,255,.06), rgba(20,120,255,.015));
}
.certificate_page_main .cv_bg span:nth-child(3){
    top: -14%; right: -8%; width: 210px; height: 128%;
}
.certificate_page_main .cv_bg span:nth-child(4){
    top: -14%; right: 11%; width: 66px; height: 128%;
    background: linear-gradient(120deg, rgba(20,120,255,.055), rgba(20,120,255,.012));
}

/* ---- Card ------------------------------------------------------------ */
.certificate_page_main .cv_card{
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: clamp(430px, 58vh, 520px);
    background: var(--cv-card);
    border: 1px solid #E8EEF6;
    border-radius: 20px;
    box-shadow: 0 18px 50px -24px rgba(16, 45, 90, .16), 0 2px 8px -4px rgba(16, 45, 90, .08);
}
.certificate_page_main .cv_card_visual{
    flex: 0 0 36%;
    max-width: 36%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(32px, 4vh, 48px) clamp(20px, 2.4vw, 36px);
    position: relative;
}
/* Thin divider that stops short of the card edges. */
.certificate_page_main .cv_card_visual::after{
    content: "";
    position: absolute;
    top: 56px;
    bottom: 56px;
    right: 0;
    width: 1px;
    background: #E4EAF2;
}
.certificate_page_main .cv_card_body{
    flex: 1 1 64%;
    max-width: 64%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: clamp(36px, 5vh, 56px) clamp(40px, 4.2vw, 64px);
}

/* ---- Illustration ---------------------------------------------------- */
.certificate_page_main .cv_illustration{
    position: relative;
    width: 100%;
    max-width: 310px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Soft organic pale-blue shape behind the artwork. */
.certificate_page_main .cv_illustration::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 92%;
    padding-bottom: 92%;
    transform: translate(-50%, -50%);
    border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
    background: radial-gradient(circle at 42% 38%, #EAF2FF 0%, #E6EFFE 55%, rgba(233,241,255,0) 78%);
}
.certificate_page_main .cv_illustration svg{
    position: relative;
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Eyebrow / heading / description ---------------------------------- */
.certificate_page_main .cv_eyebrow{
    display: block;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cv-blue);
    margin: 0 0 17px;
}
.certificate_page_main .cv_title{
    font-size: 36px;
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--cv-ink);
    margin: 0 0 19px;
}
.certificate_page_main .cv_desc{
    max-width: 620px;
    font-size: 17.5px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--cv-body);
    margin: 0 0 32px;
}

/* ---- Input ------------------------------------------------------------ */
.certificate_page_main .cv_field{
    width: 100%;
    max-width: 640px;
}
.certificate_page_main .cv_input_wrap{
    position: relative;
    display: block;
}
.certificate_page_main .cv_input_icon{
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
}
.certificate_page_main .cv_input_icon path{
    stroke: #9AA9BF;
    transition: stroke .18s ease;
}
.certificate_page_main .cv_input{
    position: relative;
    z-index: 1;
    width: 100%;
    height: 68px;
    padding: 0 24px 0 56px;
    font-size: 17px;
    font-weight: 400;
    color: var(--cv-ink);
    background: #f8fbff;
    border: 1px solid #D5E2F5;
    border-radius: 12px;
    outline: none;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    -webkit-appearance: none;
    appearance: none;
}
.certificate_page_main .cv_input::placeholder{
    color: #8A9AB0;
    opacity: 1;
    font-weight: 400;
}
.certificate_page_main .cv_input:hover{
    border-color: #C2D6F2;
}
.certificate_page_main .cv_input:focus{
    background: #FFFFFF;
    border-color: var(--cv-blue);
    box-shadow: 0 0 0 3px rgba(20, 120, 255, .12);
}
.certificate_page_main .cv_input_wrap:focus-within .cv_input_icon path{
    stroke: var(--cv-blue);
}
.certificate_page_main .cv_input[readonly]{
    background: #E9E9E9;
    color: var(--cv-muted);
}
/* Error state */
.certificate_page_main .cv_field.cv_has_error .cv_input{
    border-color: #E13B3B;
    background: #FFFCFC;
}
.certificate_page_main .cv_field.cv_has_error .cv_input:focus{
    box-shadow: 0 0 0 3px rgba(225, 59, 59, .12);
}
.certificate_page_main .cv_field.cv_has_error .cv_input_icon path{
    stroke: #E13B3B;
}

/* ---- Validation messages ---------------------------------------------- */
.certificate_page_main .cv_message{
    display: none;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 500;
    color: #E13B3B;
    text-align: center;
}
/* Driven by content / .d-none only, so no extra JS state class is needed.
   Bootstrap's .d-none is display:none !important, so it still wins. */
.certificate_page_main #certificate_no_error:not(:empty),
.certificate_page_main #certificate_verify_fail_message:not(.d-none){
    display: flex;
}
.certificate_page_main .cv_message svg{
    flex: 0 0 auto;
    margin-top: 1px;
}
.certificate_page_main .cv_message.shake{
    animation: cv_shake .38s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes cv_shake{
    10%, 90%{ transform: translateX(-1px); }
    20%, 80%{ transform: translateX(2px); }
    30%, 50%, 70%{ transform: translateX(-3px); }
    40%, 60%{ transform: translateX(3px); }
}

/* ---- CTA --------------------------------------------------------------- */
.certificate_page_main .cv_action{
    margin-top: 23px;
}
.certificate_page_main .cv_btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 288px;
    max-width: 100%;
    height: 62px;
    padding: 0 24px;
    font-size: 17.5px;
    font-weight: 600;
    line-height: 1;
    color: #FFFFFF;
    background: linear-gradient(180deg, #2A86FF 0%, var(--cv-blue) 100%);
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 8px 20px -10px rgba(20, 120, 255, .55);
    transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
    -webkit-appearance: none;
    appearance: none;
}
.certificate_page_main .cv_btn:hover{
    background: linear-gradient(180deg, #1B7BFF 0%, var(--cv-blue-dark) 100%);
    box-shadow: 0 10px 22px -10px rgba(15, 98, 214, .6);
}
.certificate_page_main .cv_btn:active{
    transform: translateY(1px);
}
.certificate_page_main .cv_btn:focus-visible{
    outline: 2px solid var(--cv-blue-dark);
    outline-offset: 3px;
}
.certificate_page_main .cv_btn:disabled,
.certificate_page_main .cv_btn.is_loading{
    background: #9CC2F5;
    box-shadow: none;
    cursor: not-allowed;
}
.certificate_page_main .cv_btn .cv_btn_arrow{
    display: inline-flex;
    align-items: center;
    transition: transform .18s ease;
}
.certificate_page_main .cv_btn:hover .cv_btn_arrow{
    transform: translateX(3px);
}
.certificate_page_main .cv_btn.is_loading .cv_btn_arrow{
    display: none;
}
.certificate_page_main .cv_btn .btn_spinner{
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: cv_spin .7s linear infinite;
}
@keyframes cv_spin{
    to{ transform: rotate(360deg); }
}

/* ---- Helper text -------------------------------------------------------- */
.certificate_page_main .cv_helper{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 24px 0 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--cv-muted);
}
.certificate_page_main .cv_helper svg{
    flex: 0 0 auto;
}

/* ---- COMPACT DESKTOP ----------------------------------------------------
   Density tier for the very common "1920x1080 at Windows 125% scaling"
   case, which reports roughly 1536x864 CSS pixels, and for any desktop
   that is short rather than narrow (laptops, browser toolbars, taskbar).

   This reads the real CSS viewport only - no zoom, no transform: scale(),
   no devicePixelRatio or OS-scaling detection. Same layout, same
   hierarchy, same components: only density changes. Large desktops
   (>=1601px wide AND >900px tall) keep the approved sizing above.

   Held at min-width 1200px so the desktop two-column layout is never
   collapsed early - the tablet/mobile tiers below own everything under
   1200px. */
@media (min-width: 1200px) and (max-width: 1599.98px),
       (min-width: 1200px) and (max-height: 900px){

    /* Vertical rhythm: the card stays centred in the space under the
       header, biased slightly upward so it sits closer to the navigation
       and less of the viewport is spent on empty space. Both values are
       viewport-relative, not fixed margins. */
    .certificate_page_main > .certificate_verify{
        padding: clamp(20px, 2.5vh, 36px) 0 clamp(76px, 12.5vh, 140px);
    }

    .certificate_page_main .cv_card{
        min-height: 430px;
    }
    .certificate_page_main .cv_card_visual{
        padding: 36px 30px;
    }
    /* Divider shortens with the card padding, same colour and weight. */
    .certificate_page_main .cv_card_visual::after{
        top: 44px;
        bottom: 44px;
    }
    .certificate_page_main .cv_card_body{
        padding: 40px 44px;
    }
    .certificate_page_main .cv_illustration{
        max-width: 240px;
    }

    /* Type: the large text steps down further than the body text, so
       readability is kept while the block gets shorter. */
    .certificate_page_main .cv_eyebrow{
        font-size: 13px;
        margin-bottom: 13px;
    }
    .certificate_page_main .cv_title{
        font-size: 31px;
        line-height: 1.18;
        margin-bottom: 15px;
    }
    .certificate_page_main .cv_desc{
        font-size: 15.5px;
        line-height: 1.5;
        max-width: 610px;
        margin-bottom: 26px;
    }

    /* Controls stay well above the 48px minimum hit area. */
    .certificate_page_main .cv_field{
        max-width: 620px;
    }
    .certificate_page_main .cv_input{
        height: 58px;
        padding: 0 20px 0 50px;
        font-size: 15.5px;
    }
    .certificate_page_main .cv_input_icon{
        left: 20px;
        width: 18px;
        height: 18px;
    }
    .certificate_page_main .cv_message{
        font-size: 13px;
    }
    .certificate_page_main .cv_action{
        margin-top: 19px;
    }
    .certificate_page_main .cv_btn{
        width: 278px;
        height: 54px;
        font-size: 15.5px;
        gap: 9px;
    }
    .certificate_page_main .cv_btn .cv_btn_arrow svg{
        width: 16px;
        height: 16px;
    }
    .certificate_page_main .cv_helper{
        margin-top: 19px;
        font-size: 12.5px;
    }
    .certificate_page_main .cv_helper svg{
        width: 13px;
        height: 13px;
    }
}

/* ---- COMPACT DESKTOP: header row ----------------------------------------
   Same header, same structure and controls - only the navbar's vertical
   padding is trimmed, which hands the certificate area ~15px more usable
   height. The header-height probe at the end of this page measures the
   real rendered rows, so --certificate-header-height follows this
   automatically. */
@media (min-width: 1200px) and (max-width: 1599.98px),
       (min-width: 1200px) and (max-height: 900px){
    body .new_header .navbar{
        padding-top: 15px;
        padding-bottom: 15px;
    }
    body .new_header .header_menu_links .nav-link{
        font-size: 15px;
    }
}

/* ---- Tablet ------------------------------------------------------------- */
@media (max-width: 1199.98px){
    .certificate_page_main .cv_card_visual{
        flex-basis: 38%;
        max-width: 38%;
        padding: 32px 22px;
    }
    .certificate_page_main .cv_card_body{
        flex-basis: 62%;
        max-width: 62%;
        padding: 40px 36px;
    }
    .certificate_page_main .cv_illustration{
        max-width: 230px;
    }
    .certificate_page_main .cv_title{
        font-size: 30px;
    }
    .certificate_page_main .cv_desc{
        font-size: 16.5px;
        margin-bottom: 28px;
    }
    .certificate_page_main .cv_input{
        height: 62px;
    }
}
@media (max-width: 991.98px){
    .certificate_page_main .cv_section{
        padding: 44px 0;
    }
    .certificate_page_main .cv_card{
        min-height: 0;
    }
    .certificate_page_main .cv_card_visual{
        padding: 30px 18px;
    }
    .certificate_page_main .cv_card_body{
        padding: 34px 28px;
    }
    .certificate_page_main .cv_illustration{
        max-width: 200px;
    }
    .certificate_page_main .cv_card_visual::after{
        top: 40px;
        bottom: 40px;
    }
}

/* ---- Mobile: stack, illustration first, no divider ---------------------- */
@media (max-width: 767.98px){
    .certificate_page_main .cv_section{
        padding: 32px 0;
    }
    .certificate_page_main .cv_section > .container{
        max-width: 100%;
        padding-left: 22px;
        padding-right: 22px;
    }
    .certificate_page_main .cv_card{
        display: block;
        border-radius: 18px;
    }
    .certificate_page_main .cv_card_visual,
    .certificate_page_main .cv_card_body{
        max-width: 100%;
        width: 100%;
    }
    .certificate_page_main .cv_card_visual{
        padding: 30px 24px 4px;
    }
    .certificate_page_main .cv_card_visual::after{
        display: none;
    }
    .certificate_page_main .cv_card_body{
        padding: 22px 24px 34px;
    }
    .certificate_page_main .cv_illustration{
        max-width: 188px;
    }
    .certificate_page_main .cv_eyebrow{
        font-size: 13px;
        margin-bottom: 14px;
    }
    .certificate_page_main .cv_title{
        font-size: 26px;
        margin-bottom: 14px;
    }
    .certificate_page_main .cv_desc{
        font-size: 15.5px;
        margin-bottom: 24px;
    }
    .certificate_page_main .cv_input{
        height: 58px;
        padding: 0 18px 0 50px;
        font-size: 16px;
    }
    .certificate_page_main .cv_input_icon{
        left: 20px;
    }
    .certificate_page_main .cv_action{
        margin-top: 20px;
        width: 100%;
    }
    .certificate_page_main .cv_btn{
        width: 100%;
        height: 56px;
        font-size: 16.5px;
    }
    .certificate_page_main .cv_helper{
        margin-top: 20px;
        font-size: 13px;
        text-align: left;
        align-items: flex-start;
    }
    .certificate_page_main .cv_helper svg{
        margin-top: 2px;
    }
}
@media (prefers-reduced-motion: reduce){
    .certificate_page_main .cv_message.shake,
    .certificate_page_main .cv_btn .btn_spinner{
        animation: none;
    }
    .certificate_page_main .cv_btn,
    .certificate_page_main .cv_btn .cv_btn_arrow{
        transition: none;
    }
}

/* ==========================================================================
   SCREEN 2 - verified completion
   ========================================================================== */
.certificate_page_main{
    --cvx-blue:#126BFF;
    --cvx-blue-2:#1478FF;
    --cvx-blue-dark:#0B57D0;
    --cvx-navy:#071C4C;
    --cvx-body:#586987;
    --cvx-muted:#74839C;
    --cvx-green:#13B84A;
    --cvx-green-soft:#E9FFF1;
    --cvx-border:#DEE6F1;
    --cvx-rule:#E4EAF2;
    --cvx-surface:#FFFFFF;
    --cvx-page:#F6FAFF;
    --cvx-viewer:#25292E;
}

/* ---- 1. Page shell + background ------------------------------------
   min-height comes from the shared page shell at the top of this file, which
   reads the header probe - so it follows the compact Screen 2 header too.
   Content is not vertically centred: any slack is absorbed at the bottom. */
body.cv_result_view .certificate_page_main{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    background:linear-gradient(176deg,#FBFDFF 0%,#F4F9FF 42%,#EDF4FF 100%);
    padding-bottom:clamp(26px,3vw,44px);
}
.certificate_page_main .cvx_bg{
    display:none;
}
body.cv_result_view .certificate_page_main .cvx_bg{
    display:block;
}
.certificate_page_main .cvx_bg{
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
}
/* Large translucent diagonal band sweeping in from the right. */
.certificate_page_main .cvx_bg_band{
    position:absolute;
    top:-16%;
    right:-14%;
    width:58%;
    height:132%;
    transform:rotate(24deg);
    border-radius:64px;
    background:linear-gradient(200deg,rgba(203,224,255,.46) 0%,rgba(219,232,255,.26) 48%,rgba(233,240,255,0) 100%);
}
.certificate_page_main .cvx_bg_band_2{
    position:absolute;
    top:6%;
    right:2%;
    width:26%;
    height:96%;
    transform:rotate(24deg);
    border-radius:48px;
    background:linear-gradient(200deg,rgba(214,231,255,.34) 0%,rgba(236,244,255,0) 78%);
}
/* Soft pale diagonal shapes toward the lower left. */
.certificate_page_main .cvx_bg_sheet{
    position:absolute;
    left:-16%;
    bottom:-34%;
    width:46%;
    height:88%;
    transform:rotate(24deg);
    border-radius:56px;
    background:linear-gradient(160deg,rgba(219,233,255,.42) 0%,rgba(238,245,255,0) 72%);
}
.certificate_page_main .cvx_bg_sheet_2{
    position:absolute;
    left:-4%;
    bottom:-26%;
    width:22%;
    height:70%;
    transform:rotate(24deg);
    border-radius:40px;
    background:linear-gradient(160deg,rgba(207,225,255,.34) 0%,rgba(238,245,255,0) 70%);
}
/* Small low-opacity decorative circles. */
.certificate_page_main .cvx_bg_dot{
    position:absolute;
    border-radius:50%;
}
.certificate_page_main .cvx_bg_dot_a{
    top:88px;
    left:3.6%;
    width:62px;
    height:62px;
    background:radial-gradient(circle at 34% 30%,rgba(180,210,255,.42),rgba(205,226,255,.12));
}
.certificate_page_main .cvx_bg_dot_b{
    top:152px;
    right:8.4%;
    width:42px;
    height:42px;
    background:radial-gradient(circle at 34% 30%,rgba(196,190,255,.40),rgba(220,216,255,.10));
}
.certificate_page_main .cvx_bg_dot_c{
    bottom:14%;
    left:12%;
    width:26px;
    height:26px;
    background:radial-gradient(circle at 34% 30%,rgba(186,212,255,.36),rgba(214,230,255,.08));
}

/* Neutralise the shared stylesheet's section chrome. Scoped to the result
   section only: the form section keeps its own padding and background. */
.certificate_page_main #certificate_details{
    position:relative;
    z-index:1;
    padding:0;
    margin:0;
    background:transparent;
    min-height:0;
    flex:1 1 auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
}
.certificate_page_main #certificate_details.d-none{
    display:none !important;
}

.certificate_page_main .cvx_shell{
    width:100%;
    max-width:1440px;
    margin:0 auto;
    padding:0 clamp(20px,3vw,32px);
    box-sizing:border-box;
}

/* ---- 2. Hero -------------------------------------------------------- */
.certificate_page_main .cvx_hero{
    padding-top:clamp(26px,2.6vw,34px);
    padding-left:clamp(0px,2.4vw,38px);
    max-width:780px;
}
.certificate_page_main .cvx_eyebrow{
    display:block;
    font-size:13px;
    font-weight:700;
    line-height:1;
    letter-spacing:2.4px;
    text-transform:uppercase;
    color:var(--cvx-blue);
    margin:0 0 13px;
}
.certificate_page_main .cvx_hero_title{
    margin:0 0 9px;
    font-size:clamp(32px,2.4vw,44px);
    font-weight:800;
    line-height:1.13;
    letter-spacing:-.4px;
    color:var(--cvx-navy);
}
.certificate_page_main .cvx_hero_title em{
    font-style:normal;
    color:var(--cvx-blue-2);
    background:linear-gradient(96deg,#1478FF 0%,#3C6BFF 58%,#6A5BFF 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}
.certificate_page_main .cvx_hero_text{
    margin:0;
    max-width:640px;
    font-size:clamp(15.5px,1.05vw,16.5px);
    line-height:1.5;
    color:var(--cvx-body);
}

/* ---- 3. Result card ------------------------------------------------- */
.certificate_page_main .cvx_card{
    display:flex;
    align-items:stretch;
    margin-top:clamp(20px,2vw,24px);
    background:rgba(255,255,255,.96);
    border:1px solid rgba(222,230,241,.85);
    border-radius:20px;
    box-shadow:0 26px 60px -34px rgba(13,41,92,.26),0 2px 6px rgba(13,41,92,.03);
    overflow:hidden;
}
.certificate_page_main .cvx_card + .cvx_card{
    margin-top:20px;
}
.certificate_page_main .cvx_card_left{
    flex:0 0 48%;
    max-width:48%;
    box-sizing:border-box;
    padding:clamp(24px,2.2vw,32px);
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.certificate_page_main .cvx_card_right{
    position:relative;
    flex:1 1 52%;
    max-width:52%;
    box-sizing:border-box;
    padding:clamp(20px,1.8vw,26px) clamp(20px,2vw,28px);
    display:flex;
    flex-direction:column;
    justify-content:center;
}
/* Vertical divider that stops short of the card edges. */
.certificate_page_main .cvx_card_right::before{
    content:"";
    position:absolute;
    left:0;
    top:32px;
    bottom:32px;
    width:1px;
    background:var(--cvx-rule);
}

/* ---- 4. Verified status row ----------------------------------------- */
.certificate_page_main .cvx_status{
    display:flex;
    align-items:center;
    gap:16px;
}
.certificate_page_main .cvx_seal{
    flex:0 0 46px;
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(circle at 50% 50%,rgba(19,184,74,.16) 0%,rgba(19,184,74,.07) 54%,rgba(19,184,74,0) 72%);
}
.certificate_page_main .cvx_seal svg{
    width:32px;
    height:32px;
    display:block;
    filter:drop-shadow(0 4px 9px rgba(19,184,74,.26));
}
/* Single line beside the seal, so both sit on the same optical centre. */
.certificate_page_main .cvx_status_body{
    display:flex;
    align-items:center;
    min-height:46px;
}
.certificate_page_main .cvx_completed_by{
    margin:0;
    font-size:clamp(24px,1.9vw,30px);
    font-weight:400;
    line-height:1.25;
    color:var(--cvx-navy);
}
.certificate_page_main .cvx_completed_by strong{
    font-weight:700;
    color:var(--cvx-blue);
}

/* ---- 5. Course title + course link ---------------------------------- */
.certificate_page_main .cvx_course_title{
    margin:clamp(12px,1.1vw,16px) 0 0;
    font-size:clamp(17px,1.15vw,19px);
    font-weight:700;
    line-height:1.3;
    letter-spacing:-.3px;
    color:var(--cvx-navy);
    overflow-wrap:break-word;
}
.certificate_page_main .cvx_view_course{
    display:inline-flex;
    align-items:center;
    gap:7px;
    align-self:flex-start;
    margin-top:8px;
    font-size:15px;
    font-weight:500;
    line-height:1.2;
    color:var(--cvx-blue);
    text-decoration:none;
}
.certificate_page_main .cvx_view_course svg{
    flex:0 0 auto;
    width:16px;
    height:16px;
}
.certificate_page_main .cvx_view_course:hover,
.certificate_page_main .cvx_view_course:focus{
    color:var(--cvx-blue-dark);
    text-decoration:underline;
}

/* ---- 6. Course meta cards ------------------------------------------- */
.certificate_page_main .cvx_meta{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:16px;
}
.certificate_page_main .cvx_meta_card{
    flex:1 1 150px;
    min-width:0;
    min-height:64px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 14px;
    border-radius:12px;
    background:#F3F7FE;
}
.certificate_page_main .cvx_meta_icon{
    flex:0 0 38px;
    width:38px;
    height:38px;
    border-radius:10px;
    background:#E4EEFD;
    display:flex;
    align-items:center;
    justify-content:center;
}
.certificate_page_main .cvx_meta_icon svg{
    width:19px;
    height:19px;
}
.certificate_page_main .cvx_meta_body{
    min-width:0;
}
.certificate_page_main .cvx_meta_label{
    display:block;
    font-size:13px;
    line-height:1.2;
    color:var(--cvx-muted);
}
.certificate_page_main .cvx_meta_value{
    margin:3px 0 0;
    font-size:15.5px;
    font-weight:600;
    line-height:1.2;
    color:var(--cvx-navy);
}

/* ---- 7. Section rule ------------------------------------------------ */
.certificate_page_main .cvx_rule{
    height:1px;
    border:0;
    margin:17px 0;
    background:var(--cvx-rule);
}

/* ---- 8. Verification confirmation ----------------------------------- */
.certificate_page_main .cvx_verify{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:18px;
    padding:14px 16px;
    border-radius:12px;
    background:var(--cvx-green-soft);
}
.certificate_page_main .cvx_verify_icon{
    flex:0 0 28px;
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.certificate_page_main .cvx_verify_icon svg{
    width:28px;
    height:28px;
}
.certificate_page_main .cvx_verify_body{
    min-width:0;
}
.certificate_page_main .cvx_verify_title{
    margin:0;
    font-size:15.5px;
    font-weight:700;
    line-height:1.35;
    color:var(--cvx-navy);
}
.certificate_page_main .cvx_verify_text{
    margin:4px 0 0;
    font-size:14.5px;
    line-height:1.45;
    color:var(--cvx-muted);
}
.certificate_page_main .cvx_verify_text strong{
    font-weight:600;
    color:#5F708D;
}

/* ---- 9. Share actions ----------------------------------------------- */
.certificate_page_main .cvx_actions{
    display:flex;
    gap:12px;
    margin-top:22px;
}
.certificate_page_main .cvx_btn{
    flex:1 1 0;
    min-width:0;
    min-height:50px;
    box-sizing:border-box;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:10px 16px;
    border:1.5px solid transparent;
    border-radius:9px;
    font-size:15px;
    font-weight:600;
    line-height:1.2;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.certificate_page_main .cvx_btn svg{
    flex:0 0 auto;
    width:18px;
    height:18px;
}
.certificate_page_main .cvx_btn_primary{
    background:var(--cvx-blue);
    color:#fff;
    box-shadow:0 12px 24px -12px rgba(18,107,255,.62);
}
.certificate_page_main .cvx_btn_primary:hover,
.certificate_page_main .cvx_btn_primary:focus{
    background:var(--cvx-blue-dark);
    color:#fff;
}
.certificate_page_main .cvx_btn_primary.is_copied{
    background:#0F9E42;
    box-shadow:0 12px 24px -12px rgba(15,158,66,.55);
}
.certificate_page_main .cvx_btn_ghost{
    background:#fff;
    border-color:var(--cvx-blue);
    color:var(--cvx-blue);
}
.certificate_page_main .cvx_btn_ghost:hover,
.certificate_page_main .cvx_btn_ghost:focus{
    background:#F1F6FF;
    color:var(--cvx-blue-dark);
    border-color:var(--cvx-blue-dark);
}

/* ---- 10. Certificate preview ---------------------------------------- */
.certificate_page_main .cvx_preview{
    background:linear-gradient(180deg,#EDF3FD 0%,#EFF4FD 100%);
    border-radius:16px;
    padding:clamp(16px,1.5vw,20px);
}
.certificate_page_main .cvx_viewer{
    position:relative;
    height:clamp(300px,24vw,360px);
    border-radius:12px;
    background:var(--cvx-viewer);
    overflow:hidden;
}
/* view=Fit renders the whole page scaled to the frame, so the certificate
   keeps its own aspect ratio and is never stretched or cropped - the dark
   viewer simply keeps the leftover space around it. */
.certificate_page_main .cvx_viewer iframe,
.certificate_page_main .cvx_viewer img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    display:block;
    background:var(--cvx-viewer);
    object-fit:contain;
}
/* Transparent shield keeps the preview view-only: no context menu, no
   drag-out, no in-frame toolbar - without hiding the document itself. */
.certificate_page_main .cvx_viewer_shield{
    position:absolute;
    inset:0;
    z-index:2;
    background:transparent;
}
.certificate_page_main .cvx_preview_note{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin:12px 0 0;
    font-size:13px;
    line-height:1.4;
    color:var(--cvx-muted);
    text-align:center;
}
.certificate_page_main .cvx_preview_note svg{
    flex:0 0 auto;
    width:16px;
    height:16px;
}

/* ---- 11. Verify another certificate --------------------------------- */
.certificate_page_main .cvx_again_wrap{
    margin-top:44px;
    text-align:center;
}
.certificate_page_main .cvx_again{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:280px;
    max-width:100%;
    min-height:46px;
    box-sizing:border-box;
    padding:10px 20px;
    border:1.5px solid var(--cvx-blue);
    border-radius:9px;
    background:#fff;
    color:var(--cvx-blue);
    font-size:15px;
    font-weight:600;
    line-height:1.2;
    text-decoration:none;
    transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.certificate_page_main .cvx_again:hover,
.certificate_page_main .cvx_again:focus{
    background:#F1F6FF;
    color:var(--cvx-blue-dark);
    border-color:var(--cvx-blue-dark);
}
.certificate_page_main .cvx_again svg{
    flex:0 0 auto;
    width:18px;
    height:18px;
}

/* ---- 15. COMPACT DESKTOP ---------------------------------------------
   Density tier for the very common "1920x1080 at Windows 125% scaling"
   case, which reports roughly 1536x864 CSS pixels, and for any desktop
   that is short rather than narrow (laptops, browser toolbars, taskbar).

   The type scale here is Screen 1's compact scale: 13px eyebrow,
   15.5px body copy, 15px controls - so the two screens read as one flow.
   Same layout, same hierarchy, same components: only density changes.

   Held at min-width 1200px so the desktop two-column card is never
   collapsed early; the tablet/mobile tiers below own everything under
   1200px. */
@media (min-width:1200px) and (max-width:1599.98px),
       (min-width:1200px) and (max-height:900px){
    body.cv_result_view .certificate_page_main{
        padding-bottom:26px;
    }
    .certificate_page_main .cvx_hero{
        padding-top:30px;
        padding-left:clamp(0px,2vw,30px);
    }
    .certificate_page_main .cvx_eyebrow{
        font-size:12.5px;
        letter-spacing:2.2px;
        margin-bottom:11px;
    }
    .certificate_page_main .cvx_hero_title{
        font-size:35px;
        line-height:1.12;
        margin-bottom:7px;
    }
    .certificate_page_main .cvx_hero_text{
        font-size:15.5px;
        line-height:1.5;
        max-width:610px;
    }

    .certificate_page_main .cvx_card{
        margin-top:22px;
    }
    .certificate_page_main .cvx_card_left{
        padding:26px 30px;
    }
    .certificate_page_main .cvx_card_right{
        padding:22px 24px;
    }
    .certificate_page_main .cvx_card_right::before{
        top:28px;
        bottom:28px;
    }

    .certificate_page_main .cvx_status{
        gap:14px;
    }
    .certificate_page_main .cvx_seal{
        flex-basis:42px;
        width:42px;
        height:42px;
    }
    .certificate_page_main .cvx_seal svg{
        width:30px;
        height:30px;
    }
    .certificate_page_main .cvx_status_body{
        min-height:42px;
    }
    .certificate_page_main .cvx_completed_by{
        font-size:26px;
    }

    .certificate_page_main .cvx_course_title{
        margin-top:14px;
        font-size:18px;
        line-height:1.3;
    }
    .certificate_page_main .cvx_view_course{
        margin-top:7px;
        font-size:14.5px;
    }
    .certificate_page_main .cvx_view_course svg{
        width:15px;
        height:15px;
    }

    .certificate_page_main .cvx_meta{
        margin-top:15px;
        gap:10px;
    }
    .certificate_page_main .cvx_meta_card{
        min-height:60px;
        padding:10px 13px;
        gap:11px;
    }
    .certificate_page_main .cvx_meta_icon{
        flex-basis:36px;
        width:36px;
        height:36px;
    }
    .certificate_page_main .cvx_meta_icon svg{
        width:18px;
        height:18px;
    }
    .certificate_page_main .cvx_meta_label{
        font-size:12.5px;
    }
    .certificate_page_main .cvx_meta_value{
        font-size:14.5px;
    }

    .certificate_page_main .cvx_rule{
        margin:16px 0;
    }

    .certificate_page_main .cvx_verify{
        gap:11px;
        margin-top:16px;
        padding:13px 14px;
    }
    .certificate_page_main .cvx_verify_icon{
        flex-basis:26px;
        width:26px;
        height:26px;
    }
    .certificate_page_main .cvx_verify_icon svg{
        width:26px;
        height:26px;
    }
    .certificate_page_main .cvx_verify_text{
        font-size:13.5px;
        line-height:1.45;
    }

    .certificate_page_main .cvx_actions{
        margin-top:18px;
        gap:12px;
    }
    .certificate_page_main .cvx_btn{
        min-height:47px;
        font-size:14.5px;
    }
    .certificate_page_main .cvx_btn svg{
        width:17px;
        height:17px;
    }

    .certificate_page_main .cvx_preview{
        padding:18px;
    }
    .certificate_page_main .cvx_viewer{
        height:322px;
    }
    .certificate_page_main .cvx_preview_note{
        margin-top:11px;
        font-size:12.5px;
        line-height:1.4;
    }

    .certificate_page_main .cvx_again_wrap{
        margin-top:40px;
    }
    .certificate_page_main .cvx_again{
        width:272px;
        min-height:46px;
        font-size:14.5px;
    }
    .certificate_page_main .cvx_again svg{
        width:17px;
        height:17px;
    }
}

/* ---- 16. EXTRA COMPACT DESKTOP ---------------------------------------
   1366x768 / 1536x768 class viewports, and any desktop whose usable
   height is cut further by tabs, address bar or the taskbar. Same
   content, one more density step. */
@media (min-width:1200px) and (max-height:820px){
    body.cv_result_view .certificate_page_main{
        padding-bottom:22px;
    }
    .certificate_page_main .cvx_hero{
        padding-top:24px;
    }
    .certificate_page_main .cvx_eyebrow{
        font-size:12px;
        margin-bottom:9px;
    }
    .certificate_page_main .cvx_hero_title{
        font-size:32px;
        margin-bottom:6px;
    }
    .certificate_page_main .cvx_hero_text{
        font-size:15px;
        line-height:1.45;
    }

    .certificate_page_main .cvx_card{
        margin-top:18px;
    }
    .certificate_page_main .cvx_card_left{
        padding:22px 28px;
    }
    .certificate_page_main .cvx_card_right{
        padding:18px 22px;
    }
    .certificate_page_main .cvx_card_right::before{
        top:24px;
        bottom:24px;
    }

    .certificate_page_main .cvx_seal{
        flex-basis:40px;
        width:40px;
        height:40px;
    }
    .certificate_page_main .cvx_seal svg{
        width:28px;
        height:28px;
    }
    .certificate_page_main .cvx_status_body{
        min-height:40px;
    }
    .certificate_page_main .cvx_completed_by{
        font-size:24px;
    }

    .certificate_page_main .cvx_course_title{
        margin-top:12px;
        font-size:17px;
    }
    .certificate_page_main .cvx_view_course{
        margin-top:6px;
        font-size:14px;
    }

    .certificate_page_main .cvx_meta{
        margin-top:14px;
        gap:10px;
    }
    .certificate_page_main .cvx_meta_card{
        min-height:57px;
        padding:9px 11px;
        gap:10px;
    }
    .certificate_page_main .cvx_meta_icon{
        flex-basis:34px;
        width:34px;
        height:34px;
    }
    .certificate_page_main .cvx_meta_icon svg{
        width:17px;
        height:17px;
    }
    .certificate_page_main .cvx_meta_label{
        font-size:12px;
    }
    .certificate_page_main .cvx_meta_value{
        font-size:14px;
    }

    .certificate_page_main .cvx_rule{
        margin:14px 0;
    }

    .certificate_page_main .cvx_verify_icon{
        flex-basis:24px;
        width:24px;
        height:24px;
    }
    .certificate_page_main .cvx_verify_icon svg{
        width:24px;
        height:24px;
    }
    .certificate_page_main .cvx_verify_text{
        font-size:12px;
        line-height:1.42;
    }

    .certificate_page_main .cvx_actions{
        margin-top:16px;
    }
    .certificate_page_main .cvx_btn{
        min-height:46px;
        font-size:14px;
    }

    .certificate_page_main .cvx_preview{
        padding:16px;
    }
    .certificate_page_main .cvx_viewer{
        height:302px;
    }
    .certificate_page_main .cvx_preview_note{
        margin-top:10px;
        font-size:12px;
    }

    .certificate_page_main .cvx_again_wrap{
        margin-top:30px;
    }
    .certificate_page_main .cvx_again{
        width:264px;
        min-height:44px;
        font-size:14px;
    }
}

/* ---- 17. Responsive -------------------------------------------------- */
@media (max-width:1399px){
    .certificate_page_main .cvx_hero{
        padding-left:clamp(0px,2vw,26px);
    }
}
@media (max-width:1199px){
    body.cv_result_view .certificate_page_main{
        min-height:0;
    }
    .certificate_page_main .cvx_card_left,
    .certificate_page_main .cvx_card_right{
        flex-basis:50%;
        max-width:50%;
    }
    .certificate_page_main .cvx_card_left{
        padding:24px 26px;
    }
    .certificate_page_main .cvx_completed_by{
        font-size:25px;
    }
    .certificate_page_main .cvx_course_title{
        font-size:17px;
    }
    .certificate_page_main .cvx_meta_card{
        padding:10px 12px;
        gap:10px;
    }
    .certificate_page_main .cvx_meta_value{
        font-size:14.5px;
    }
    .certificate_page_main .cvx_btn{
        font-size:14px;
        gap:8px;
        padding:10px 12px;
    }
}
@media (max-width:991px){
    .certificate_page_main .cvx_hero{
        padding-left:0;
    }
    .certificate_page_main .cvx_hero_br{
        display:none;
    }
    .certificate_page_main .cvx_card{
        flex-direction:column;
    }
    .certificate_page_main .cvx_card_left,
    .certificate_page_main .cvx_card_right{
        flex:1 1 auto;
        max-width:100%;
        width:100%;
    }
    .certificate_page_main .cvx_card_right::before{
        display:none;
    }
    .certificate_page_main .cvx_card_right{
        padding-top:0;
    }
    .certificate_page_main .cvx_viewer{
        height:clamp(320px,52vw,430px);
    }
}
@media (max-width:767px){
    .certificate_page_main .cvx_shell{
        padding:0 20px;
    }
    .certificate_page_main .cvx_hero{
        padding-top:26px;
    }
    .certificate_page_main .cvx_hero_title{
        font-size:clamp(28px,7.4vw,34px);
    }
    .certificate_page_main .cvx_hero_text{
        font-size:15.5px;
    }
    .certificate_page_main .cvx_card{
        border-radius:16px;
    }
    .certificate_page_main .cvx_card_left{
        padding:22px 20px;
    }
    .certificate_page_main .cvx_card_right{
        padding:0 20px 22px;
    }
    .certificate_page_main .cvx_seal{
        flex-basis:42px;
        width:42px;
        height:42px;
    }
    .certificate_page_main .cvx_seal svg{
        width:30px;
        height:30px;
    }
    .certificate_page_main .cvx_status_body{
        min-height:42px;
    }
    .certificate_page_main .cvx_completed_by{
        font-size:23px;
    }
    .certificate_page_main .cvx_course_title{
        font-size:16px;
    }
    .certificate_page_main .cvx_actions{
        flex-direction:column;
    }
    .certificate_page_main .cvx_btn{
        width:100%;
    }
    .certificate_page_main .cvx_again{
        width:100%;
    }
}
@media (max-width:479px){
    .certificate_page_main .cvx_meta{
        flex-direction:column;
    }
    /* In a column the 150px flex-basis would become each card's height. */
    .certificate_page_main .cvx_meta_card{
        flex:0 0 auto;
    }
    .certificate_page_main .cvx_verify{
        gap:10px;
        margin-top:14px;
        padding:12px 13px;
    }
    .certificate_page_main .cvx_verify_icon{
        flex-basis:26px;
        width:26px;
        height:26px;
    }
    .certificate_page_main .cvx_verify_icon svg{
        width:26px;
        height:26px;
    }
}