/* =========================================================================
   gw5-quiz-respond.css - batch QF1, 2026-10-09
   The pages a quiz taker sees: start (qzs.aspx), questions (qz.aspx, and
   qzfull.aspx for "all questions on one page"), lead form (qzform.aspx) and
   result (qzres.aspx). Design: Hitesh's four mocks (1. Start page, 2. Quiz
   page, 3. Lead capture page, 4. Result page), for all three quiz types
   (Scored, Pass/Fail, Outcome).

   HOW IT FITS WITH THE QUIZ THEME
   Each page links this file BEFORE <%=Theme_StyleSheet%>. The theme sets
   colours, font sizes, weights and the font with !important, and those
   still win: nothing here forces a colour, size, weight or font that a
   theme sets. The exceptions: geometry the theme code hard-codes (not
   choices a quiz owner makes), the 100px width and 5px corners of the quiz
   buttons; and the Next-button colour the theme gives the old radio dot,
   which would now land on the answer letters and the tick (see section 2).
   The accent colour (--brand) starts as blue; gw5-quiz-respond.js changes
   it to the theme's own button colour, so selected answers, progress and
   score rings follow the theme. Borders follow the text colour, so a dark
   themed card stays readable.

   STILL ON THE OLD STACK
   Quiz.master is not changed: Bootstrap, jQuery and its plugins still load
   (the lead form checks, date pickers, the "Please wait" box, the charts
   and the round category scores need them). The template script wraps each
   radio and checkbox in div.radio-custom / div.checkbox-custom when the
   page is ready; the rules below work before and after that.

   BROWSERS
   color-mix() and :has() only add polish here; every rule that matters has
   a plain fallback. Without gw5-quiz-respond.js the pages keep this layout
   and the stock charts.
   ========================================================================= */

:root {
    --brand: #1666E0;
    --brand2: #22B8CF;
    --tint: rgba(22, 102, 224, .08);
    --ink: #0B1220;
    --ink2: #344054;
    --sub: #667085;
    --ok: #067647;
    --bad: #B42318;
    --line: rgba(16, 24, 40, .09);
    --track: rgba(120, 134, 158, .22);
    --shadow: rgba(16, 24, 40, .22);
    --gwq-font: Inter, "Anek Gujarati", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --gwq-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E");
    --gwq-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --gwq-icon-lead: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20V11M12 20V4M19 20v-6'/%3E%3C/svg%3E");
    --gwq-icon-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 2l2.2 6.3L20.5 10l-6.3 2.2L12 18.5 9.8 12.2 3.5 10l6.3-1.7zM19 15l1 2.6 2.6 1-2.6 1-1 2.6-1-2.6-2.6-1 2.6-1z'/%3E%3C/svg%3E");
}

/* the theme's card or page colour is dark: the script adds .gw-dark to the
   part concerned, and the text it does not colour itself turns light */
.gw-dark {
    --ink: #F2F5FA;
    --ink2: #D5DCE8;
    --sub: #AAB4C5;
    --line: rgba(255, 255, 255, .14);
    --track: rgba(255, 255, 255, .2);
    color: var(--ink);
}
.gw-qr .gw-dark .gw-chip.up { color: #75E0A7; background: rgba(18, 183, 106, .2); }
.gw-qr .gw-dark .gw-chip.down { color: #FEC84B; background: rgba(247, 144, 9, .2); }

@keyframes gwq-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes gwq-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes gwq-pop { from { opacity: 0; transform: translateY(10px); } }
@keyframes gwq-drift { 50% { transform: translate(40px, -24px) scale(1.08); } }
@keyframes gwq-shake { 25% { transform: translateX(-7px); } 75% { transform: translateX(7px); } }

/* page: the theme's own page colour and font still win (both !important) */
body {
    background-color: #F4F6FB;
    background-image: radial-gradient(900px 380px at 50% 0, rgba(22, 102, 224, .14), transparent 70%);
    background-repeat: no-repeat;
    font-family: var(--gwq-font);
    -webkit-font-smoothing: antialiased;
}

/* Quiz.master centres the page in the window; the new design starts at the
   top, so the card does not jump up and down as questions change length */
form > div > .d-flex.flex-column.justify-content-center {
    justify-content: flex-start !important;
}

/* the quiz owner's logo under the page (Quiz.master imgLogo); nothing when
   there is no logo (it was an empty image with 6rem of margin) */
form img[id$="imgLogo"] {
    display: block;
    width: auto;
    height: auto;
    max-width: min(260px, 70vw);
    max-height: 96px;
    margin: 8px auto 40px !important;
    object-fit: contain;
}
form img[id$="imgLogo"][src=""],
form img[id$="imgLogo"]:not([src]) {
    display: none;
}

/* the "Please wait while we process" box (Quiz.master #loading) */
#loading .modal-content {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 30px 60px -20px rgba(16, 24, 40, .45);
}
#loading .modal-body { padding: 28px 24px; }
#loading .flipping div { background-color: var(--brand); border-radius: 4px; }

.gw-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.gw-hide { display: none !important; }


/* =========================================================================
   1. START PAGE (qzs.aspx): .gw-qs
   The image comes first (whatever its shape, shown whole), then the title,
   the description and one action. Title and description are free text:
   the script sizes them to their length (data-len), the theme's font size
   still wins.
   ========================================================================= */
.gw-qs {
    --plate: linear-gradient(135deg, rgba(22, 102, 224, .12), rgba(34, 184, 207, .14));
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(20px, 5vw, 56px) 16px 48px;
    color: var(--ink);
}
.gw-qs::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 40px;
    width: 640px;
    max-width: 100vw;
    height: 420px;
    margin-left: -320px;
    background: radial-gradient(closest-side, rgba(34, 184, 207, .26), transparent);
    filter: blur(36px);
    animation: gwq-drift 18s ease-in-out infinite;
    pointer-events: none;
}
.gw-qs.gw-noimg { padding-top: clamp(56px, 10vw, 112px); }

.gw-qs > .sp_image {
    order: -1;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 440px;
    margin: 0 0 clamp(28px, 5vw, 44px);
    object-fit: scale-down;
    background: var(--plate);
    border-radius: 28px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 36px 80px -32px rgba(16, 24, 40, .55);
    outline: 1px solid rgba(16, 24, 40, .08);
    outline-offset: -1px;
    animation: gwq-up .8s cubic-bezier(.2, .8, .2, 1) both;
}

.gw-qs > h1 {
    max-width: 28ch;
    margin: 0 0 16px;
    color: var(--ink);
    font-size: clamp(32px, 6vw, 52px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
    animation: gwq-up .8s .08s cubic-bezier(.2, .8, .2, 1) both;
}
.gw-qs > h1[data-len="s"] { max-width: 24ch; font-size: clamp(34px, 6.4vw, 58px); }
.gw-qs > h1[data-len="l"] { max-width: 34ch; font-size: clamp(25px, 4.2vw, 36px); line-height: 1.18; letter-spacing: -.022em; }
.gw-qs > h1 > span,
.gw-qs > h5 > span { display: block; }
.gw-qs > h1::after {
    content: "";
    display: block;
    width: 56px;
    height: 5px;
    margin: 22px auto 0;
    border-radius: 3px;
    background: var(--brand);
    background: linear-gradient(90deg, var(--brand), var(--brand2));
}
.gw-qs > h5 {
    max-width: 58ch;
    margin: 6px 0 0 !important;
    color: var(--sub);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.65;
    text-align: center;
    text-wrap: pretty;
    overflow-wrap: anywhere;
    animation: gwq-up .8s .16s cubic-bezier(.2, .8, .2, 1) both;
}
.gw-qs > h5[data-len="s"] { max-width: 44ch; font-size: clamp(19px, 2.4vw, 22px); line-height: 1.55; text-wrap: balance; }
.gw-qs > h5[data-len="l"] { max-width: 64ch; font-size: 17px; line-height: 1.8; text-align: left; }
.gw-qs > h5 p { margin: 0 0 .9em; }
.gw-qs > h5 p:last-child { margin-bottom: 0; }

/* the one action: long text wraps; the arrow follows the (themed) text colour */
.gw-qs > .butn2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    max-width: 100%;
    min-height: 62px;
    margin-top: 34px;
    padding: 14px 44px;
    border: 0;
    border-radius: 16px;
    background-color: var(--brand);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 18px 34px -16px rgba(11, 18, 32, .5), inset 0 1px 0 rgba(255, 255, 255, .28);
    transition: transform .18s, box-shadow .18s, filter .18s;
    animation: gwq-up .8s .24s cubic-bezier(.2, .8, .2, 1) both;
}
.gw-qs > .butn2::after {
    content: "";
    flex: none;
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: var(--gwq-arrow) center / contain no-repeat;
    mask: var(--gwq-arrow) center / contain no-repeat;
    transition: transform .2s;
}
.gw-qs > .butn2:hover { transform: translateY(-2px); filter: brightness(.93); text-decoration: none; }
.gw-qs > .butn2:hover::after { transform: translateX(5px); }
.gw-qs > .butn2:active { transform: none; }
.gw-qs > .butn2:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.gw-qs > .gw-hint { margin: 18px 0 0; font-size: 13px; opacity: .6; animation: gwq-up .8s .4s both; }
@media (hover: none) { .gw-qs > .gw-hint { display: none; } }
@media (max-width: 640px) {
    .gw-qs { padding: 20px 16px 40px; }
    .gw-qs > .sp_image { border-radius: 22px; }
    .gw-qs > h5 { font-size: 18px; }
    .gw-qs > h5:not([data-len="s"]) { text-align: left; }
    .gw-qs > .butn2 { width: 100%; max-width: 420px; margin-top: 28px; }
}


/* =========================================================================
   2. QUESTIONS (qz.aspx one question per page; qzfull.aspx all on one page
   adds .gw-qz-full): .gw-qz on pnlQWizard
   Answers are lettered tiles; picture answers are a grid of cards. The
   tile borders follow the text colour, so any theme stays readable.
   ========================================================================= */
.gw-qz {
    position: relative;
    width: 100%;
    max-width: 760px !important;
    margin: 0 auto;
    padding: clamp(4px, 2vw, 16px) 16px 24px;
    color: var(--ink);
}
.gw-qz > br { display: none; }
.gw-qz .row { margin-left: 0; margin-right: 0; }
.gw-qz .row > * { padding-left: 0; padding-right: 0; }
.gw-qz [class*="col-"] { flex: 0 0 100%; float: none; width: 100%; max-width: 100%; padding-left: 0; padding-right: 0; }
.gw-qz h3 { margin: 0; }
.gw-qz [id$="lblQuizTitle"] {
    display: block;
    margin: clamp(16px, 3vw, 28px) 0 14px;
    color: var(--sub);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}
/* a theme that sets a large quiz title: keep its own case and spacing */
.gw-qz [id$="lblQuizTitle"].gw-big,
.gw-qf-title [id$="lblQuizTitle"].gw-big { letter-spacing: -.01em; text-transform: none; }
.gw-qz .panel { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }

/* the card (overflow: clip, not hidden, so the phone footer can stay sticky) */
.gw-qz .question_grid {
    position: relative;
    overflow: visible;
    overflow: clip;
    margin: 0 0 24px !important;
    padding: clamp(22px, 4.4vw, 44px) !important;
    border: 0 !important;
    border-radius: 28px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 32px 64px -28px rgba(16, 24, 40, .35) !important;
    animation: gwq-in .5s ease both;
}
/* the template's .pl25 / .pr25 are !important 25px paddings */
.gw-qz .pl25,
.gw-qz .pr25 { padding-left: 0 !important; padding-right: 0 !important; }

/* progress along the top of the window (the script adds it) */
.gw-qz .gw-qbar { position: fixed; inset: 0 0 auto 0; z-index: 30; height: 4px; background: var(--tint); }
.gw-qz .gw-qbar i {
    display: block;
    height: 100%;
    width: calc(var(--gw-prog, 0) * 1%);
    border-radius: 0 4px 4px 0;
    background: var(--brand);
    background: linear-gradient(90deg, var(--brand), var(--brand2));
    transition: width .6s cubic-bezier(.2, .8, .2, 1);
}

/* the question: free text, the script sizes it to its length (data-len) */
.gw-qz .gw-eye { margin: 0 0 10px; color: var(--brand); font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.gw-qz [id^="QG_"] .form-group { margin: 0; padding: 0; }
.gw-qz [id^="QG_"] .form-group > .col-lg-12,
.gw-qz [id^="QG_"] .form-group > .col-lg-8 { text-align: left !important; }
.gw-qz .question {
    margin: 0 0 26px;
    color: var(--ink);
    font-size: clamp(23px, 3.2vw, 30px);
    font-weight: 700;
    line-height: 1.28;
    letter-spacing: -.02em;
    text-align: left !important;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.gw-qz .question[data-len="s"] { font-size: clamp(25px, 3.6vw, 34px); }
.gw-qz .question[data-len="l"] { font-size: clamp(19px, 2.4vw, 23px); line-height: 1.45; letter-spacing: -.01em; text-wrap: pretty; }
.gw-qz .question img { max-width: 100%; height: auto; border-radius: 14px; }
.gw-qz .question + br { display: none; }
.gw-qz .question .color-red-dark { color: var(--bad); font-weight: 600; }
/* a question group with several questions: each question's label above its answers */
.gw-qz .form-group label.control-label { display: block; margin: 0 0 12px; padding: 0; color: inherit; font-size: 17px; font-weight: 600; line-height: 1.4; text-align: left; }

/* answers: the table the server writes becomes a column of tiles */
.gw-qz .answer,
.gw-qz .answer > tbody,
.gw-qz .answer tr,
.gw-qz .answer td { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; }
.gw-qz .answer {
    counter-reset: gwo;
    color: var(--ink);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
}
.gw-qz .answer td {
    position: relative;
    counter-increment: gwo;
    margin: 0 0 12px;
    animation: gwq-pop .45s cubic-bezier(.2, .8, .2, 1) both;
}
.gw-qz .answer td:empty { display: none; }
.gw-qz .answer tr:nth-child(2) td { animation-delay: .05s; }
.gw-qz .answer tr:nth-child(3) td { animation-delay: .1s; }
.gw-qz .answer tr:nth-child(4) td { animation-delay: .15s; }
.gw-qz .answer tr:nth-child(n+5) td { animation-delay: .2s; }
.gw-qz .answer.gw-many td { margin-bottom: 9px; }
.gw-qz .answer.gw-many label { min-height: 54px; padding-top: 10px; padding-bottom: 10px; }
.gw-qz .answer .radio-custom { position: relative; margin: 0 !important; padding: 0 !important; text-align: left !important; }

/* the radio itself is invisible and covers the whole tile */
.gw-qz .answer input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.gw-qz .answer input[type="radio"] + label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 64px;
    margin: 0;
    padding: 14px 18px;
    border: 1.5px solid rgba(128, 128, 128, .32);
    border-color: color-mix(in srgb, currentColor 16%, transparent);
    border-radius: 16px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    overflow-wrap: anywhere;
    transition: border-color .15s, background-color .15s, box-shadow .15s, transform .1s;
}
/* the letter (A, B, C...) */
.gw-qz .answer input[type="radio"] + label::before {
    content: counter(gwo, upper-alpha);
    position: static;
    top: auto;
    left: auto;
    flex: none;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0;
    border: 1.5px solid rgba(128, 128, 128, .5);
    border-color: color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    opacity: .85;
    transition: background-color .15s, border-color .15s, color .15s;
}
/* the tick on the right, shown when chosen */
.gw-qz .answer input[type="radio"] + label::after {
    content: "";
    display: block;
    position: static;
    top: auto;
    left: auto;
    flex: none;
    width: 22px;
    height: 22px;
    margin: 0 0 0 auto;
    border: 0;
    border-radius: 50%;
    background-color: var(--brand);
    background-image: var(--gwq-check);
    background-position: center;
    background-size: 12px;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(.5);
    transition: opacity .15s, transform .2s;
}
.gw-qz .answer td:hover input[type="radio"] + label { border-color: rgba(128, 128, 128, .6); border-color: color-mix(in srgb, currentColor 38%, transparent); }
.gw-qz .answer td:active input[type="radio"] + label { transform: scale(.995); }
/* the theme colours the old radio dot (its "label:before" and "label:after")
   with the Next button's colour; the letter keeps the answer's own text
   colour instead (a white or pale Next button would hide it) and the tick
   the accent */
.gw-qz .answer input[type="radio"] + label::before { color: inherit !important; }
.gw-qz .answer input[type="radio"] + label::after,
.gw-qz .answer input[type="radio"]:checked + label::after { background-color: var(--brand) !important; }
.gw-qz .answer input[type="radio"]:checked + label {
    border-color: var(--brand);
    background-color: var(--tint);
    box-shadow: inset 0 0 0 1px var(--brand);
}
.gw-qz .answer input[type="radio"]:checked + label::before {
    border-color: var(--brand) !important;
    background: var(--brand) !important;
    color: #fff !important;
    opacity: 1;
}
.gw-qz .answer input[type="radio"]:checked + label::after {
    content: "";
    position: static;
    top: auto;
    left: auto;
    width: 22px;
    height: 22px;
    margin: 0 0 0 auto;
    border-radius: 50%;
    opacity: 1;
    transform: none;
}
.gw-qz .answer input[type="radio"]:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 3px; }
.gw-qz .answer input[type="radio"]:disabled + label { opacity: .55; cursor: not-allowed; }

/* picture answers (the server adds "ans_img"): a grid of picture cards */
.gw-qz .answer.ans_img > tbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, calc(50% - 7px)), 1fr)); gap: 14px; }
.gw-qz .answer.ans_img tr { display: contents; }
.gw-qz .answer.ans_img td { margin: 0; }
.gw-qz .answer.ans_img input[type="radio"] + label {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    height: 100%;
    padding: 10px;
    text-align: center;
}
.gw-qz .answer.ans_img input[type="radio"] + label::before {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 1;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    color: #0B1220;
}
.gw-qz .answer.ans_img input[type="radio"] + label::after,
.gw-qz .answer.ans_img input[type="radio"]:checked + label::after {
    position: absolute;
    top: 18px;
    right: 18px;
    left: auto;
    z-index: 1;
    margin: 0;
}
.gw-qz .answer .hw190 { display: block; width: 100%; max-height: none; text-align: center; }
.gw-qz .answer .hw190 > br { display: none; }
.gw-qz .answer .hw190 img,
.gw-qz .answer label img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    margin: 0 0 10px;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    border-radius: 10px;
    background: rgba(128, 128, 128, .08);
}

/* the message instead of the "Please select answer" box */
.gw-qz .gw-err { display: none; margin: 14px 0 0; color: var(--bad); font-weight: 600; }
.gw-qz .gw-err.on { display: block; }
.gw-qz .gw-tip { margin: 16px 0 0; color: var(--sub); font-size: 13px; }
.gw-shake { animation: gwq-shake .3s; }

/* the footer: question number and buttons */
.gw-qz .hr_sep {
    height: 1px;
    margin: 28px 0 20px;
    border: 0;
    opacity: 1;
    background-color: rgba(128, 128, 128, .28);
    background-color: color-mix(in srgb, currentColor 14%, transparent);
}
.gw-qz .d-flex.justify-content-between { align-items: center; gap: 12px; }
.gw-qz .d-flex.justify-content-between > div { display: flex; flex: 1; gap: 10px; }
.gw-qz .d-flex.justify-content-between > div:last-child { justify-content: flex-end; }
.gw-qz.gw-hasno .d-flex.justify-content-between > div.gw-noslot { display: none; }
.gw-qz.gw-hasno .d-flex.justify-content-between > div:last-child { justify-content: flex-start; }
.gw-qz.gw-hasno .butn2:not([id$="btnPrevious"]) { margin-left: auto; }
.gw-qz.gw-hasno [id$="btnPrevious"] { margin-right: auto; }
.gw-qz [id$="lblQNo"] {
    display: inline-block;
    padding: 6px 14px;
    background: var(--tint);
    border-radius: 999px;
    color: var(--brand);
    font-weight: 700;
}

/* Buttons. The theme fixes them at 100px wide with 5px corners
   (hard-coded in SetTheme, not a theme choice); here they size to their
   text with the design's corners. Colours, font size and weight are still
   the theme's. */
.gw-qz .butn2 {
    min-width: 120px;
    min-height: 52px;
    padding: 0 28px;
    border: 1.5px solid transparent;
    border-radius: 14px;
    background-color: var(--brand);
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 10px 22px -12px rgba(11, 18, 32, .55);
    transition: transform .12s, filter .15s;
}
#ctl00_CP_pnlQWizard.gw-qz .butn2 { width: auto !important; border-radius: 14px !important; }
.gw-qz .butn2:hover { transform: translateY(-1px); filter: brightness(.93); }
.gw-qz .butn2:active { transform: none; }
.gw-qz .butn2:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.gw-qz [id$="btnPrevious"] {
    background-color: transparent;
    color: inherit;
    border-color: rgba(128, 128, 128, .5);
    border-color: color-mix(in srgb, currentColor 30%, transparent);
    box-shadow: none;
}

/* Pass/Fail with "reveal answers": after Next, the correct answer is green
   and a wrong answer red (the script marks them; the server's ticks and
   crosses stay) */
.gw-qz [id$="pnlResult"] .form-group { margin: 0 0 18px; padding: 0; border: 0; background: none; }
.gw-qz [id$="pnlResult"] .col-lg-12.pl25 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; margin: 0; padding: 0 !important; }
.gw-qz [id$="pnlResult"] .col-lg-12.pl25 > .col-sm-10 {
    grid-column: 1;
    width: auto !important;
    margin: 0 !important;
    padding: 15px 20px !important;
    border: 1.5px solid rgba(128, 128, 128, .32);
    border-color: color-mix(in srgb, currentColor 16%, transparent);
    border-radius: 14px;
    font-size: 18px;
    font-weight: 500;
}
.gw-qz [id$="pnlResult"] .col-lg-12.pl25 > .col-sm-2 {
    grid-column: 2;
    align-self: center;
    width: auto !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    background: var(--tint);
    border-radius: 999px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.gw-qz [id$="pnlResult"] .col-sm-2 img,
.gw-qr .gw-ans img { width: 16px; height: 16px; vertical-align: -3px; }
.gw-qz .col-sm-10.gw-ok { background: rgba(6, 118, 71, .1); border-color: var(--ok) !important; }
.gw-qz .col-sm-10.gw-bad { background: rgba(180, 35, 24, .09); border-color: var(--bad) !important; }
.gw-qz .col-sm-2.gw-ok { color: var(--ok) !important; background: rgba(6, 118, 71, .15) !important; }
.gw-qz .col-sm-2.gw-bad { color: var(--bad) !important; background: rgba(180, 35, 24, .14) !important; }

/* all questions on one page (qzfull.aspx) */
.gw-qz-full [id^="QG_"] { margin: 0; }
.gw-qz-full [id^="QG_"] .question { font-size: clamp(20px, 2.6vw, 24px); margin-bottom: 18px; }
.gw-qz-full [id^="QG_"].gw-miss .answer input[type="radio"] + label { border-color: var(--bad); }
.gw-qz-full .hr_sep { margin: 26px 0; }
.gw-qz-full .question_grid > .row > .col-lg-12[align="center"] { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.gw-qz-full .gw-sum { display: none; color: var(--bad); font-weight: 600; }
.gw-qz-full .gw-sum.on { display: block; }

@media (max-width: 640px) {
    .gw-qz .question_grid { padding: 24px 20px 20px !important; }
    .gw-qz .answer input[type="radio"] + label { gap: 12px; padding: 13px 14px; min-height: 58px; }
    /* the footer stays in view and takes the card's own (themed) colour */
    .gw-qz .question_grid > .row { background-color: inherit; }
    .gw-qz:not(.gw-qz-full) .question_grid > .row > .col-lg-12:last-child {
        position: sticky;
        bottom: 0;
        z-index: 6;
        width: calc(100% + 40px);
        max-width: none;
        flex: 0 0 calc(100% + 40px);
        margin: 0 -20px -20px;
        padding: 12px 20px calc(14px + env(safe-area-inset-bottom, 0px));
        background-color: inherit;
        box-shadow: 0 -16px 22px -20px rgba(16, 24, 40, .6);
    }
    .gw-qz .d-flex.justify-content-between { flex-direction: column; align-items: stretch; }
    .gw-qz .d-flex.justify-content-between > div:first-child { justify-content: center; }
    .gw-qz .butn2 { flex: 1; min-width: 0; min-height: 56px; }
    #ctl00_CP_pnlQWizard.gw-qz-full .butn2 { width: 100% !important; }
    .gw-qz [id$="pnlResult"] .col-lg-12.pl25 { grid-template-columns: minmax(0, 1fr); }
    .gw-qz [id$="pnlResult"] .col-lg-12.pl25 > .col-sm-2 { grid-column: 1; justify-self: start; }
}
@media (hover: none) { .gw-qz .gw-tip { display: none; } }


/* =========================================================================
   3. LEAD FORM (qzform.aspx): .gw-qf on the panel
   A card with a badge, the title and description (free text), the fields
   the quiz owner chose (any number: two columns from four short fields),
   the consent box and one action.
   ========================================================================= */
.gw-qf-title { width: 100%; max-width: 600px; }
.gw-qf-title h3 { margin: clamp(16px, 3vw, 28px) 0 14px; }
.gw-qf-title [id$="lblQuizTitle"] {
    display: block;
    color: var(--sub);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}
.panel.gw-qf { width: 100%; max-width: 600px; margin: 0 auto; padding: 0 16px !important; background: none; border: 0; box-shadow: none; }
.panel.gw-qf.gw-wide { max-width: 700px; }
.gw-qf .question_grid {
    position: relative;
    overflow: hidden;
    margin: 0 0 24px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 28px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 32px 64px -28px rgba(16, 24, 40, .35) !important;
    color: var(--ink);
    animation: gwq-in .5s ease both;
}
.gw-qf .question_grid::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--brand);
    background: linear-gradient(90deg, var(--brand), var(--brand2));
}
.gw-qf .row { display: block; margin-left: 0; margin-right: 0; }
.gw-qf .row > * { padding-left: 0; padding-right: 0; }
.gw-qf [class*="col-"] { float: none; width: 100%; max-width: 100%; }
.gw-qf .p-5 { padding: clamp(40px, 7vw, 56px) clamp(22px, 6vw, 44px) clamp(28px, 5vw, 44px) !important; }
.gw-qf .question_grid .panel-body { padding: 0; border: 0; background: transparent; box-shadow: none; }

/* header: a badge drawn here, then the title and description */
.gw-qf .p-5 > h2::before {
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    margin: 0 auto 22px;
    border-radius: 20px;
    background: var(--gwq-icon-lead) center / 30px no-repeat, var(--brand);
    background: var(--gwq-icon-lead) center / 30px no-repeat, linear-gradient(135deg, var(--brand2), var(--brand));
    box-shadow: 0 14px 26px -12px rgba(11, 18, 32, .55);
}
.gw-qf h2 {
    margin: 0 0 10px;
    color: var(--ink);
    font-size: clamp(26px, 4.6vw, 34px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.025em;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.gw-qf h2[data-len="l"] { font-size: clamp(22px, 3.6vw, 28px); line-height: 1.25; }
.gw-qf h4 {
    max-width: 44ch;
    margin: 0 auto 30px;
    color: var(--sub);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.gw-qf h4[data-len="l"] { max-width: 56ch; font-size: 16px; line-height: 1.7; text-align: left !important; text-wrap: pretty; }
.gw-qf h2 > span,
.gw-qf h4 > span { display: block; }

/* fields: label above, full width, 56px tall */
.gw-qf .form-group { display: block; margin: 0 0 20px; padding: 0; }
.gw-qf .form-group > [class*="col-"] { display: block; flex: none; width: 100% !important; max-width: 100%; padding: 0; }
.gw-qf .form-group > label,
.gw-qf .form-group label.control-label {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    color: var(--ink2);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
}
.gw-qf .form-control,
.gw-qf .form-select {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: 56px;
    margin: 0;
    padding: 0 16px;
    background-color: #fff;
    color: #0B1220;
    border: 1.5px solid rgba(11, 18, 32, .2);
    border-radius: 14px;
    box-shadow: none;
    font-family: inherit;
    font-size: 17px !important;
    line-height: 1.3;
    transition: border-color .15s;
}
.gw-qf .form-select {
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23344054' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 12px;
    -webkit-appearance: none;
    appearance: none;
}
.gw-qf textarea.form-control { height: auto; min-height: 120px; padding: 14px 16px; line-height: 1.55; resize: vertical; }
.gw-qf .form-control:focus,
.gw-qf .form-select:focus { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 1px; }
.gw-qf ::placeholder { color: #8A94A6; }
.gw-qf .panel-body.gw-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.gw-qf .panel-body.gw-cols > .form-group { grid-column: 1 / -1; }
.gw-qf .panel-body.gw-cols::before,
.gw-qf .panel-body.gw-cols::after { content: none; display: none; }
.gw-qf .panel-body.gw-cols > .form-group.gw-half { grid-column: auto; }

/* choice fields: each option is a tile */
.gw-qf .form-group table { width: 100%; border-collapse: separate; border-spacing: 0; }
.gw-qf .form-group table td {
    display: block;
    position: relative;
    margin: 0 0 8px;
    padding: 12px 16px;
    border: 1.5px solid rgba(128, 128, 128, .32);
    border-color: color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 14px;
    transition: border-color .15s, background-color .15s;
}
.gw-qf .form-group table td:has(input:checked) { border-color: var(--brand); background-color: var(--tint); }
.gw-qf .form-group table .radio-custom,
.gw-qf .form-group table .checkbox-custom { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; }
.gw-qf .form-group table input[type="radio"],
.gw-qf .form-group table input[type="checkbox"] {
    position: static;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    opacity: 1;
    accent-color: var(--brand);
}
.gw-qf .form-group table input + label { display: inline; flex: 1; margin: 0; padding: 0; color: inherit; font-size: 16px; font-weight: 500; line-height: 1.4; }
.gw-qf .form-group table input[type="radio"] + label::before,
.gw-qf .form-group table input[type="radio"] + label::after,
.gw-qf .form-group table input[type="checkbox"] + label::before,
.gw-qf .form-group table input[type="checkbox"] + label::after { content: none; display: none; }

/* consent: the checkbox is drawn here */
.gw-qf #LegalNotice,
.gw-qf [id$="LegalNotice"] { margin: 4px 0 22px; }
.gw-qf .legal_text {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid rgba(128, 128, 128, .3);
    border-color: color-mix(in srgb, currentColor 16%, transparent);
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.5;
    transition: border-color .15s, background-color .15s;
}
.gw-qf .legal_text:has(input:checked) { border-color: var(--brand); background-color: var(--tint); }
.gw-qf .legal_text > .checkbox-custom { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 0; }
.gw-qf .legal_text input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: static;
    flex: none;
    width: 24px;
    height: 24px;
    margin: 1px 0 0;
    opacity: 1;
    background: #fff;
    border: 2px solid rgba(128, 128, 128, .6);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.gw-qf .legal_text input[type="checkbox"]:checked { background: var(--brand) var(--gwq-check) center / 14px no-repeat; border-color: var(--brand); }
.gw-qf .legal_text input[type="checkbox"]:focus-visible,
.gw-qf .form-group table input:focus-visible { outline: 2px solid var(--brand) !important; outline-offset: 2px; }
.gw-qf .legal_text label { margin: 0 !important; padding: 0; color: inherit; font: inherit; line-height: 1.5; cursor: pointer; }
.gw-qf .legal_text input[type="checkbox"] + label::before,
.gw-qf .legal_text input[type="checkbox"] + label::after { content: none; display: none; }
.gw-qf .legal_text a { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* the action and the skip link */
.gw-qf .butn2 {
    display: block !important;
    width: 100% !important;
    min-height: 60px;
    margin: 0;
    padding: 14px 28px;
    border: 0;
    border-radius: 16px;
    background-color: var(--brand);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
    cursor: pointer;
    box-shadow: 0 16px 30px -14px rgba(11, 18, 32, .5);
    transition: transform .15s, filter .15s;
}
.gw-qf .butn2:hover { transform: translateY(-1px); filter: brightness(.93); }
.gw-qf .butn2:active { transform: none; }
.gw-qf .butn2:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.gw-qf [id$="lbSkip"] { display: inline-block; margin-top: 6px; color: var(--brand); font-size: 15px; font-weight: 600; text-decoration: none; }
.gw-qf [id$="lbSkip"]:hover { text-decoration: underline; }
@media (max-width: 560px) {
    .gw-qf .panel-body.gw-cols { grid-template-columns: minmax(0, 1fr); }
    .gw-qf .panel-body.gw-cols > .form-group.gw-half { grid-column: 1 / -1; }
}

/* the date picker that opens under a date field */
.datepicker.dropdown-menu { padding: 8px; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 40px -18px rgba(16, 24, 40, .4); font-family: inherit; }


/* =========================================================================
   4. RESULT (qzres.aspx): .gw-qr around everything
   Scored and Pass/Fail: a ring drawn from the score (the script draws it;
   no chart library), the grade, you-vs-average, the grade text, one action.
   Outcome: the outcome card(s), each with its picture, text, % match and
   button. Then categories, feedback, offer and the answer review.
   ========================================================================= */
.gw-qr { width: 100%; color: var(--ink); }
.gw-qr .section_result,
.gw-qr .section_type,
.gw-qr .section_feedback,
.gw-qr .section_offer,
.gw-qr .section_answers { padding: 24px 16px; }

/* cards */
.gw-qr .grid_result,
.gw-qr .grid_type,
.gw-qr .grid_feedback,
.gw-qr .grid_answers {
    position: relative;
    display: block !important;
    max-width: 960px;
    margin: 20px auto !important;
    padding: 40px 48px !important;
    border: 1px solid var(--line);
    border-radius: 28px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 28px 64px -28px var(--shadow);
    overflow-wrap: anywhere;
}
.gw-qr .grid_result > [class*="col"],
.gw-qr .grid_feedback > [class*="col"],
.gw-qr .grid_answers > [class*="col"],
.gw-qr .grid_type.gw-chart > [class*="col"] { width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
.gw-js .gw-qr .gw-reveal { opacity: 0; transform: translateY(18px); }
.gw-js .gw-qr .gw-reveal.gw-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }

/* 1. the result card: a thin gradient frame */
.gw-qr .grid_result::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--brand), var(--brand2));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}
.gw-qr .grid_result.gw-hasring::after {
    content: "";
    position: absolute;
    left: -30px;
    top: -30px;
    width: min(380px, 100%);
    height: 380px;
    background: radial-gradient(closest-side, rgba(34, 184, 207, .2), transparent);
    pointer-events: none;
}
.gw-qr .grid_result > .col { position: relative; z-index: 1; }
.gw-qr [id$="lblGradeTitle"] {
    display: block;
    margin: 0 0 8px;
    color: var(--ink);
    font-size: 36px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.03em;
    text-wrap: balance;
}
.gw-qr [id$="lblGradeTitle"] > br { display: none; }
.gw-qr [id$="lblScore"],
.gw-qr [id$="lblCorrect"] {
    display: inline-block;
    margin: 4px 4px 12px;
    padding: 5px 18px;
    background: var(--tint);
    border-radius: 999px;
    color: var(--brand);
    font-size: 18px;
    font-weight: 600;
}
.gw-qr [id$="lblScore"] br,
.gw-qr [id$="lblCorrect"] br { display: none; }

/* with the ring: ring on the left, title and chips on the right */
.gw-qr .grid_result .col.gw-hasring { display: grid !important; grid-template-columns: 208px minmax(0, 1fr); column-gap: 48px; align-items: center; text-align: left !important; }
.gw-qr .grid_result .col.gw-hasring > * { grid-column: 1 / -1; }
.gw-qr .grid_result .col.gw-hasring > .gw-hr { grid-column: 1; grid-row: 1 / span 2; }
.gw-qr .grid_result .col.gw-hasring > [id$="lblGradeTitle"] { grid-column: 2; grid-row: 1; align-self: end; }
.gw-qr .grid_result .col.gw-hasring > .gw-chips { grid-column: 2; grid-row: 2; align-self: start; }
.gw-qr .grid_result .col.gw-hasring > [id$="lblGradeDesc"] { grid-row: 3; margin-left: 0; margin-right: 0; }
.gw-qr .grid_result .col.gw-hasring > .Grade_Button { grid-row: 4; grid-column: 1 / -1; justify-self: start; align-self: center; }
.gw-qr .grid_result .col.gw-hasring > .row { grid-row: 4; grid-column: 1 / -1; justify-self: end; align-self: center; }
.gw-qr .grid_result .col.gw-hasring > .row [id$="SocialButtons"] { margin-top: 28px !important; }
.gw-qr .gw-hr { position: relative; width: 208px; height: 208px; color: var(--ink); }
.gw-qr .gw-hr svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 18px rgba(22, 102, 224, .28)); }
.gw-qr .gw-arc { transition: stroke-dasharray 1.4s cubic-bezier(.2, .8, .2, 1); }
.gw-qr .gw-knob { transform-origin: 100px 100px; transition: transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.gw-qr .gw-hr .num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gw-qr .gw-hr b { font-size: 58px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.gw-qr .gw-hr b small { margin-left: 2px; font-size: 26px; font-weight: 700; letter-spacing: 0; }
.gw-qr .gw-hr .cap { margin-top: 6px; color: var(--sub); font-size: 13px; font-weight: 500; }
/* without a ring (no score shown, or an Outcome quiz): a badge on top */
.gw-js .gw-qr .grid_result .col.gw-noring::before {
    content: "";
    display: block;
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    border-radius: 24px;
    background: var(--gwq-icon-spark) center / 32px no-repeat, var(--brand);
    background: var(--gwq-icon-spark) center / 32px no-repeat, linear-gradient(135deg, var(--brand), var(--brand2));
    box-shadow: 0 18px 34px -12px rgba(11, 18, 32, .5);
    transform: rotate(-6deg);
}
.gw-qr .gw-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 0; }
.gw-qr .gw-chips:empty { display: none; }
.gw-qr .gw-chip { padding: 5px 14px; background: rgba(128, 128, 128, .12); border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.gw-qr .gw-chip.up { color: #067647; background: rgba(18, 183, 106, .14); }
.gw-qr .gw-chip.down { color: #B54708; background: rgba(247, 144, 9, .16); }

/* the grade text is the quiz owner's free text: a short statement, a
   paragraph or a long article (the script sets data-len); cards only when
   it really has headings */
.gw-qr [id$="lblGradeDesc"] {
    display: block;
    max-width: 68ch;
    margin: 28px auto 0;
    color: var(--ink2);
    font-size: 18px;
    line-height: 1.75;
    text-align: left;
    text-wrap: pretty;
}
.gw-qr [id$="lblGradeDesc"][data-len="0"] { display: none; }
.gw-qr [id$="lblGradeDesc"][data-len="s"] {
    max-width: 34em;
    padding-left: 22px;
    color: var(--ink);
    font-size: clamp(20px, 2.4vw, 25px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -.012em;
    text-wrap: balance;
    background: linear-gradient(var(--brand), var(--brand2)) left center / 4px 100% no-repeat;
}
.gw-qr [id$="lblGradeDesc"][data-len="m"] { padding-left: 22px; background: linear-gradient(var(--brand), var(--brand2)) left center / 4px 100% no-repeat; }
.gw-qr [id$="lblGradeDesc"][data-len="l"] { font-size: 17px; line-height: 1.8; }
.gw-qr .grid_result .col.gw-noring [id$="lblGradeDesc"][data-len="s"] { margin-left: auto; margin-right: auto; padding-left: 0; background: none; text-align: center; }
.gw-qr [id$="lblGradeDesc"] p,
.gw-qr .grade_desc p { margin: 0 0 1em; }
.gw-qr [id$="lblGradeDesc"] > :last-child { margin-bottom: 0; }
.gw-qr [id$="lblGradeDesc"] :is(h1, h2, h3, h4, h5, h6) { margin: 1.4em 0 .4em; color: var(--ink); font-size: 1.12em; font-weight: 700; line-height: 1.3; }
.gw-qr [id$="lblGradeDesc"] ul,
.gw-qr [id$="lblGradeDesc"] ol,
.gw-qr .grade_desc ul,
.gw-qr .grade_desc ol { margin: 0 0 1em; padding-left: 1.4em; }
.gw-qr [id$="lblGradeDesc"] li { margin: .3em 0; }
.gw-qr [id$="lblGradeDesc"] a,
.gw-qr .grade_desc a:not(.Grade_Button) { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.gw-qr [id$="lblGradeDesc"] strong,
.gw-qr [id$="lblGradeDesc"] b { color: var(--ink); font-weight: 700; }
.gw-qr [id$="lblGradeDesc"] blockquote { margin: 1em 0; padding: .2em 0 .2em 1.1em; border-left: 4px solid var(--brand); color: var(--ink); }
.gw-qr [id$="lblGradeDesc"] img,
.gw-qr .grade_desc img { max-width: 100%; height: auto; border-radius: 14px; }
.gw-qr [id$="lblGradeDesc"] .gw-bh-p { margin: 1.3em 0 .3em; color: var(--ink); font-size: 1em; }
.gw-qr [id$="lblGradeDesc"].gw-hasblks { max-width: none; padding-left: 0; background: none; }
.gw-qr .gw-blks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 6px; counter-reset: gi; }
.gw-qr .gw-blk { counter-increment: gi; min-width: 0; padding: 22px; background: rgba(128, 128, 128, .08); border-radius: 22px; font-size: 15.5px; line-height: 1.7; }
.gw-qr .gw-blk::before { content: "0" counter(gi); display: block; margin-bottom: 8px; color: var(--brand); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.gw-qr .gw-blk > :first-child { margin-top: 0 !important; }
.gw-qr .gw-blk > :last-child { margin-bottom: 0; }
.gw-qr .gw-bh { display: block; margin: 0 0 8px; color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.35; }

/* buttons: the grade button, the offer button, and the sticky copy */
.gw-qr .Grade_Button,
.gw-qr .section_offer .butn2,
.gw-stk .Grade_Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    min-height: 56px;
    margin-top: 28px;
    padding: 12px 38px;
    border-radius: 16px;
    background-color: var(--brand);
    color: #fff;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 14px 30px -12px rgba(11, 18, 32, .55);
    transition: transform .15s, box-shadow .15s;
}
.gw-qr .Grade_Button:hover,
.gw-qr .section_offer .butn2:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -12px rgba(11, 18, 32, .6); text-decoration: none; }
.gw-qr .Grade_Button:focus-visible,
.gw-qr .section_offer .butn2:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.gw-qr [id$="SocialButtons"] { margin-top: 22px !important; text-align: center !important; }
.gw-qr [id$="SocialButtons"] > div { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.gw-qr .gw-sh { margin-right: 4px; color: var(--sub); font-size: 13px; font-weight: 500; }
.gw-qr [id$="SocialButtons"] a.btn { display: inline-grid !important; place-items: center; width: 38px; height: 38px; margin: 0; padding: 0 !important; border-radius: 50% !important; line-height: 1; transition: transform .15s; }
.gw-qr [id$="SocialButtons"] a.btn:hover { transform: translateY(-2px); }
.gw-qr [id$="SocialButtons"] a span,
.gw-qr [id$="SocialButtons"] a i { position: static !important; left: auto !important; margin: 0 !important; font-size: 17px; }
.gw-qr .gw-act {
    padding: 7px 16px;
    border: 1.5px solid rgba(128, 128, 128, .4);
    border-color: color-mix(in srgb, currentColor 20%, transparent);
    border-radius: 999px;
    background: none;
    color: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.gw-qr .gw-act:hover { border-color: var(--brand); color: var(--brand); }

/* Outcome quizzes: one card per outcome (the best match first) */
.gw-qr .grid_result .row > .col-lg-3 { display: none; }
.gw-qr .grid_result .row > .col-lg-6 { flex: 0 0 100%; width: 100%; max-width: 100%; padding: 0; }
.gw-qr .grade.panel {
    margin: 0 0 18px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: none;
    box-shadow: none !important;
    text-align: left;
    overflow: hidden;
}
.gw-qr .grade.panel:only-of-type { margin: 0; border: 0; border-radius: 0; }
.gw-qr .grade .grade_title {
    margin: 0 0 16px;
    padding: 12px 18px;
    border: 0;
    border-radius: 16px;
    background: none;
    color: var(--ink);
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-align: center;
}
.gw-qr .grade .grade_title .panel-title { margin: 0; color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
.gw-qr .grade:not(:only-of-type) { padding: 26px 28px; }
.gw-qr .grade:not(:only-of-type) .grade_title { font-size: 23px; text-align: left; }
.gw-qr .grade:not(:only-of-type):first-of-type { border: 2px solid var(--brand); }
.gw-qr .grade .grade_desc { padding: 0; border: 0; background: none; color: var(--ink2); font-size: 17px; line-height: 1.75; }
.gw-qr .grade .grade_desc > .col-lg-12 { padding: 0; }
.gw-qr .grade .grade_desc > .col-lg-12.text-center img { display: block; max-width: 100% !important; max-height: 360px; margin: 6px auto 18px; border-radius: 18px; object-fit: contain; }
.gw-qr .grade .grade_desc .mt20 { margin-top: 12px; }
.gw-qr .grade .progress {
    height: 14px;
    margin: 6px 0 0;
    overflow: hidden;
    background: var(--track);
    border-radius: 999px;
    box-shadow: none;
}
.gw-qr .grade .progress-bar {
    min-width: 4.5em;
    height: 100%;
    border-radius: 999px;
    background-color: var(--brand);
    background-image: linear-gradient(90deg, var(--brand), var(--brand2));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 14px;
    text-align: right;
    padding: 0 8px;
    box-shadow: none;
}
.gw-qr .grade .gw-match { display: flex; justify-content: space-between; margin: 18px 0 0; color: var(--ink); font-size: 15px; font-weight: 700; }
.gw-qr .grade .gw-match + .progress .progress-bar { min-width: 0; font-size: 0; }
.gw-qr .grade .Grade_Button { margin-top: 18px; }

/* 2. categories: bars with an average mark, then one card per category,
   banded by score */
.gw-qr .section_type .grid_type.gw-chart { text-align: center; color: var(--ink); font-size: 20px; font-weight: 700; }
.gw-qr .gw-top { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 6px; }
.gw-qr .gw-bars { display: grid; gap: 18px; max-width: 760px; margin: 24px auto 0; text-align: left; }
.gw-qr .gw-bar b { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--ink); font-size: 15px; font-weight: 600; line-height: 1.3; }
.gw-qr .gw-bar b em { flex: none; color: var(--sub); font-style: normal; white-space: nowrap; }
.gw-qr .gw-bar i { position: relative; display: block; height: 12px; background: var(--track); border-radius: 999px; }
.gw-qr .gw-bar i::before { content: ""; display: block; width: 0; height: 100%; background: var(--brand); background: linear-gradient(90deg, var(--brand), var(--brand2)); border-radius: inherit; transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.gw-qr .gw-bar i::after { content: ""; position: absolute; top: -4px; left: calc(var(--a) * 1%); width: 3px; height: 20px; margin-left: -1.5px; background: var(--ink); border-radius: 2px; opacity: .55; }
.gw-qr .gw-bar i.gw-noavg::after { display: none; }
.gw-qr .gw-on .gw-bar i::before { width: calc(var(--w) * 1%); }
.gw-qr .gw-leg { display: flex; justify-content: center; gap: 18px; margin-top: 14px; color: var(--sub); font-size: 13px; font-weight: 500; }
.gw-qr .gw-leg u { display: inline-block; width: 18px; height: 6px; margin-right: 6px; border-radius: 3px; background: var(--brand); text-decoration: none; vertical-align: middle; }
.gw-qr .gw-leg s { display: inline-block; width: 3px; height: 14px; margin-right: 6px; background: var(--ink); opacity: .55; text-decoration: none; vertical-align: middle; }
.gw-qr .gw-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 22px 0 0; }
.gw-qr .gw-jump a { padding: 6px 14px; border: 1.5px solid rgba(128, 128, 128, .36); border-color: color-mix(in srgb, currentColor 18%, transparent); border-radius: 999px; color: inherit; font-size: 14px; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s; }
.gw-qr .gw-jump a:hover { border-color: var(--brand); color: var(--brand); }
.gw-qr .section_type .grid_type.gw-cat {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    grid-template-areas: "y t a" "y g g";
    column-gap: 28px;
    row-gap: 14px;
    align-items: start;
    --gw-c: var(--brand);
}
.gw-qr .section_type .grid_type.gw-cat > hr { display: none; }
.gw-qr .section_type .grid_type.gw-cat > [class*="col-"] { width: auto !important; max-width: none !important; flex: none; min-width: 0; padding: 0 !important; margin: 0 !important; }
.gw-qr .grid_type.gw-cat > .gw-a-you { grid-area: y; text-align: center; }
.gw-qr .grid_type.gw-cat > .gw-a-title { grid-area: t; }
.gw-qr .grid_type.gw-cat > .gw-a-avg { grid-area: a; text-align: center; }
.gw-qr .grid_type.gw-cat > .gw-a-grade { grid-area: g; }
.gw-qr .grid_type[data-band="great"] { --gw-c: #12B76A; }
.gw-qr .grid_type[data-band="good"] { --gw-c: var(--brand); }
.gw-qr .grid_type[data-band="fair"] { --gw-c: #F79009; }
.gw-qr .grid_type[data-band="low"] { --gw-c: #F04438; }
.gw-qr .type_title { margin: 0 0 6px; color: var(--ink); font-size: 23px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.gw-qr .type_desc { margin: 0; color: var(--sub); font-size: 15.5px; line-height: 1.6; }
.gw-qr .type_grade_title { margin: 0 0 6px; color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.4; }
.gw-qr .type_grade_title::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 10px; background: var(--gw-c, var(--brand)); border-radius: 50%; vertical-align: middle; }
/* the grade text of each category is the quiz owner's free text */
.gw-qr .grid_type [class*="col-"] > p { margin: 0 0 10px; color: var(--ink2); line-height: 1.65; }
.gw-qr .grid_type [class*="col-"] > p.gw-empty { display: none; }
.gw-qr .grid_type [class*="col-"] > p.gw-bh-p { margin: 16px 0 4px; color: var(--ink); font-size: 14.5px; }
.gw-qr .grid_type [class*="col-"] ul,
.gw-qr .grid_type [class*="col-"] ol { margin: 0 0 10px; padding-left: 22px; color: var(--ink2); line-height: 1.65; }
.gw-qr .grid_type [class*="col-"] img { max-width: 100%; height: auto; border-radius: 12px; }
.gw-qr .grid_type .text-center { color: var(--sub); font-size: 13px; font-weight: 500; line-height: 1.3; }
.gw-qr .gw-ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 104px !important;
    height: 104px !important;
    margin: 0 auto 8px !important;
    color: inherit;
    transition: --gw-p 1.2s cubic-bezier(.2, .8, .2, 1);
}
.gw-qr .gw-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--gw-c, var(--brand)) calc(var(--gw-p) * 1%), var(--track) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 13px), #000 calc(100% - 12px));
}
.gw-qr .gw-ring::after { content: attr(data-text); position: relative; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.gw-qr .gw-ring > * { display: none !important; }
.gw-qr .progress-circular-green.gw-ring { width: 60px !important; height: 60px !important; --gw-c: #98A2B3; }
.gw-qr .progress-circular-green.gw-ring::before {
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
}
.gw-qr .progress-circular-green.gw-ring::after { font-size: 13px; font-weight: 700; }
@property --gw-p { syntax: "<number>"; inherits: true; initial-value: 0; }

/* 3. feedback: tabs with counts (text colours come from the theme) */
.gw-qr .gw-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 960px;
    margin: 0 auto 6px;
    padding: 5px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 18px 40px -22px var(--shadow);
}
.gw-qr .gw-tabs button { flex: 1; min-width: 150px; padding: 12px 14px; border: 0; border-radius: 13px; background: none; color: #344054; font-family: inherit; font-size: 15px; font-weight: 650; line-height: 1.3; cursor: pointer; transition: background .15s, color .15s; }
.gw-qr .gw-tabs button[aria-selected="true"] { background: #0B1220; color: #fff; }
.gw-qr .gw-tabs button:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.gw-qr .gw-tabs em { margin-left: 6px; padding: 1px 8px; border-radius: 99px; background: rgba(128, 128, 128, .2); font-size: 12px; font-style: normal; }
.gw-qr .section_feedback .grid_feedback.gw-off { display: none !important; }
.gw-qr .grid_feedback::before { content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 5px; border-radius: 0 5px 5px 0; background: var(--brand); background: linear-gradient(180deg, var(--brand), var(--brand2)); }
.gw-qr .grid_feedback .feedback_title { margin: 0 0 6px; font-size: 24px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.gw-qr .grid_feedback p.feedback_title + p.feedback_title { margin-bottom: 4px; opacity: .88; }
.gw-qr .grid_feedback span.feedback_desc { display: inline-block; margin: 26px 0 10px; padding: 4px 14px; background: rgba(128, 128, 128, .16); border-radius: 999px; line-height: 1.5; }
.gw-qr .grid_feedback p.feedback_desc { margin: 0 0 12px; line-height: 1.75; opacity: .95; }
.gw-qr .grid_feedback br { display: none; }

/* 4. offer */
.gw-qr .section_offer { padding: 40px 16px 64px; }
.gw-qr .section_offer .col-lg-12 {
    max-width: 760px;
    margin: 0 auto !important;
    padding: 44px 40px;
    border: 1px solid var(--line);
    border-radius: 28px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 28px 64px -28px var(--shadow);
}
.gw-qr [id$="lblOfferTitle"] { display: block; margin-bottom: 10px; font-size: 30px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.gw-qr [id$="lblOfferDesc"] { display: block; color: var(--sub); font-size: 17px; line-height: 1.65; }
.gw-qr .section_offer br { display: none; }

/* 5. "Your Answers" (Pass/Fail without reveal): your answer, the right one */
.gw-qr .grid_answers h3 { margin: 0 0 16px; font-size: 26px; font-weight: 800; }
.gw-qr .grid_answers .panel { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 18px; background: none; box-shadow: none; overflow: hidden; }
.gw-qr .grid_answers .panel-heading { padding: 16px 20px 0; border: 0; background: none; box-shadow: none !important; }
.gw-qr .grid_answers .panel-title { margin: 0; color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.4; }
.gw-qr .grid_answers .panel-body { padding: 12px 20px 16px !important; border: 0; background: none; }
.gw-qr .grid_answers .panel-body > .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; margin: 0 !important; }
.gw-qr .grid_answers .panel-body > .row > div { width: auto; max-width: none; margin: 0 !important; padding: 0; }
.gw-qr .gw-ans-a { grid-column: 1; padding: 10px 14px !important; border: 1.5px solid rgba(128, 128, 128, .3); border-color: color-mix(in srgb, currentColor 14%, transparent); border-radius: 12px; }
.gw-qr .gw-ans { grid-column: 2; align-self: center; padding: 4px 12px !important; border-radius: 999px; background: rgba(128, 128, 128, .12); font-size: 13px; font-weight: 600; white-space: nowrap; }
.gw-qr .gw-ans-a.gw-ok { background: rgba(6, 118, 71, .1); border-color: var(--ok); }
.gw-qr .gw-ans-a.gw-bad { background: rgba(180, 35, 24, .09); border-color: var(--bad); }
.gw-qr .gw-ans.gw-ok { color: var(--ok); background: rgba(6, 118, 71, .15); }
.gw-qr .gw-ans.gw-bad { color: var(--bad); background: rgba(180, 35, 24, .14); }

/* the action bar that slides in once the grade button scrolls away */
.gw-stk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(16, 24, 40, .09);
    box-shadow: 0 -14px 34px -22px rgba(11, 18, 32, .5);
    transform: translateY(115%);
    visibility: hidden;
    transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s;
}
.gw-stk.on { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.gw-stk span { min-width: 0; overflow: hidden; color: #0B1220; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.gw-stk .Grade_Button { flex: none; margin: 0; min-height: 48px; }

@media (max-width: 820px) {
    .gw-qr .grid_result .col.gw-hasring { grid-template-columns: minmax(0, 1fr); text-align: center !important; justify-items: center; }
    .gw-qr .grid_result .col.gw-hasring > .gw-hr,
    .gw-qr .grid_result .col.gw-hasring > [id$="lblGradeTitle"],
    .gw-qr .grid_result .col.gw-hasring > .gw-chips { grid-column: 1; grid-row: auto; }
    .gw-qr .gw-chips { justify-content: center; }
    .gw-qr .grid_result .col.gw-hasring > [id$="lblGradeDesc"],
    .gw-qr .grid_result .col.gw-hasring > .Grade_Button,
    .gw-qr .grid_result .col.gw-hasring > .row { grid-column: 1; grid-row: auto; justify-self: center; }
    .gw-qr .grid_result .col.gw-hasring > [id$="lblGradeDesc"] { justify-self: stretch; }
}
@media (max-width: 640px) {
    .gw-qr .section_result,
    .gw-qr .section_type,
    .gw-qr .section_feedback,
    .gw-qr .section_offer,
    .gw-qr .section_answers { padding: 12px; }
    .gw-qr .grid_result,
    .gw-qr .grid_type,
    .gw-qr .grid_feedback,
    .gw-qr .grid_answers { margin: 12px auto !important; padding: 28px 20px !important; border-radius: 22px !important; }
    .gw-qr [id$="lblGradeTitle"] { font-size: 28px; }
    .gw-qr .gw-hr { width: 176px; height: 176px; }
    .gw-qr .gw-hr b { font-size: 48px; }
    .gw-qr .type_title { font-size: 20px; }
    .gw-qr .grid_feedback .feedback_title { font-size: 21px; }
    .gw-qr .section_type .grid_type.gw-cat { grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "y t" "y a" "g g"; column-gap: 16px; }
    .gw-qr .gw-ring { width: 84px !important; height: 84px !important; }
    .gw-qr .gw-ring::after { font-size: 18px; }
    .gw-qr .progress-circular-green.gw-ring { width: 52px !important; height: 52px !important; }
    .gw-qr .section_offer .col-lg-12 { padding: 32px 22px; }
    .gw-qr .grade:not(:only-of-type) { padding: 20px 18px; }
    .gw-qr .grid_answers .panel-body > .row { grid-template-columns: minmax(0, 1fr); }
    .gw-qr .gw-ans { grid-column: 1; justify-self: start; }
    .gw-stk span { display: none; }
    .gw-stk .Grade_Button { width: 100%; }
}

/* reduced motion, forced colours, print */
@media (prefers-reduced-motion: reduce) {
    .gw-qs, .gw-qs::before, .gw-qs > *,
    .gw-qz *, .gw-qz .question_grid, .gw-shake,
    .gw-qf .question_grid, .gw-qf *,
    .gw-qr .gw-reveal, .gw-qr .gw-ring, .gw-qr .gw-arc, .gw-qr .gw-knob, .gw-qr .gw-bar i::before,
    .gw-qr .Grade_Button, .gw-qr .section_offer .butn2, .gw-stk { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
    .gw-qs > .butn2, .gw-qr .Grade_Button { border: 2px solid ButtonText; }
    .gw-qz .answer input[type="radio"]:checked + label { border: 3px solid Highlight; }
    .gw-qf .legal_text input[type="checkbox"]:checked { border-color: Highlight; }
}
@media print {
    body { background: #fff !important; }
    .gw-stk, .gw-qr .gw-tabs, .gw-qr .gw-jump, .gw-qr [id$="SocialButtons"], #loading { display: none !important; }
    .gw-qr .section_feedback .grid_feedback.gw-off { display: block !important; }
    .gw-qr .gw-reveal { opacity: 1 !important; transform: none !important; }
    .gw-qr .grid_result, .gw-qr .grid_type, .gw-qr .grid_feedback, .gw-qr .grade { box-shadow: none !important; break-inside: avoid; }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}