/* Standalone printable flyer layout (one A4 sheet). Used by /online-assessment-platform/ and /rto-vet/
   on top of css/v2.css. */
body.v2-flyer-page { background: #ECE8EF; }
.fl-bar {
    max-width: 900px;
    margin: 0 auto;
    padding: 14px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.fl-bar a.fl-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--v2-ink); font-weight: 600; font-size: 14.5px; text-decoration: none; }
.fl-bar a.fl-back:hover { color: var(--v2-purple-dark); text-decoration: underline; text-underline-offset: 3px; }
.fl-bar img { height: 30px; width: auto; }

.fl-sheet {
    max-width: 900px;
    margin: 0 auto 40px;
    background: var(--v2-bg);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(31, 26, 36, 0.14);
}
.fl-head { margin: 10px; padding: 36px 40px 34px; }
.fl-head__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.fl-head__logo { height: 40px; width: auto; }
.fl-head .v2-eyebrow { color: rgba(255, 255, 255, 0.88); margin-bottom: 10px; }
.fl-head h1 { margin: 0 0 14px; color: #fff; font-size: clamp(32px, 4.6vw, 46px); }
.fl-tagline { margin: 0 0 10px; font-size: clamp(17px, 1.8vw, 20px); font-weight: 600; line-height: 1.4; color: #fff; max-width: 640px; }
.fl-desc { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.86); max-width: 640px; }
.fl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.fl-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(23, 12, 43, 0.35); color: #fff; font-size: 13px; font-weight: 500; }
.fl-chips i { color: var(--v2-lav-2); }
.fl-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.fl-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--v2-line); }
.fl-row--one { grid-template-columns: 1fr; }
.fl-row > * { padding: 26px 34px 28px; }
.fl-row > * + * { border-left: 1px solid var(--v2-line); }
.fl-row h2 { margin: 0 0 10px; font-size: 21px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.25; }
.fl-row p { margin: 0 0 12px; font-size: 14.5px; line-height: 1.6; color: var(--v2-muted); }
.fl-row .v2-ticks li { font-size: 14px; }
.fl-who { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.fl-who li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--v2-line); border-radius: 10px; background: #fff; font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.fl-who i { flex: 0 0 auto; width: 18px; text-align: center; color: var(--v2-purple); }
.fl-features { display: grid; grid-template-columns: 1fr 1fr; margin: 4px 0 0; padding: 0; list-style: none; border: 1px solid var(--v2-line); border-radius: 12px; overflow: hidden; background: #fff; }
.fl-features li { padding: 12px 14px; }
.fl-features li:nth-child(odd) { border-right: 1px solid var(--v2-line); }
.fl-features li:nth-child(n+3) { border-top: 1px solid var(--v2-line); }
.fl-features h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.fl-features h3 i { color: var(--v2-purple); font-size: 13px; }
.fl-features p { margin: 0; font-size: 12.5px; line-height: 1.5; }
.fl-panel h2 { display: flex; align-items: center; gap: 10px; font-size: 17px; }
.fl-panel h2 i { color: var(--v2-purple); }
.fl-panel p { margin: 0; }
.fl-panel--lav { background: var(--v2-lav); }
.fl-panel--soft { background: var(--v2-panel); }
.fl-highlight { color: var(--v2-purple-dark); font-weight: 600; }

.fl-foot { margin: 10px; padding: 28px 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px; align-items: end; }
.fl-foot h2 { margin: 0 0 8px; color: #fff; font-size: clamp(24px, 3vw, 30px); }
.fl-foot a.fl-site { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.fl-foot a.fl-site:focus-visible { outline-color: #fff; }
.fl-contact { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.fl-contact li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.9); }
.fl-contact i { width: 16px; margin-top: 3px; text-align: center; color: var(--v2-lav-2); }
.fl-contact a { color: #fff; }
.fl-foot .fl-actions { grid-column: 1 / -1; margin-top: 4px; }

/* Single-column variants of the flyer lists, and a three-panel row. */
.fl-row--three { grid-template-columns: repeat(3, 1fr); }
.fl-features--stack { grid-template-columns: 1fr; }
.fl-features--stack li:nth-child(odd) { border-right: 0; }
.fl-features--stack li + li { border-top: 1px solid var(--v2-line); }
.fl-who--stack { grid-template-columns: 1fr; }
.fl-who--stack li { align-items: flex-start; }
.fl-who--stack i { margin-top: 3px; }

/* Multi-sheet flyers: wrap each printed page in .fl-page inside .fl-sheet--pages; later pages get
   .fl-page--next (a hairline on screen, a page break in print). */
.fl-page--next { border-top: 1px solid var(--v2-line); }

@media screen and (max-width: 760px) {
    .fl-head { padding: 28px 20px 26px; }
    .fl-head__top { flex-direction: column-reverse; gap: 14px; }
    .fl-row, .fl-row--three { grid-template-columns: 1fr; }
    .fl-row > * { padding: 22px 20px 24px; }
    .fl-row > * + * { border-left: 0; border-top: 1px solid var(--v2-line); }
    .fl-who { grid-template-columns: 1fr; }
    .fl-features { grid-template-columns: 1fr; }
    .fl-features li:nth-child(odd) { border-right: 0; }
    .fl-features li + li { border-top: 1px solid var(--v2-line); }
    .fl-foot { grid-template-columns: 1fr; padding: 24px 20px; }
    .fl-sheet { border-radius: 14px; margin-inline: 8px; }
}

/* One A4 sheet when printed: drop the screen bar, shadow and buttons, and tighten the type. */
@page { size: A4; margin: 0; }
@media print {
    html, body, body * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    body.v2-flyer-page { background: #fff; font-size: 10px; }
    .fl-bar, .fl-actions { display: none !important; }
    /* The layered radial glow prints unreliably, so use a simple purple gradient on paper. */
    .fl-head, .fl-foot { background: linear-gradient(135deg, #7B4B94 0%, #3F2360 100%) !important; }
    .grecaptcha-badge { display: none !important; }
    .fl-sheet { width: 210mm; height: 297mm; max-width: none; margin: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; overflow: hidden; }
    .fl-sheet > * { flex-shrink: 0; }
    .fl-sheet.fl-sheet--pages { height: auto; overflow: visible; display: block; }
    .fl-sheet--pages .fl-page { height: 297mm; display: flex; flex-direction: column; overflow: hidden; }
    .fl-sheet--pages .fl-page > * { flex-shrink: 0; }
    .fl-page--next { break-before: page; border-top: 0; padding-top: 6mm; }
    .fl-head { margin: 6mm 6mm 0; padding: 7mm 9mm 6mm; border-radius: 4mm; }
    .fl-head__top { margin-bottom: 4mm; }
    .fl-head__logo { height: 9mm; }
    .fl-head .v2-eyebrow { font-size: 8px; margin-bottom: 2mm; }
    .fl-head h1 { font-size: 25px; margin-bottom: 2.5mm; letter-spacing: -0.5px; }
    .fl-tagline { font-size: 12.5px; margin-bottom: 1.5mm; max-width: none; }
    .fl-desc { font-size: 9.5px; line-height: 1.45; max-width: none; }
    .fl-chips { margin-top: 3.5mm; gap: 2mm; }
    .fl-chips li { font-size: 8.5px; padding: 1mm 3mm; }
    .fl-row > * { padding: 4.8mm 8mm 5.2mm; }
    .fl-row h2 { font-size: 13.5px; margin-bottom: 1.5mm; }
    .fl-row p { font-size: 9.7px; line-height: 1.45; margin-bottom: 2mm; }
    .fl-row .v2-ticks { gap: 1.2mm; }
    .fl-row .v2-ticks li { font-size: 9.5px; line-height: 1.42; padding-left: 5mm; }
    .fl-row .v2-ticks li::before { width: 3.2mm; height: 3.2mm; font-size: 6px; top: 0.3mm; }
    .fl-who { gap: 1.5mm; }
    .fl-who li { padding: 1.8mm 2.5mm; font-size: 9.4px; border-radius: 2mm; }
    .fl-features li { padding: 2.2mm 3mm; }
    .fl-features h3 { font-size: 10px; margin-bottom: 1mm; }
    .fl-features p { font-size: 8.9px; line-height: 1.4; }
    .fl-panel h2 { font-size: 11px; }
    .fl-foot { margin: auto 6mm 6mm; padding: 5mm 8mm; border-radius: 4mm; gap: 2mm 8mm; }
    .fl-foot h2 { font-size: 17px; margin-bottom: 1mm; }
    .fl-contact { gap: 1.2mm; }
    .fl-contact li { font-size: 9px; }
}
