/* VUX Consulting — GenAI Testing Maturity Assessment
   Ported from the approved design prototype. Palette, type and zero-radius geometry follow
   the VUX brand system; the near-black surface (#0A0A0A) is the prototype's own value. */

:root {
    --ink: #0A0A0A;
    --panel: #121212;
    --panel-hover: #161616;
    --result-panel: #292929;
    --cta-panel: #070703;
    --paper: #FFFFFF;
    --vux-yellow: #FFF200;
    --body-text: #D9D9D9;
    --ink-30: #A6A6A6;
    --alert: #FF7080;
    --alert-strong: #D93F52;
    --ok: #5FC9B8;
    --ok-strong: #3F8E82;
    --hairline: rgba(255, 255, 255, .12);
    --hairline-strong: rgba(255, 255, 255, .16);
    --hairline-loud: rgba(255, 255, 255, .18);
    --font-display: 'Passion One', sans-serif;
    --font-body: 'Instrument Sans', Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    /* clip rather than hidden: hidden on an ancestor breaks position:sticky, which the
       progress bar relies on. */
    overflow-x: clip;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--vux-yellow);
}

a:hover {
    color: var(--paper);
}

:focus-visible {
    outline: 2px solid var(--vux-yellow);
    outline-offset: 2px;
}

input[type=checkbox] {
    accent-color: var(--vux-yellow);
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin: 2px 0 0;
}

/* --- header --- */
/* Ported from the followup.html reference: a yellow sticky bar with a dark CTA. */

.site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    backdrop-filter: blur(18px);
    background: rgba(255, 242, 0, .92);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.header-inner {
    max-width: 1200px;
    margin: 0 auto;
    height: 72px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.site-branding a {
    text-decoration: none;
    display: block;
}

.site-branding img {
    height: 36px;
    width: auto;
}

.logo-fallback {
    display: none;
    font-weight: 700;
    color: #282828;
    letter-spacing: .08em;
}

/* --- buttons --- */

.btn {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    padding: 11px 18px;
    border-radius: 5px;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 200ms ease-out, color 200ms ease-out;
}

.btn--primary {
    background: var(--vux-yellow);
    color: var(--ink);
}

.btn--primary:hover {
    background: #FFE000;
    color: var(--ink);
}

.btn--primary:active {
    opacity: .85;
}

.btn--primary:disabled {
    background: #242424;
    color: #6B6B6B;
    cursor: not-allowed;
}

.btn--outline {
    background: transparent;
    color: var(--paper);
    border: 1.5px solid rgba(255, 255, 255, .4);
}

.btn--outline:hover {
    color: var(--paper);
    background: rgba(255, 255, 255, .06);
}

.btn--toggle {
    background: transparent;
    color: var(--paper);
    border: 1.5px solid rgba(255, 255, 255, .45);
}

.btn--toggle.is-on {
    background: var(--vux-yellow);
    color: var(--ink);
    border-color: var(--vux-yellow);
}

.btn--small {
    font-size: 13px;
    padding: 8px 14px;
}

.btn--link {
    background: none;
    border: 0;
    padding: 0;
    font-family: var(--font-body);
    cursor: pointer;
}

/* --- hero --- */

.hero__inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 40px 24px 30px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pill {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vux-yellow);
    border: 1px solid rgba(255, 242, 0, .45);
    border-radius: 100px;
    padding: 6px 14px;
}

.hero h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 48px;
    line-height: 1;
    max-width: 22ch;
    text-wrap: balance;
}

.hero__lede {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    max-width: 62ch;
    color: var(--body-text);
}

.hero__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.hero__meta {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-30);
}

/* --- sticky progress --- */

.progress {
    position: sticky;
    /* Clears the sticky site header, whose .header-inner is a fixed 72px tall. */
    top: 72px;
    z-index: 20;
    /* Transparent, so the backdrop runs under the bar rather than being cut by it. The
       cells carry their own fill instead. */
    background: transparent;
    transition: background-color .15s ease-out;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.progress-stuck .progress {
    background: var(--ink);
}

.progress__inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 11px 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.progress__meter {
    display: flex;
    gap: 3px;
    flex: 1 1 220px;
    min-width: 170px;
}

.progress__cell {
    flex: 1;
    height: 14px;
    border: 1px solid var(--hairline-strong);
    background: var(--ink);
    /* Each cell fills on its own answer rather than on the next button, so the bar moves
       at the moment the choice is made, which is the moment the progress is felt. */
    transition: background-color .25s ease-out, border-color .25s ease-out;
}

.progress__cell.is-answered {
    background: var(--vux-yellow);
    border-color: var(--vux-yellow);
}

/* Parked with "I am not sure". Counted as progress, marked as unfinished. */
.progress__cell.is-parked {
    border-color: var(--vux-yellow);
    background: repeating-linear-gradient(45deg, var(--vux-yellow) 0 3px, transparent 3px 6px);
}

/* Where they are now. A brighter edge rather than a fill, so it cannot be mistaken for done. */
.progress__cell.is-current {
    border-color: var(--paper);
}

.progress__label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    white-space: nowrap;
}

/* The accent carries the number as a fill with ink on it, never as coloured text. */
.progress__percent {
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1;
    background: var(--vux-yellow);
    color: var(--ink);
    padding: 4px 10px;
}

.progress__remaining {
    font-size: 13px;
    font-weight: 700;
}

/* --- main column --- */

.column {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px 96px;
    display: flex;
    flex-direction: column;
}

/* Moving between questions. The outgoing card leaves to the left and the incoming one
   arrives from the right, reversed when going back, so the direction of travel is obvious.
   Note this is a deliberate departure from the brand system, which calls for instant page
   transitions and limits motion to opacity and small scale shifts. */
.step-section.is-leaving-forward {
    animation: step-out-left 220ms ease-in forwards;
}

.step-section.is-leaving-back {
    animation: step-out-right 220ms ease-in forwards;
}

.step-section.is-entering-forward {
    animation: step-in-right 320ms ease-out;
}

.step-section.is-entering-back {
    animation: step-in-left 320ms ease-out;
}

/* Distances are a share of the card's own width rather than a fixed pixel count, so the
   card travels the same proportion of itself on a phone as on a desktop. The fade is held
   back past the midpoint, otherwise the card is invisible for most of the journey and the
   extra travel is wasted. */
@keyframes step-out-left {
    0% { opacity: 1; transform: translateX(0); }
    55% { opacity: .45; }
    100% { opacity: 0; transform: translateX(-70%); }
}

@keyframes step-out-right {
    0% { opacity: 1; transform: translateX(0); }
    55% { opacity: .45; }
    100% { opacity: 0; transform: translateX(70%); }
}

@keyframes step-in-right {
    0% { opacity: 0; transform: translateX(70%); }
    45% { opacity: .5; }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes step-in-left {
    0% { opacity: 0; transform: translateX(-70%); }
    45% { opacity: .5; }
    100% { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .step-section,
    .progress__cell {
        animation: none;
        transition: none;
    }
}

.step-section {
    margin-top: 34px;
    /* Fallback for a plain jump to #step: 72px of sticky header plus the progress bar.
       scrollToStep() in session.js measures both instead, which also covers the narrow
       screens where the progress bar wraps onto two or three rows. */
    scroll-margin-top: 140px;
}

@media (max-width: 720px) {
    .step-section {
        scroll-margin-top: 190px;
    }
}

/* --- question card --- */

.card {
    border: 1px solid var(--hairline-strong);
    border-top: 5px solid var(--vux-yellow);
    background: var(--panel);
    padding: 30px 32px 34px;
}

.card--gate {
    border-top-color: var(--paper);
}

.card__head {
    display: flex;
    gap: 14px;
    align-items: baseline;
    flex-wrap: wrap;
}

.tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    background: var(--vux-yellow);
    color: var(--ink);
    padding: 4px 9px;
}

.card__ref {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    line-height: 1;
    color: var(--ink-30);
}

.card__disclose {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--paper);
    white-space: nowrap;
}

.card__disclose span:last-child {
    border-bottom: 1px dotted rgba(255, 255, 255, .45);
}

.card__disclose-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--paper);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.card__disclose:hover {
    color: var(--vux-yellow);
}

.card__disclose:hover .card__disclose-icon {
    border-color: var(--vux-yellow);
}

.card__disclose:hover span:last-child {
    border-bottom-color: var(--vux-yellow);
}

.card__question {
    margin: 14px 0 0;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 600;
    max-width: 34ch;
    text-wrap: pretty;
}

.card__note {
    margin: 10px 0 0;
    font-size: 15px;
    color: var(--ink-30);
    max-width: 60ch;
}

.disclosure {
    margin: 22px 0 0;
    background: #151505;
    border: 1px solid var(--hairline);
    border-left: 4px solid var(--vux-yellow);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.disclosure__label {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--vux-yellow);
}

.disclosure__label--fail {
    color: var(--alert);
}

.disclosure p:last-child {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    max-width: 66ch;
    text-wrap: pretty;
}

.disclosure__block + .disclosure__block {
    border-top: 1px solid var(--hairline);
    padding-top: 15px;
}

/* --- option rows --- */

.options {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hairline-strong);
    margin-top: 24px;
}

.option {
    display: block;
    width: 100%;
    text-align: left;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.4;
    padding: 12px 16px;
    border: 0;
    cursor: pointer;
    background: var(--panel);
    color: var(--paper);
    transition: background-color 200ms ease-out;
}

.option + .option {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.option:hover {
    background: var(--panel-hover);
}

.option.is-selected {
    background: var(--vux-yellow);
    color: var(--ink);
    font-weight: 700;
}

.option-row {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

.chip {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    padding: 7px 12px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: transparent;
    color: var(--ink-30);
    cursor: pointer;
}

.chip.is-on {
    font-weight: 700;
    border-color: var(--vux-yellow);
    background: var(--vux-yellow);
    color: var(--ink);
}

.hint {
    font-size: 13px;
    color: var(--ink-30);
}

/* --- gate --- */

.checklist {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hairline-strong);
}

.checklist label {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    align-items: flex-start;
    font-size: 15px;
    line-height: 1.4;
}

.checklist label + label {
    border-top: 1px solid rgba(255, 255, 255, .1);
}

/* The opt-out is part of the same group, but set apart so it does not read as a fifth
   thing you might tick alongside the others. */
.checklist__opt-out {
    border-top: 1px solid rgba(255, 255, 255, .28) !important;
    color: var(--ink-30);
}

.checklist label:hover {
    background: var(--panel-hover);
}

.gate__section {
    margin-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 20px;
}

.gate__lead {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
}

.gate__sublabel {
    margin: 18px 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-30);
}

.gate__verdict {
    margin: 14px 0 0;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    /* A warning rather than an error: the gate is not scored, so yellow, not red. */
    border: 1.5px solid var(--vux-yellow);
    color: var(--vux-yellow);
}

.gate__verdict.is-pass {
    border-color: var(--ok-strong);
    color: var(--ok-strong);
}

/* --- navigation --- */

.nav-row {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
}

/* --- result --- */

.result {
    margin-top: 34px;
    background: var(--result-panel);
    border-top: 6px solid var(--vux-yellow);
    padding: 32px 30px 34px;
}

.result h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 34px;
    line-height: 1;
    margin: 0 0 20px;
}

.result__headline {
    display: flex;
    gap: 26px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.result__score {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 82px;
    line-height: .8;
    color: var(--vux-yellow);
    font-variant-numeric: tabular-nums;
}

.result__score span {
    font-size: 24px;
    color: var(--ink-30);
    vertical-align: top;
}

.result__band {
    flex: 1 1 300px;
}

.result__band-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    margin: 0 0 8px;
}

.result__band-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    max-width: 54ch;
}

.result__max-note {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--ink-30);
}

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, .5);
    border: 1px solid rgba(255, 255, 255, .5);
}

.tile {
    background: var(--panel);
    padding: 14px 16px;
}

.tile__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-30);
    margin: 0 0 4px;
}

.tile__value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 28px;
    line-height: 1;
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.tile__sub {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--ink-30);
}

.flags {
    list-style: none;
    padding: 0;
    margin: 26px 0 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--hairline-loud);
}

.flag {
    padding: 14px 0 14px 18px;
    border-bottom: 1px solid var(--hairline-loud);
    border-left: 4px solid rgba(255, 112, 128, .45);
}

.flag.is-first {
    border-left-color: var(--alert);
}

.flag.is-positive {
    border-left-color: var(--ok);
}

.flag__rank {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-30);
}

.flag__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
}

.flags__toggle {
    margin-top: 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--vux-yellow);
    border-bottom: 1.5px solid var(--vux-yellow);
}

/* --- conversion --- */

.conversion {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--hairline-loud);
}

.field {
    flex: 1 1 300px;
    display: block;
}

.field__label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-30);
    margin-bottom: 6px;
}

.field input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 17px;
    /* Horizontal padding so the first character is not flush against the edge. */
    padding: 13px 12px;
    border: 0;
    border-bottom: 2px solid var(--vux-yellow);
    background: transparent;
    color: var(--paper);
    border-radius: 0;
}

.field input::placeholder {
    color: #6B6B6B;
}

.field__error {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--alert);
}

.offers {
    margin-top: 22px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1px;
    background: rgba(255, 255, 255, .35);
    border: 1px solid rgba(255, 255, 255, .35);
}

.offer {
    background: var(--panel);
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.offer--cta {
    background: var(--cta-panel);
}

.offer__title {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.05;
}

.offer--cta .offer__title {
    color: var(--vux-yellow);
}

.offer__body {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--body-text);
    flex: 1;
}

.offer .btn {
    align-self: flex-start;
}

.offer__confirm {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ok);
}

.offer__error {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--alert);
}

.placeholder-panel {
    margin-top: 56px;
    border: 1px dashed rgba(255, 255, 255, .3);
    padding: 26px 28px;
}

.placeholder-panel p {
    margin: 0;
    font-size: 15px;
    color: var(--ink-30);
    max-width: 60ch;
}

/* --- footer --- */
/* Ported from the followup.html reference. */

footer {
    background: #090909;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 42px 28px 18px;
}

.footer-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.footer-brand {
    max-width: 320px;
}

.footer-brand a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 10px;
}

.footer-brand .v {
    font-size: 18px;
    font-weight: 700;
    color: var(--vux-yellow);
}

.footer-brand .dot {
    color: var(--vux-yellow);
    font-size: 22px;
    line-height: 1;
}

.footer-brand .c {
    font-size: 14px;
    letter-spacing: .08em;
    color: #fff;
}

.footer-brand p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .45);
    line-height: 1.7;
}

.footer-cols {
    display: flex;
    gap: 44px;
    flex-wrap: wrap;
}

.footer-cols h4 {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .34);
    margin: 0 0 12px;
    font-weight: 700;
}

.footer-cols ul {
    list-style: none;
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.footer-cols a {
    font-size: 13px;
    color: rgba(255, 255, 255, .54);
    text-decoration: none;
}

.footer-cols a:hover {
    color: #fff;
}

.footer-bottom {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.footer-bottom p,
.footer-bottom a,
.footer-bottom button {
    margin: 0;
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(255, 255, 255, .28);
    text-decoration: none;
}

.footer-bottom button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.footer-bottom a:hover,
.footer-bottom button:hover {
    color: rgba(255, 255, 255, .55);
}

.footer-legal-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

/* --- re-take --- */

.retake-row {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}

/* --- cookie banner --- */
/* Values ported from the followup.html reference. */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #1a1a1a;
    border-top: 1px solid rgba(255, 242, 0, .25);
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(255, 255, 255, .82);
}

.cookie-banner[hidden] {
    display: none;
}

.cookie-banner__copy {
    max-width: 680px;
}

.cookie-banner__copy p {
    margin: 0;
    line-height: 1.5;
}

.cookie-banner__copy strong {
    color: #fff;
}

.cookie-banner__link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--vux-yellow);
    text-decoration: underline;
    cursor: pointer;
}

.cookie-banner__detail {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    font-size: 13px;
    line-height: 1.6;
}

.cookie-banner__detail ul {
    margin: 8px 0;
    padding-left: 20px;
    display: grid;
    gap: 6px;
}

.cookie-banner__detail p {
    line-height: 1.6;
}

.cookie-banner__actions {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.cookie-banner__btn {
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
}

.cookie-banner__btn--ghost {
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, .2);
    background: transparent;
    color: rgba(255, 255, 255, .7);
}

.cookie-banner__btn--ghost:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, .38);
}

.cookie-banner__btn--accept {
    padding: 10px 22px;
    border: none;
    background: var(--vux-yellow);
    color: #101010;
    font-weight: 600;
}

.cookie-banner__btn--accept:hover {
    background: #FFE000;
}

@media (max-width: 700px) {
    .cookie-banner {
        padding: 16px 20px;
    }

    .cookie-banner__actions {
        width: 100%;
    }

    .cookie-banner__btn {
        flex: 1;
    }
}

/* --- error banner --- */

#blazor-error-ui {
    color-scheme: light only;
    background: var(--vux-yellow);
    color: var(--ink);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.9rem 1.5rem 0.9rem 1.5rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: 14px;
    font-weight: 600;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1.5rem;
    top: 0.75rem;
}

/* --- narrow screens --- */

@media (max-width: 700px) {
    .header-inner {
        padding: 0 20px;
    }

    .footer-inner {
        padding: 36px 20px 18px;
    }
}

@media (max-width: 720px) {
    .hero h1 {
        font-size: 34px;
    }

    .hero__inner {
        padding: 26px 20px 22px;
    }

    .card {
        padding: 24px 20px 26px;
    }

    .card__question {
        font-size: 24px;
    }

    .result {
        padding: 26px 20px 28px;
    }

    .result__score {
        font-size: 64px;
    }

    .actions {
        padding: 24px 20px 26px;
    }

    .card__disclose {
        margin-left: 0;
    }
}

/* --- admin --- */

.admin {
    max-width: 1180px;
    margin: 0 auto;
    padding: 40px 24px 96px;
}

.admin__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--hairline-loud);
}

.admin__eyebrow {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--vux-yellow);
}

.admin h1 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 44px;
    line-height: 1;
}

.admin__tiles {
    margin-top: 28px;
}

.admin__latest {
    font-size: 22px;
}

.admin__note {
    margin: 28px 0 12px;
    font-size: 13px;
    color: var(--ink-30);
}

.admin__scroll {
    overflow-x: auto;
    border: 1px solid var(--hairline-strong);
}

.admin__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--panel);
}

.admin__table th,
.admin__table td {
    text-align: left;
    padding: 10px 14px;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.admin__table th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-30);
    background: #171717;
}

.admin__table tbody tr:hover {
    background: var(--panel-hover);
}

.admin__table .is-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- one-page layout --- */
/* The same cards stacked rather than stepped through. Spacing does the separating: the
   cards already carry their own border and yellow top edge, so anything more would fence
   each question off from the next. */

.sheet {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 34px;
}

.sheet__item {
    scroll-margin-top: 150px;
}

/* Marked only after a submit that could not go through. Yellow rather than red, and the
   label rather than the colour is what carries the meaning. */
.sheet__item.is-missing .card {
    border-color: var(--vux-yellow);
}

/* The accent is the rule, not the text: an accent is a fill or a rule and never a text
   colour, and the words are what carry the meaning anyway. */
.sheet__missing {
    margin: 10px 0 0;
    padding-left: 12px;
    border-left: 3px solid var(--vux-yellow);
    font-size: 13px;
    font-weight: 700;
}

.sheet__submit {
    margin-top: 6px;
}

.admin__heading {
    margin: 48px 0 8px;
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1;
}