/* Certificate verification page.
   One centred column on the light gradient canvas: the code goes in on the
   first card, the answer lands on the second, then three quiet facts about
   how the check works. Plus Jakarta Sans for headings, the code and the
   buttons, Inter for everything else. */

/* Tokens */

.vf {
    --vf-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --vf-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --vf-ink: #0b1220;
    --vf-ink-2: #253247;
    --vf-ink-3: #3f4d66;

    --vf-line: rgba(30, 58, 138, 0.1);
    --vf-line-strong: #cbd6e8;

    --vf-blue: #2563eb;
    --vf-blue-deep: #1d4ed8;
    --vf-blue-ink: #1e3a8a;
    --vf-navy: #1e3a5f;
    --vf-blue-soft: #e8f0ff;
    --vf-blue-tint: #f4f7ff;

    --vf-green: #059669;
    --vf-green-deep: #047857;
    --vf-green-ink: #065f46;
    --vf-green-soft: #ecfdf5;

    --vf-gold: #b45309;
    --vf-gold-ink: #92400e;
    --vf-gold-soft: #fff7e8;

    --vf-red: #dc2626;
    --vf-red-ink: #991b1b;
    --vf-red-soft: #fef2f2;

    --vf-radius-card: 26px;
    --vf-radius-lg: 18px;
    --vf-radius-md: 14px;

    --vf-glass: rgba(255, 255, 255, 0.78);
    --vf-shadow-card:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 28px 60px -34px rgba(30, 58, 138, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --vf-ring: 0 0 0 4px rgba(37, 99, 235, 0.16);
    --vf-ease: cubic-bezier(0.22, 1, 0.36, 1);

    /* Everything below grows with this factor on wide screens, so a large
       monitor gets a wider column and larger type instead of a small island
       of text: two gentle steps, then the page stops growing and the extra
       width becomes margin. */
    --vf-scale: 1;
}

@media (min-width: 1600px) {
    .vf { --vf-scale: 1.08; }
}

@media (min-width: 1800px) {
    .vf { --vf-scale: 1.16; }
}

/* Canvas: the same light gradient as the account pages, painted edge to
   edge under the site header */
.vf {
    position: relative;
    isolation: isolate;
    width: 100%;
    margin: 0;
    padding: calc(56px * var(--vf-scale)) 16px calc(88px * var(--vf-scale));
    font-family: var(--vf-font-body);
    color: var(--vf-ink);
    font-size: calc(17px * var(--vf-scale));
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    background:
        radial-gradient(640px 360px at 50% 0%, rgba(147, 197, 253, 0.5), rgba(147, 197, 253, 0) 100%),
        radial-gradient(900px 560px at 10% 2%, rgba(96, 165, 250, 0.3), rgba(96, 165, 250, 0) 100%),
        radial-gradient(760px 520px at 92% 8%, rgba(167, 139, 250, 0.24), rgba(167, 139, 250, 0) 100%),
        radial-gradient(700px 480px at 50% 100%, rgba(45, 212, 191, 0.18), rgba(45, 212, 191, 0) 100%),
        linear-gradient(180deg, #f5f8ff 0%, #eef3fb 100%);
}

.vf,
.vf * {
    box-sizing: border-box;
}

/* The site sheet puts its own faces on every element through universal
   rules; inside this page everything inherits the page font instead. */
.vf * {
    font-family: inherit;
}

/* The hidden attribute always wins over the display rules below */
.vf [hidden] {
    display: none !important;
}

.vf__col {
    max-width: calc(720px * var(--vf-scale));
    margin: 0 auto;
}

.vf__col > * {
    margin: 0;
}

/* Heading */

.vf-head {
    text-align: center;
    margin-bottom: calc(44px * var(--vf-scale));
}

.vf-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 1px var(--vf-line), 0 10px 24px -18px rgba(30, 58, 138, 0.6);
    color: var(--vf-blue-deep);
    font-size: calc(13.5px * var(--vf-scale));
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.2;
}

.vf-head__eyebrow svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.vf-head__title {
    font-family: var(--vf-font-display);
    font-size: clamp(30px, 5.4vw, calc(40px * var(--vf-scale)));
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--vf-ink);
    margin: calc(24px * var(--vf-scale)) 0 0;
    text-wrap: balance;
}

.vf-head__lead {
    max-width: calc(600px * var(--vf-scale));
    margin: calc(20px * var(--vf-scale)) auto 0;
    font-size: calc(17.5px * var(--vf-scale));
    font-weight: 500;
    line-height: 1.65;
    color: var(--vf-ink-2);
    text-wrap: pretty;
}

.vf-head__lead strong {
    font-weight: 700;
    color: var(--vf-ink);
}

/* Cards */

.vf-card {
    position: relative;
    background: var(--vf-glass);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: var(--vf-radius-card);
    box-shadow: var(--vf-shadow-card), 0 0 0 1px var(--vf-line);
    padding: calc(28px * var(--vf-scale));
}

.vf-card__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: calc(24px * var(--vf-scale));
}

.vf-card__icon {
    display: inline-grid;
    place-items: center;
    width: calc(46px * var(--vf-scale));
    height: calc(46px * var(--vf-scale));
    flex: 0 0 auto;
    border-radius: 15px;
    background: linear-gradient(150deg, #e8f0ff 0%, #ffffff 100%);
    border: 1px solid rgba(37, 99, 235, 0.16);
    box-shadow: inset 0 1px 0 #ffffff, 0 8px 18px -14px rgba(30, 58, 138, 0.7);
    color: var(--vf-blue-deep);
}

.vf-card__icon svg {
    width: calc(23px * var(--vf-scale));
    height: calc(23px * var(--vf-scale));
}

.vf-card__heading {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vf-card__step {
    font-size: calc(12.5px * var(--vf-scale));
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--vf-blue-deep);
}

.vf-card__title {
    font-family: var(--vf-font-display);
    font-size: calc(23px * var(--vf-scale));
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--vf-ink);
    margin: 0;
}

/* Connector between the two steps: two faint line segments and a white
   disc with a chevron; the lines stop before the disc. */
.vf-connector {
    display: grid;
    grid-template-rows: calc(18px * var(--vf-scale)) calc(34px * var(--vf-scale)) calc(18px * var(--vf-scale));
    justify-items: center;
    height: calc(70px * var(--vf-scale));
}

.vf-connector__line {
    width: 2px;
    height: 100%;
    border-radius: 2px;
    background: rgba(30, 58, 138, 0.16);
}

.vf-connector__disc {
    display: grid;
    place-items: center;
    width: calc(34px * var(--vf-scale));
    height: calc(34px * var(--vf-scale));
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--vf-line);
    box-shadow: 0 8px 18px -12px rgba(30, 58, 138, 0.6);
    color: var(--vf-blue-deep);
}

.vf-connector__disc svg {
    width: 16px;
    height: 16px;
}

/* Form */

.vf-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vf-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vf-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: calc(15px * var(--vf-scale));
    font-weight: 600;
    line-height: 1.3;
    color: var(--vf-ink);
}

.vf-label__hint {
    font-size: calc(14px * var(--vf-scale));
    font-weight: 500;
    color: var(--vf-ink-3);
}

.vf-input-wrap {
    position: relative;
}

.vf-input-wrap > svg {
    position: absolute;
    left: 18px;
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    color: var(--vf-ink-3);
    pointer-events: none;
    transition: color 0.2s var(--vf-ease);
}

.vf-input {
    display: block;
    width: 100%;
    height: calc(60px * var(--vf-scale));
    margin: 0;
    padding: 0 18px 0 54px;
    border: 1.5px solid var(--vf-line-strong);
    border-radius: var(--vf-radius-md);
    background: #ffffff;
    color: var(--vf-ink);
    font-family: var(--vf-font-display);
    font-size: calc(21px * var(--vf-scale));
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: border-color 0.2s var(--vf-ease), box-shadow 0.2s var(--vf-ease);
}

.vf-input::placeholder {
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 1;
}

.vf-input:hover {
    border-color: #a9b8d4;
}

.vf-input:focus {
    border-color: var(--vf-blue);
    box-shadow: var(--vf-ring);
}

.vf-input-wrap:focus-within > svg {
    color: var(--vf-blue-deep);
}

.vf-input.is-invalid {
    border-color: var(--vf-red);
}

.vf-input.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.14);
}

.vf-field__error {
    display: none;
    align-items: flex-start;
    gap: 7px;
    margin: 0;
    font-size: calc(14.5px * var(--vf-scale));
    font-weight: 600;
    line-height: 1.4;
    color: var(--vf-red-ink);
}

.vf-field__error svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin-top: 2px;
}

.vf-field.has-error .vf-field__error {
    display: flex;
}

.vf-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--vf-radius-md);
    background: var(--vf-blue-tint);
    border: 1px solid rgba(37, 99, 235, 0.1);
    font-size: calc(15px * var(--vf-scale));
    font-weight: 500;
    line-height: 1.5;
    color: var(--vf-ink-2);
}

.vf-note svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--vf-blue-deep);
}

.vf-note code {
    font-family: var(--vf-font-display);
    font-size: calc(14.5px * var(--vf-scale));
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: 7px;
    background: #ffffff;
    border: 1px solid rgba(37, 99, 235, 0.14);
    color: var(--vf-blue-ink);
}

/* Primary button: the same animated plate as the pay button on the
   checkout, breathing glow at rest, ring and shimmer on hover. */
.vf-cta {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: calc(58px * var(--vf-scale));
    margin: 0;
    padding: 0 20px;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    color: #ffffff;
    font-family: var(--vf-font-display);
    font-size: calc(17.5px * var(--vf-scale));
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-decoration: none;
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #1e3a5f 100%);
    background-size: 200% 200%;
    box-shadow:
        0 6px 20px -4px rgba(30, 58, 95, 0.35),
        0 0 30px -10px rgba(37, 99, 235, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    animation: vf-breathe 4s ease-in-out infinite;
    transition:
        transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.4s ease,
        filter 0.35s ease;
    -webkit-tap-highlight-color: transparent;
}

.vf-cta::before {
    content: '';
    position: absolute;
    inset: -3px;
    z-index: -2;
    border-radius: 15px;
    background: linear-gradient(90deg, #1e3a5f, #3b82f6, #60a5fa, #93c5fd, #60a5fa, #3b82f6, #1e3a5f);
    background-size: 300% 100%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.vf-cta::after {
    content: '';
    position: absolute;
    inset: 2px;
    z-index: -1;
    border-radius: 12px;
    background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #1e3a5f 100%);
    pointer-events: none;
}

.vf-cta__bar {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    z-index: 3;
    background: linear-gradient(105deg,
        transparent 20%,
        rgba(255, 255, 255, 0.03) 35%,
        rgba(255, 255, 255, 0.1) 45%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.1) 55%,
        rgba(255, 255, 255, 0.03) 65%,
        transparent 80%);
    transform: skewX(-15deg);
    pointer-events: none;
}

.vf-cta__text {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: opacity 0.3s ease, text-shadow 0.3s ease;
}

.vf-cta__text svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.vf-cta:hover {
    animation: none;
    transform: translateY(-3px) scale(1.01);
    filter: brightness(1.08);
    color: #ffffff;
    box-shadow:
        0 20px 50px -10px rgba(37, 99, 235, 0.5),
        0 10px 30px -5px rgba(30, 58, 95, 0.35),
        0 0 60px -15px rgba(59, 130, 246, 0.4),
        inset 0 2px 0 rgba(255, 255, 255, 0.15);
}

.vf-cta:hover::before {
    opacity: 1;
    animation: vf-ring 2s linear infinite;
}

.vf-cta:hover .vf-cta__bar {
    animation: vf-shimmer 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.vf-cta:hover .vf-cta__text {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

.vf-cta:active {
    transform: translateY(-1px) scale(0.985);
    filter: brightness(0.95);
    transition: transform 0.1s ease, filter 0.1s ease;
}

.vf-cta:focus {
    outline: none;
}

.vf-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--vf-blue);
}

.vf-cta[disabled],
.vf-cta.is-busy {
    cursor: wait;
    animation: none;
    transform: none;
    filter: none;
}

.vf-cta.is-busy .vf-cta__bar {
    animation: vf-shimmer-loading 1s ease-in-out infinite;
}

.vf-spinner {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 2.5px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    animation: vf-spin 0.8s linear infinite;
}

/* Ghost button: white plate, blue ink */
.vf-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: calc(50px * var(--vf-scale));
    padding: 0 18px;
    border-radius: var(--vf-radius-md);
    border: 1.5px solid var(--vf-line-strong);
    background: #ffffff;
    color: var(--vf-blue-deep);
    font-family: var(--vf-font-display);
    font-size: calc(15.5px * var(--vf-scale));
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s var(--vf-ease), background-color 0.2s var(--vf-ease), transform 0.2s var(--vf-ease), color 0.2s var(--vf-ease);
}

.vf-ghost svg {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.vf-ghost:hover {
    border-color: var(--vf-blue);
    background: var(--vf-blue-tint);
    color: var(--vf-blue-ink);
    text-decoration: none;
    transform: translateY(-1px);
}

.vf-ghost:focus-visible {
    outline: none;
    box-shadow: var(--vf-ring);
}

.vf-ghost.is-done {
    border-color: rgba(5, 150, 105, 0.35);
    background: var(--vf-green-soft);
    color: var(--vf-green-deep);
}

/* Result card: one card, several faces. Only the face matching the
   current state is shown. */
.vf-result [data-face] {
    display: none;
}

.vf-result[data-state="idle"] [data-face="idle"],
.vf-result[data-state="loading"] [data-face="loading"],
.vf-result[data-state="valid"] [data-face="valid"],
.vf-result[data-state="expired"] [data-face="valid"],
.vf-result[data-state="missing"] [data-face="missing"],
.vf-result[data-state="limited"] [data-face="limited"],
.vf-result[data-state="error"] [data-face="error"] {
    display: block;
}

.vf-result[data-state="expired"] [data-only="valid"],
.vf-result[data-state="valid"] [data-only="expired"] {
    display: none !important;
}

/* Waiting face: a quiet preview of what will appear */
.vf-idle {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: calc(20px * var(--vf-scale)) calc(22px * var(--vf-scale));
    border-radius: var(--vf-radius-lg);
    background: var(--vf-blue-tint);
    border: 1px solid rgba(37, 99, 235, 0.1);
}

.vf-idle__art {
    flex: 0 0 auto;
    display: grid;
    gap: 7px;
    width: 92px;
    padding: 12px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid var(--vf-line);
    box-shadow: 0 10px 22px -18px rgba(30, 58, 138, 0.6);
}

.vf-idle__art span {
    display: block;
    height: 7px;
    border-radius: 4px;
    background: linear-gradient(90deg, #dbe7ff, #eef3fb);
}

.vf-idle__art span:nth-child(1) { width: 42%; background: linear-gradient(90deg, #a7f3d0, #d1fae5); }
.vf-idle__art span:nth-child(2) { width: 88%; }
.vf-idle__art span:nth-child(3) { width: 64%; }
.vf-idle__art span:nth-child(4) { width: 76%; }

.vf-idle__copy {
    min-width: 0;
    font-size: calc(15.5px * var(--vf-scale));
    font-weight: 500;
    line-height: 1.5;
    color: var(--vf-ink-2);
}

.vf-idle__copy strong {
    display: block;
    margin-bottom: 2px;
    font-family: var(--vf-font-display);
    font-size: calc(17px * var(--vf-scale));
    font-weight: 700;
    color: var(--vf-ink);
}

/* Loading face: skeleton in the shape of the answer */
.vf-skeleton {
    display: grid;
    gap: 14px;
}

.vf-skeleton__plate {
    height: 132px;
    border-radius: 20px;
    background: linear-gradient(90deg, #e3ebfa 0%, #f2f6ff 50%, #e3ebfa 100%);
    background-size: 200% 100%;
    animation: vf-skeleton 1.4s ease-in-out infinite;
}

.vf-skeleton__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.vf-skeleton__grid span {
    display: block;
    height: 74px;
    border-radius: 16px;
    background: linear-gradient(90deg, #e3ebfa 0%, #f2f6ff 50%, #e3ebfa 100%);
    background-size: 200% 100%;
    animation: vf-skeleton 1.4s ease-in-out infinite;
}

/* Valid: the one dark plate on the page, so the eye lands on the answer */
.vf-plate {
    position: relative;
    overflow: hidden;
    padding: calc(24px * var(--vf-scale)) calc(26px * var(--vf-scale));
    border-radius: 20px;
    background: linear-gradient(135deg, #0f2547 0%, #1e3a5f 48%, #1d4ed8 100%);
    color: #ffffff;
    box-shadow:
        0 22px 40px -24px rgba(30, 58, 138, 0.75),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.vf-plate::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(260px 130px at 100% 0%, rgba(255, 255, 255, 0.18), transparent 70%),
        radial-gradient(200px 100px at 0% 100%, rgba(96, 165, 250, 0.35), transparent 70%);
    pointer-events: none;
}

.vf-plate > * {
    position: relative;
}

.vf-plate__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.vf-plate__status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--vf-font-display);
    font-size: calc(21px * var(--vf-scale));
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.vf-plate__status svg {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    padding: 6px;
    border-radius: 50%;
    background: var(--vf-green);
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.28);
}

.vf-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: calc(13px * var(--vf-scale));
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
}

.vf-chip::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.vf-chip--valid {
    background: rgba(255, 255, 255, 0.16);
    color: #d1fae5;
}

.vf-chip--soon {
    background: var(--vf-gold-soft);
    color: var(--vf-gold);
}

.vf-chip--ok {
    background: var(--vf-green-soft);
    color: var(--vf-green-deep);
}

.vf-chip--expired {
    background: var(--vf-red-soft);
    color: var(--vf-red-ink);
}

.vf-plate__label {
    margin: 22px 0 4px;
    font-size: calc(12.5px * var(--vf-scale));
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
}

.vf-plate__name {
    margin: 0;
    font-family: var(--vf-font-display);
    font-size: clamp(26px, 4.6vw, calc(32px * var(--vf-scale)));
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #ffffff;
    overflow-wrap: anywhere;
}

.vf-plate__course {
    margin: 8px 0 0;
    font-size: calc(16.5px * var(--vf-scale));
    font-weight: 600;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
}

/* Banners: tinted plate, white icon badge, title and one plain line */
.vf-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: calc(20px * var(--vf-scale)) calc(22px * var(--vf-scale));
    border-radius: var(--vf-radius-lg);
    border: 1px solid transparent;
}

.vf-banner__icon {
    display: grid;
    place-items: center;
    width: calc(46px * var(--vf-scale));
    height: calc(46px * var(--vf-scale));
    flex: 0 0 auto;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 18px -14px rgba(15, 23, 42, 0.5);
}

.vf-banner__icon svg {
    width: calc(23px * var(--vf-scale));
    height: calc(23px * var(--vf-scale));
}

.vf-banner__copy {
    min-width: 0;
    flex: 1 1 auto;
}

.vf-banner__title {
    margin: 0 0 4px;
    font-family: var(--vf-font-display);
    font-size: calc(20px * var(--vf-scale));
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.vf-banner__text {
    margin: 0;
    font-size: calc(15.5px * var(--vf-scale));
    font-weight: 500;
    line-height: 1.55;
    color: var(--vf-ink-2);
}

.vf-banner__text + .vf-banner__text {
    margin-top: 8px;
}

.vf-banner__text strong {
    font-weight: 700;
    color: var(--vf-ink);
}

.vf-banner--expired {
    background: linear-gradient(135deg, #fff7e8 0%, #fffaf0 100%);
    border-color: rgba(180, 83, 9, 0.18);
}

.vf-banner--expired .vf-banner__icon { color: var(--vf-gold); }
.vf-banner--expired .vf-banner__title { color: var(--vf-gold-ink); }

.vf-banner--missing {
    background: linear-gradient(135deg, #fef2f2 0%, #fff7f7 100%);
    border-color: rgba(220, 38, 38, 0.16);
}

.vf-banner--missing .vf-banner__icon { color: var(--vf-red); }
.vf-banner--missing .vf-banner__title { color: var(--vf-red-ink); }

.vf-banner--limited {
    background: linear-gradient(135deg, #fff7e8 0%, #fffaf0 100%);
    border-color: rgba(180, 83, 9, 0.18);
}

.vf-banner--limited .vf-banner__icon { color: var(--vf-gold); }
.vf-banner--limited .vf-banner__title { color: var(--vf-gold-ink); }

.vf-banner--error {
    background: var(--vf-blue-tint);
    border-color: rgba(37, 99, 235, 0.12);
}

.vf-banner--error .vf-banner__icon { color: var(--vf-blue-deep); }
.vf-banner--error .vf-banner__title { color: var(--vf-ink); }

.vf-code {
    font-family: var(--vf-font-display);
    font-weight: 800;
    letter-spacing: 0.06em;
}

/* Facts: two columns of small tiles */
.vf-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.vf-fact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: calc(16px * var(--vf-scale)) calc(18px * var(--vf-scale));
    border-radius: var(--vf-radius-lg);
    background: #ffffff;
    border: 1px solid var(--vf-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.vf-fact--wide {
    grid-column: 1 / -1;
}

.vf-fact__label {
    font-size: calc(12.5px * var(--vf-scale));
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--vf-ink-3);
}

.vf-fact__value {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--vf-font-display);
    font-size: calc(18px * var(--vf-scale));
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--vf-ink);
    overflow-wrap: anywhere;
}

.vf-fact__value time {
    font-variant-numeric: tabular-nums;
}

.vf-fact__value .vf-chip {
    flex: 0 0 auto;
}

.vf-fact__value--code {
    letter-spacing: 0.08em;
}

.vf-copy {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    margin: -6px -8px -6px 0;
    padding: 0;
    border: 0;
    border-radius: 11px;
    background: var(--vf-blue-tint);
    color: var(--vf-blue-deep);
    cursor: pointer;
    transition: background-color 0.2s var(--vf-ease), color 0.2s var(--vf-ease), transform 0.2s var(--vf-ease);
}

.vf-copy svg {
    width: 17px;
    height: 17px;
}

.vf-copy:hover {
    background: var(--vf-blue-soft);
    transform: translateY(-1px);
}

.vf-copy:focus-visible {
    outline: none;
    box-shadow: var(--vf-ring);
}

.vf-copy.is-done {
    background: var(--vf-green-soft);
    color: var(--vf-green-deep);
}

/* Actions under the facts */
.vf-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.vf-actions__row {
    display: flex;
    gap: 12px;
}

.vf-actions__row > * {
    flex: 1 1 0;
}

.vf-actions__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 0;
    font-size: calc(14px * var(--vf-scale));
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    color: var(--vf-ink-3);
}

.vf-actions__note svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* The stamp under the answer */
.vf-stamp {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--vf-line);
    font-size: calc(14px * var(--vf-scale));
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    color: var(--vf-ink-3);
}

.vf-stamp svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--vf-green);
}

/* Toast for copy feedback */
.vf-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 60;
    transform: translate(-50%, 16px);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--vf-ink);
    color: #ffffff;
    font-size: calc(14.5px * var(--vf-scale));
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 18px 40px -18px rgba(11, 18, 32, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--vf-ease), transform 0.25s var(--vf-ease);
}

.vf-toast svg {
    width: 16px;
    height: 16px;
    color: #6ee7b7;
}

.vf-toast.is-on {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Trust row */
.vf-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 32px;
}

.vf-trust__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 1px var(--vf-line), 0 18px 40px -30px rgba(30, 58, 138, 0.5);
}

.vf-trust__icon {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: linear-gradient(150deg, #e8f0ff 0%, #ffffff 100%);
    border: 1px solid rgba(37, 99, 235, 0.16);
    color: var(--vf-blue-deep);
}

.vf-trust__icon svg {
    width: 20px;
    height: 20px;
}

.vf-trust__title {
    margin: 0;
    font-family: var(--vf-font-display);
    font-size: calc(16.5px * var(--vf-scale));
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--vf-ink);
}

.vf-trust__text {
    margin: 0;
    font-size: calc(14.5px * var(--vf-scale));
    font-weight: 500;
    line-height: 1.5;
    color: var(--vf-ink-2);
}

/* Help line */
.vf-help {
    margin: 28px auto 0;
    max-width: 560px;
    font-size: calc(15px * var(--vf-scale));
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    color: var(--vf-ink-2);
}

.vf-help a {
    color: var(--vf-blue-deep);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1.5px solid rgba(37, 99, 235, 0.3);
    transition: border-color 0.2s var(--vf-ease), color 0.2s var(--vf-ease);
}

.vf-help a:hover {
    color: var(--vf-blue-ink);
    border-bottom-color: var(--vf-blue-ink);
    text-decoration: none;
}

/* Result reveal */
.vf-result.is-fresh > [data-face] {
    animation: vf-rise 0.45s var(--vf-ease) both;
}

/* Motion */
@keyframes vf-breathe {
    0%, 100% {
        box-shadow:
            0 6px 20px -4px rgba(30, 58, 95, 0.35),
            0 0 30px -10px rgba(37, 99, 235, 0.25),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    50% {
        box-shadow:
            0 10px 28px -4px rgba(30, 58, 95, 0.4),
            0 0 44px -10px rgba(37, 99, 235, 0.4),
            inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
}

@keyframes vf-ring {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

@keyframes vf-shimmer {
    0% { left: -100%; opacity: 0; }
    15% { opacity: 0.8; }
    50% { opacity: 1; }
    85% { opacity: 0.8; }
    100% { left: 100%; opacity: 0; }
}

@keyframes vf-shimmer-loading {
    0% { left: -100%; opacity: 0.5; }
    50% { opacity: 1; }
    100% { left: 100%; opacity: 0.5; }
}

@keyframes vf-spin {
    to { transform: rotate(360deg); }
}

@keyframes vf-skeleton {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes vf-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .vf-cta,
    .vf-cta:hover::before,
    .vf-cta:hover .vf-cta__bar,
    .vf-cta.is-busy .vf-cta__bar,
    .vf-skeleton__plate,
    .vf-skeleton__grid span,
    .vf-result.is-fresh > [data-face] {
        animation: none;
    }

    .vf-cta,
    .vf-ghost,
    .vf-copy,
    .vf-toast {
        transition: none;
    }

    .vf-cta:hover {
        transform: none;
    }
}

/* Phones */
@media (max-width: 640px) {
    .vf {
        padding: 36px 12px 64px;
    }

    .vf-head {
        margin-bottom: 26px;
    }

    .vf-head__lead {
        font-size: 16.5px;
    }

    .vf-card {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .vf-card__head {
        margin-bottom: 20px;
    }

    .vf-card__title {
        font-size: 21px;
    }

    .vf-input {
        height: 56px;
        font-size: 19px;
    }

    .vf-plate {
        padding: 20px 20px;
    }

    .vf-plate__status {
        font-size: 19px;
    }

    .vf-facts {
        grid-template-columns: 1fr;
    }

    .vf-actions__row {
        flex-direction: column;
    }

    .vf-idle {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .vf-trust {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 26px;
    }

    .vf-trust__item {
        flex-direction: row;
        align-items: flex-start;
        gap: 14px;
        padding: 16px 18px;
    }

    .vf-trust__icon {
        flex: 0 0 auto;
    }

    .vf-trust__copy {
        min-width: 0;
    }

    .vf-banner {
        gap: 14px;
        padding: 18px;
    }
}

@media (max-width: 380px) {
    .vf-plate__top {
        flex-direction: column;
        align-items: flex-start;
    }
}