/* ==========================================================================
   Mon Examen Civique — page d'accueil (refonte)
   Dépend de tokens.css. N'utilise ni Bootstrap ni Font Awesome.
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body.v2 {
    margin: 0;
    position: relative;
    background: var(--v2-cream);
    color: var(--v2-ink);
    font-family: var(--v2-font-body);
    font-size: var(--v2-text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Grain très discret : donne une texture "papier officiel" au fond crème
   sans jamais toucher à la palette (bruit neutre, opacité quasi nulle). */
body.v2::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.035;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Remonte le contenu normal au-dessus du grain (position:fixed) sans toucher
   au header, déjà positionné et empilé via son propre z-index. */
.v2-flagline,
main#contenu,
.v2-footer {
    position: relative;
    z-index: 1;
}

/* :where() ramène la spécificité à zéro — même principe que le correctif
   :where(.v2 a) ci-dessous (Phase 2H-K). Cette règle restait le défaut pour
   tout titre sans style propre, mais écrasait silencieusement margin/
   letter-spacing d'au moins 17 composants (ex. .fmv2-hero-title perdait à la
   fois son centrage et sa marge). Bug de même forme que .v2 a, découvert en
   Phase 2I-A, corrigé ici en Phase 2I-B. */
:where(.v2 h1, .v2 h2, .v2 h3) {
    font-family: var(--v2-font-title);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}

/* :where() ramène la spécificité de ces deux règles à zéro : elles restent le
   défaut pour tout lien qui ne fixe pas sa propre couleur, mais ne peuvent
   plus jamais l'emporter sur une règle de composant (même une simple classe
   isolée). Avant ce correctif, ".v2 a"/"a:hover" (spécificité classe+élément)
   écrasait silencieusement la couleur de nombreux composants (ex. texte
   totalement invisible sur .fmv2-btn-pulse, bleu sur bleu). Bug découvert en
   Phase 2H-F, ampleur réelle confirmée et corrigé ici en Phase 2H-K. */
:where(.v2 a) {
    color: var(--v2-blue);
}

:where(.v2 a:hover) {
    color: var(--v2-blue-dark);
}

.v2 img {
    max-width: 100%;
}

/* Accès clavier : indispensable, le site actuel n'a pas de focus visible */
.v2 a:focus-visible,
.v2 button:focus-visible {
    outline: 3px solid var(--v2-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Sélecteur qualifié par body.v2 : passe devant ".v2 a" (couleur de lien par
   défaut) qui, à spécificité égale avec une simple classe, l'emportait et
   rendait ce texte invisible (bleu sur bleu). Même correctif appliqué aux
   boutons et cartes-liens ci-dessous. */
body.v2 .v2-skip {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    /* Masqué au-dessus de la page, PAS à left:-9999px : en arabe (RTL) le contenu qui
       dépasse à gauche devient défilable, et la page gagnait ~10 000 px de défilement
       horizontal sur toutes les pages. */
    transform: translateY(-150%);
    background: var(--v2-blue);
    color: #fff;
    padding: 0.75rem 1.25rem;
    z-index: 100;
}

/* Même qualification body.v2 que la règle de base : sinon (spécificité inférieure) le lien
   restait masqué au clavier — il n'apparaissait jamais au focus. */
body.v2 .v2-skip:focus {
    transform: none;
}

.v2-container {
    max-width: var(--v2-container);
    margin-inline: auto;
    padding-inline: var(--v2-pad-x);
}

/* --- Boutons -------------------------------------------------------------- */

.v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--v2-tap);
    padding: 0.875rem 1.625rem;
    border: 1px solid transparent;
    border-radius: var(--v2-radius-sm);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--v2-duration-fast) var(--v2-ease-out),
                border-color var(--v2-duration-fast) var(--v2-ease-out),
                transform var(--v2-duration-fast) var(--v2-ease-out),
                box-shadow var(--v2-duration-fast) var(--v2-ease-out);
}

/* Micro-interaction partagée par toutes les variantes (primary/ghost/light/store) :
   légère élévation au survol, retour + ombre interne au clic (sensation de
   pression). Le focus clavier (.v2 button:focus-visible, plus haut dans ce
   fichier) reste inchangé et prioritaire sur ces états pointeur. */
.v2-btn:hover {
    transform: translateY(-1px);
}

.v2-btn:active {
    transform: translateY(0);
    box-shadow: inset 0 1px 3px rgba(23, 33, 43, 0.16);
}

.v2-btn.v2-btn--primary {
    background: var(--v2-blue);
    color: #fff;
}

.v2-btn.v2-btn--primary:hover {
    background: var(--v2-blue-dark);
    color: #fff;
}

.v2-btn.v2-btn--ghost {
    background: var(--v2-white);
    border-color: var(--v2-border-soft);
    color: var(--v2-ink);
}

.v2-btn.v2-btn--ghost:hover {
    border-color: var(--v2-ink-3);
    color: var(--v2-ink);
}

.v2-btn.v2-btn--light {
    background: #fff;
    color: var(--v2-blue);
}

/* --- Filet tricolore et en-tête ------------------------------------------ */

.v2-flagline {
    display: flex;
    height: 4px;
}

.v2-flagline span {
    flex: 1;
}

.v2-flagline span:nth-child(1) { background: var(--v2-blue); }
.v2-flagline span:nth-child(2) { background: var(--v2-sand); }
.v2-flagline span:nth-child(3) { background: var(--v2-red); }

/* --- Hero ----------------------------------------------------------------- */

.v2-hero {
    display: grid;
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    padding-block: var(--v2-gap-xl) var(--v2-gap-lg);
}

.v2-hero__text {
    display: flex;
    flex-direction: column;
    gap: 1.375rem;
    align-items: flex-start;
}

/* Éditorial, pas un badge SaaS : un simple chapeau de magazine (filet + texte) */
.v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    color: var(--v2-red);
    font-size: var(--v2-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Identité française sobre : un filet tricolore miniature (même principe que
   .v2-flagline, sans le réutiliser tel quel), réservé à deux points d'entrée
   éditoriaux — pas de bleu/blanc/rouge disséminé sur toute la page. */
.v2-triband {
    display: inline-flex;
    flex: none;
    width: 1.75rem;
    height: 3px;
    border-block: 1px solid var(--v2-border-soft);
}

.v2-triband span {
    flex: 1;
}

.v2-triband span:nth-child(1) { background: var(--v2-blue); }
.v2-triband span:nth-child(2) { background: var(--v2-border-soft); }
.v2-triband span:nth-child(3) { background: var(--v2-red); }

.v2-triband--light {
    border-color: rgba(255, 255, 255, 0.3);
}

.v2-triband--light span:nth-child(1) { background: #A9C4DC; }
.v2-triband--light span:nth-child(2) { background: var(--v2-white); }
.v2-triband--light span:nth-child(3) { background: var(--v2-red); }

.v2-hero h1 {
    font-size: var(--v2-text-4xl);
    line-height: 1.1;
}

/* Accent unique et sobre : couleur pleine + soulignement, pas de dégradé */
.v2-accent {
    color: var(--v2-red);
    text-decoration: underline;
    text-decoration-color: rgba(var(--v2-red-rgb), 0.35);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.11em;
}

.v2-hero__desc {
    margin: 0;
    max-width: 32rem;
    font-size: var(--v2-text-lg);
    color: var(--v2-ink-2);
}

/* Repères chiffrés : contenu civique, mesurable — pas de storytelling gratuit */
.v2-hero__stats {
    display: flex;
    gap: 1.75rem;
    padding-block: 1rem;
    border-block: 1px solid var(--v2-border);
    width: 100%;
}

.v2-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-left: 1.75rem;
    border-left: 1px solid var(--v2-border);
}

.v2-stat:first-child {
    padding-left: 0;
    border-left: none;
}

.v2-stat__num {
    font-family: var(--v2-font-title);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--v2-blue);
    line-height: 1;
}

.v2-stat__label {
    font-size: var(--v2-text-xs);
    color: var(--v2-ink-3);
}

.v2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.v2-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: var(--v2-text-sm);
    color: var(--v2-ink-2);
}

.v2-trust li {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
}

.v2-list-reset {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Entrée en scène du texte du hero : un seul passage au chargement,
   respecté par prefers-reduced-motion (voir tokens.css). */
.v2-hero__text > * {
    animation: v2-hero-in var(--v2-duration-slow) var(--v2-ease-out) both;
}

.v2-hero__text > *:nth-child(1) { animation-delay: 0.02s; }
.v2-hero__text > *:nth-child(2) { animation-delay: 0.08s; }
.v2-hero__text > *:nth-child(3) { animation-delay: 0.14s; }
.v2-hero__text > *:nth-child(4) { animation-delay: 0.2s; }
.v2-hero__text > *:nth-child(5) { animation-delay: 0.26s; }
.v2-hero__text > *:nth-child(6) { animation-delay: 0.32s; }

@keyframes v2-hero-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.v2-hero__media {
    animation: v2-hero-in var(--v2-duration-slow) var(--v2-ease-out) 0.16s both;
}

/* --- Aperçu produit "en direct" (hero, visiteur anonyme) ------------------
   Seule surface du hero à porter une ombre marquée : elle doit lire comme
   une fenêtre d'application réelle, pas comme une carte parmi d'autres. */
.v2-demo {
    background: var(--v2-white);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-lg);
    padding: 1.75rem 1.75rem 1.5rem;
    box-shadow: 0 32px 64px -32px rgba(var(--v2-blue-rgb), 0.3), var(--v2-shadow-lift);
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.v2-demo__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.v2-demo__cat {
    font-size: var(--v2-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--v2-blue);
}

.v2-demo__progress-label {
    font-size: var(--v2-text-xs);
    color: var(--v2-ink-3);
    font-variant-numeric: tabular-nums;
}

.v2-demo__rail {
    height: 6px;
    border-radius: 4px;
    background: var(--v2-rail);
    overflow: hidden;
}

.v2-demo__fill {
    display: block;
    height: 100%;
    width: 0%;
    border-radius: 4px;
    background: var(--v2-blue);
    transition: width var(--v2-duration-slow) var(--v2-ease-out);
}

.v2-demo__question {
    margin: 0;
    font-size: var(--v2-text-lg);
    font-weight: 600;
    line-height: 1.4;
    min-height: 2.8em;
}

.v2-demo__choices {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.v2-demo__choice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6875rem 0.875rem;
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-sm);
    font-size: var(--v2-text-sm);
    color: var(--v2-ink-2);
    transition: border-color var(--v2-duration-base) var(--v2-ease-out),
                background var(--v2-duration-base) var(--v2-ease-out),
                color var(--v2-duration-base) var(--v2-ease-out);
}

.v2-demo__choice::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--v2-border-soft);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 9px 9px;
    transition: background-color var(--v2-duration-base) var(--v2-ease-out),
                border-color var(--v2-duration-base) var(--v2-ease-out);
}

.v2-demo__choice.is-selected {
    border-color: var(--v2-blue);
    background: var(--v2-blue-tint);
    color: var(--v2-ink);
}

.v2-demo__choice.is-selected::before {
    border-color: var(--v2-blue);
    background-color: var(--v2-blue);
}

.v2-demo__choice.is-correct {
    border-color: var(--v2-success);
    background: var(--v2-success-tint);
    color: var(--v2-ink);
    font-weight: 600;
}

.v2-demo__choice.is-correct::before {
    border-color: var(--v2-success);
    background-color: var(--v2-success);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 9 17 20 6'/%3E%3C/svg%3E");
}

.v2-demo__explain {
    margin: 0;
    padding-top: 0.875rem;
    border-top: 1px dashed var(--v2-border);
    font-size: var(--v2-text-xs);
    color: var(--v2-ink-3);
    min-height: 2.6em;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity var(--v2-duration-slow) var(--v2-ease-out),
                transform var(--v2-duration-slow) var(--v2-ease-out);
}

.v2-demo--answered .v2-demo__explain {
    opacity: 1;
    transform: translateY(0);
}

/* --- Carte de progression (hero, visiteur connecté) ------------------------ */

.v2-progresscard {
    background: var(--v2-white);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-lg);
    padding: 1.375rem 1.5rem;
}

.v2-progresscard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
}

.v2-progresscard__cta {
    font-size: var(--v2-text-sm);
    font-weight: 600;
}

.v2-progress__row {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-bottom: 0.6875rem;
}

.v2-progress__label {
    display: flex;
    justify-content: space-between;
    font-size: var(--v2-text-sm);
}

.v2-progress__rail {
    height: 8px;
    border-radius: 4px;
    background: var(--v2-rail);
    overflow: hidden;
}

.v2-progress__fill {
    /* <span> est inline par défaut : "width" n'a aucun effet sans ce display,
       ce qui laissait la barre de progression visuellement toujours vide. */
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--v2-blue);
    transition: width var(--v2-duration-slow) var(--v2-ease-out);
}

.v2-progress__fill--low {
    background: var(--v2-red);
}

/* --- Sections ------------------------------------------------------------- */

.v2-section {
    padding-block: 0 var(--v2-gap-lg);
}

.v2-section__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--v2-gap-sm);
    margin-bottom: var(--v2-gap);
}

.v2-section h2 {
    font-size: var(--v2-text-2xl);
}

.v2-grid {
    display: grid;
    gap: var(--v2-gap);
}

.v2-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v2-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.125rem; }
.v2-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.v2-grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }

/* Cartes de titres */

.v2-tile {
    display: flex;
    flex-direction: column;
    gap: 0.6875rem;
    background: var(--v2-white);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.v2-tile:hover {
    transform: translateY(-3px);
    border-color: var(--v2-border-soft);
    box-shadow: var(--v2-shadow-lift);
}

.v2-tile:active {
    transform: translateY(-1px);
}

.v2-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 0.75rem;
    background: var(--v2-blue-tint-2);
    color: var(--v2-blue);
    transition: transform 0.2s ease;
}

.v2-tile:hover .v2-tile__icon {
    transform: scale(1.08);
}

.v2-tile__icon--alt {
    background: var(--v2-red-tint);
    color: var(--v2-red);
}

.v2-tile__icon--neutral {
    background: var(--v2-sand);
    color: var(--v2-ink-2);
}

.v2-tile__title {
    font-size: var(--v2-text-xl);
    font-weight: 600;
}

.v2-tile__desc {
    font-size: var(--v2-text-sm);
    color: var(--v2-ink-2);
    margin: 0;
}

/* Navigation éditoriale des thèmes — index à filets, pas des cartes photo */

.v2-index {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-block: 1px solid var(--v2-border);
}

.v2-index__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.75rem 1.375rem 1.5rem;
    border-left: 1px solid var(--v2-border);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.v2-index__item:first-child {
    border-left: none;
    padding-left: 0;
}

.v2-index__item::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: var(--v2-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--v2-duration-base) var(--v2-ease-out);
}

.v2-index__item:hover::after,
.v2-index__item:focus-visible::after {
    transform: scaleX(1);
}

.v2-index__num {
    font-family: var(--v2-font-title);
    font-size: 1.625rem;
    font-weight: 700;
    color: var(--v2-border-soft);
    transition: color var(--v2-duration-base) var(--v2-ease-out);
}

.v2-index__item:hover .v2-index__num {
    color: var(--v2-blue);
}

.v2-index__body {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.v2-index__name {
    font-size: var(--v2-text-lg);
    font-weight: 600;
    color: var(--v2-ink);
}

.v2-index__hint {
    font-size: var(--v2-text-xs);
    color: var(--v2-ink-3);
}

.v2-index__arrow {
    margin-top: auto;
    color: var(--v2-ink-3);
    transition: transform var(--v2-duration-base) var(--v2-ease-out),
                color var(--v2-duration-base) var(--v2-ease-out);
}

.v2-index__item:hover .v2-index__arrow {
    transform: translateX(4px);
    color: var(--v2-blue);
}

/* Parcours ("Comment ça marche") : une séquence reliée par un filet, pas une
   grille de cartes — chaque étape et chaque filet se révèlent l'un après
   l'autre au défilement (delais croissants ci-dessous, ordre des enfants). */

.v2-path {
    display: flex;
    align-items: flex-start;
}

.v2-path__step {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    flex: 1 1 0;
    min-width: 0;
    padding-right: 1.25rem;
}

.v2-path__line {
    flex: 1 1 auto;
    align-self: flex-start;
    height: 1px;
    min-width: 1.5rem;
    max-width: 4.5rem;
    margin-top: 1.15rem;
    background: var(--v2-border-soft);
    transform-origin: left;
    opacity: 1;
}

.v2-path__num {
    font-family: var(--v2-font-title);
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--v2-blue);
    line-height: 1;
}

.v2-path__title {
    font-size: var(--v2-text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--v2-ink);
}

.v2-path__desc {
    margin: 0;
    font-size: var(--v2-text-sm);
    color: var(--v2-ink-2);
    max-width: 15rem;
}

.v2-path > *:nth-child(1) { animation-delay: 0s; }
.v2-path > *:nth-child(2) { animation-delay: 0.07s; }
.v2-path > *:nth-child(3) { animation-delay: 0.14s; }
.v2-path > *:nth-child(4) { animation-delay: 0.21s; }
.v2-path > *:nth-child(5) { animation-delay: 0.28s; }
.v2-path > *:nth-child(6) { animation-delay: 0.35s; }
.v2-path > *:nth-child(7) { animation-delay: 0.42s; }

@keyframes v2-path-line-in {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
}

@supports (animation-timeline: view()) {
    .v2-path__line {
        opacity: 0;
        animation: v2-path-line-in linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 28%;
    }

    @media (prefers-reduced-motion: reduce) {
        .v2-path__line {
            animation: none;
            opacity: 1;
            transform: none;
        }
    }
}

/* Étapes (badge numéroté générique, réutilisé ailleurs que dans le parcours) */

.v2-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 0.5625rem;
    background: var(--v2-blue);
    color: #fff;
    font-size: var(--v2-text-sm);
    font-weight: 700;
}

/* Programmes ("Trois titres, trois programmes") : intro éditoriale à gauche,
   liste numérotée à droite — composition asymétrique, distincte de l'index
   des 5 thèmes (symétrique) et de la liste des guides (pleine largeur). */

.v2-programs {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.v2-programs__intro h2 {
    font-size: var(--v2-text-2xl);
    line-height: 1.2;
    margin-bottom: 0.875rem;
}

.v2-programs__lead {
    margin: 0 0 1.125rem;
    font-size: var(--v2-text-sm);
    color: var(--v2-ink-2);
}

.v2-programs__link {
    font-size: var(--v2-text-sm);
    font-weight: 600;
    text-decoration: none;
}

.v2-programs__list {
    display: flex;
    flex-direction: column;
}

.v2-program {
    display: flex;
    align-items: baseline;
    gap: 1.5rem;
    padding-block: 1.5rem;
    border-top: 1px solid var(--v2-border);
    text-decoration: none;
    color: inherit;
}

.v2-programs__list .v2-program:last-child {
    border-bottom: 1px solid var(--v2-border);
}

.v2-program__num {
    flex: none;
    font-family: var(--v2-font-title);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--v2-border-soft);
    transition: color var(--v2-duration-base) var(--v2-ease-out);
}

.v2-program:hover .v2-program__num {
    color: var(--v2-blue);
}

.v2-program__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.v2-program__name {
    font-family: var(--v2-font-title);
    font-size: var(--v2-text-lg);
    font-weight: 600;
    color: var(--v2-ink);
}

.v2-program__desc {
    font-size: var(--v2-text-sm);
    color: var(--v2-ink-2);
}

.v2-program__arrow {
    flex: none;
    align-self: center;
    color: var(--v2-ink-3);
    transition: transform var(--v2-duration-base) var(--v2-ease-out),
                color var(--v2-duration-base) var(--v2-ease-out);
}

.v2-program:hover .v2-program__arrow {
    transform: translateX(4px);
    color: var(--v2-blue);
}

/* Guides officiels : index éditorial pleine largeur (chip + titre + flèche),
   fonction différente des programmes — pas une nouvelle grille de cartes. */

.v2-guidelist {
    display: flex;
    flex-direction: column;
}

.v2-guiderow {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-block: 1.25rem;
    border-top: 1px solid var(--v2-border);
    text-decoration: none;
    color: inherit;
}

.v2-guidelist .v2-guiderow:last-child {
    border-bottom: 1px solid var(--v2-border);
}

.v2-guiderow .v2-chip {
    flex: none;
}

.v2-guiderow__title {
    flex: 1;
    min-width: 0;
    font-family: var(--v2-font-title);
    font-size: var(--v2-text-lg);
    font-weight: 600;
    color: var(--v2-ink);
}

.v2-guiderow__arrow {
    flex: none;
    color: var(--v2-ink-3);
    transition: transform var(--v2-duration-base) var(--v2-ease-out),
                color var(--v2-duration-base) var(--v2-ease-out);
}

.v2-guiderow:hover .v2-guiderow__arrow {
    transform: translateX(4px);
    color: var(--v2-blue);
}

/* Bandeau sombre */

.v2-band {
    background: var(--v2-blue-deep);
    color: #fff;
    border-radius: var(--v2-radius-lg);
    padding: 2.375rem 2.625rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--v2-gap-lg);
    margin-bottom: var(--v2-gap-lg);
}

.v2-band h2 {
    font-size: var(--v2-text-3xl);
    line-height: 1.22;
}

.v2-band__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #A9C4DC;
    margin-bottom: 0.6875rem;
}

.v2-band p {
    margin: 0.6875rem 0 0;
    max-width: 38rem;
    color: #D3E0EB;
}

/* Guides */

body.v2 .v2-guide {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    background: var(--v2-white);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius);
    padding: 1.375rem;
    text-decoration: none;
    color: var(--v2-ink);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.v2-guide:hover {
    transform: translateY(-3px);
    box-shadow: var(--v2-shadow-lift);
    color: var(--v2-ink);
}

.v2-guide:active {
    transform: translateY(-1px);
}

.v2-chip {
    align-self: flex-start;
    padding: 0.3125rem 0.625rem;
    border-radius: 0.5rem;
    background: var(--v2-blue-tint);
    color: var(--v2-ink-2);
    font-size: 0.75rem;
    font-weight: 600;
}

.v2-guide__title {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
}

.v2-meta {
    font-size: var(--v2-text-xs);
    color: var(--v2-ink-3);
}

/* Application mobile */

.v2-app {
    background: var(--v2-white);
    border: 1px solid var(--v2-border);
    border-radius: var(--v2-radius-lg);
    padding: 2.25rem 2.625rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--v2-gap-xl);
    margin-bottom: var(--v2-gap-lg);
}

.v2-app__text {
    flex: 1 1 22rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    align-items: flex-start;
}

.v2-app__text h2 {
    font-size: var(--v2-text-3xl);
    line-height: 1.2;
}

.v2-btn.v2-store {
    background: var(--v2-blue-deep);
    color: #fff;
    border-color: var(--v2-blue-deep);
    transition: background-color var(--v2-duration-base) var(--v2-ease-out),
                border-color var(--v2-duration-base) var(--v2-ease-out),
                transform var(--v2-duration-fast) var(--v2-ease-out),
                box-shadow var(--v2-duration-fast) var(--v2-ease-out);
}

.v2-btn.v2-store:hover {
    background: var(--v2-ink);
    border-color: var(--v2-ink);
    color: #fff;
}

.v2-app img {
    width: 290px;
    height: auto;
    display: block;
}

/* Partenaires */

.v2-partner {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76px;
    padding: 0.75rem;
    background: var(--v2-white);
    border: 1px solid var(--v2-border);
    border-radius: 0.875rem;
}

.v2-partner img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Pied de page */

.v2-footer {
    background: var(--v2-white);
    border-top: 1px solid var(--v2-border);
    padding-block: 2.125rem;
    margin-top: var(--v2-gap-lg);
}

.v2-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--v2-gap-lg);
}

.v2-footer__brand {
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.v2-footer__brand img {
    height: 36px;
    width: auto;
    /* .v2-footer__brand est un flex column (align-items:stretch par défaut) :
       sans ça, l'image est étirée à la largeur du conteneur au lieu de
       garder sa taille intrinsèque. */
    align-self: flex-start;
}

.v2-footer__brand p {
    margin: 0;
    font-size: var(--v2-text-xs);
    color: var(--v2-ink-3);
}

.v2-footer__cols {
    display: flex;
    flex-wrap: wrap;
    gap: 3.5rem;
}

.v2-footer__col {
    display: flex;
    flex-direction: column;
    gap: 0.5625rem;
    font-size: var(--v2-text-xs);
}

.v2-footer__col strong {
    font-size: var(--v2-text-xs);
    color: var(--v2-ink);
}

.v2-footer__col a {
    color: var(--v2-ink-2);
    text-decoration: none;
}

.v2-footer__col a:hover {
    text-decoration: underline;
}

/* --- Révélation au défilement (CSS scroll-driven animations) -------------
   Progressive enhancement : sans support, les éléments restent simplement
   visibles (état par défaut), aucune dépendance JS. */
@supports (animation-timeline: view()) {
    .v2-reveal {
        animation: v2-reveal-in linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 28%;
    }

    .v2-grid > .v2-reveal:nth-child(2) { animation-delay: 0.05s; }
    .v2-grid > .v2-reveal:nth-child(3) { animation-delay: 0.1s; }
    .v2-grid > .v2-reveal:nth-child(4) { animation-delay: 0.15s; }
    .v2-grid > .v2-reveal:nth-child(5) { animation-delay: 0.2s; }
    .v2-grid > .v2-reveal:nth-child(6) { animation-delay: 0.25s; }

    /* `animation-duration` ne pilote rien sur une timeline liée au scroll :
       sa progression dépend uniquement de la position de défilement, jamais
       du temps. La règle globale prefers-reduced-motion (tokens.css, qui ne
       réduit que la durée) est donc sans effet ici ; on neutralise
       explicitement l'animation elle-même pour ce cas précis. */
    @media (prefers-reduced-motion: reduce) {
        .v2-reveal {
            animation: none;
            opacity: 1;
            transform: none;
        }
    }
}

@keyframes v2-reveal-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Impression / export PDF : la mise en page n'est jamais défilée, donc la
   progression de l'animation liée au scroll resterait figée à 0. On force
   l'état final pour ne jamais imprimer une section vide. */
@media print {
    .v2-reveal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* --- Adaptations tablette et mobile -------------------------------------- */

@media (max-width: 1080px) {
    /* Hero mobile : le produit interactif doit apparaître tôt, pas après
       tout le texte marketing (identité + promesse + CTA, puis la démo,
       puis les repères chiffrés). Réordonnancement visuel pur : le DOM et
       l'ordre de lecture au clavier/lecteur d'écran restent inchangés. */
    .v2-hero {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1.75rem;
    }
    .v2-hero__text { display: contents; }
    .v2-hero__text > .v2-eyebrow     { order: 1; }
    .v2-hero__text > h1              { order: 2; }
    .v2-hero__text > .v2-hero__desc  { order: 3; }
    .v2-hero__text > .v2-actions     { order: 4; }
    .v2-hero__media                  { order: 5; }
    .v2-hero__text > .v2-hero__stats { order: 6; }
    .v2-hero__text > .v2-trust       { order: 7; }

    .v2-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .v2-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .v2-index { grid-template-columns: minmax(0, 1fr); }
    .v2-index__item {
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
        border-left: none;
        border-top: 1px solid var(--v2-border);
        padding: 1.25rem 0;
        overflow: visible;
    }
    .v2-index__item:first-child { border-top: none; }
    .v2-index__body { flex: 1; }

    .v2-programs { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

@media (max-width: 640px) {
    .v2-hero__stats { gap: 1.125rem; }
    .v2-stat { padding-left: 1.125rem; }
    .v2-demo { padding: 1.375rem 1.375rem 1.125rem; }

    /* Densité mobile : la page ne doit pas s'allonger uniquement parce que
       les sections desktop sont empilées — on resserre l'espacement entre
       sections sans retirer de contenu (voir aussi .v2-hero gap ci-dessus). */
    .v2-hero { gap: 1.375rem; padding-block: var(--v2-gap-lg) 1.75rem; }
    .v2-section { padding-block: 0 1.75rem; }
    .v2-section__head { margin-bottom: 1.125rem; }
    .v2-band,
    .v2-app { margin-bottom: 1.75rem; }
}

@media (max-width: 720px) {
    .v2-grid--3,
    .v2-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .v2-grid--5,
    .v2-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v2-band,
    .v2-app { padding: 1.5rem; }
    .v2-actions .v2-btn { flex: 1 1 100%; }
    .v2-app img { width: 100%; max-width: 290px; margin-inline: auto; }

    /* Parcours vertical : le filet horizontal devient un court trait vertical
       aligné sous le numéro (pas d'écrasement de la timeline horizontale). */
    .v2-path { flex-direction: column; gap: 1.375rem; }
    .v2-path__step { padding-right: 0; }
    .v2-path__line {
        width: 1px;
        min-width: 0;
        max-width: none;
        height: 1.25rem;
        margin: 0 0 0 0.95rem;
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .v2-program { align-items: flex-start; gap: 1rem; }

    .v2-guiderow { align-items: flex-start; gap: 0.875rem; }
}

/* --- Utilitaires --------------------------------------------------------- */

.v2-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Civiq Test — landing commerciale B2B2C
   ========================================================================== */

body.v2 {
    --cvq-blue: #062b78;
    --cvq-blue-2: #073b9a;
    --cvq-cyan: #16b8f3;
    --cvq-red: #ef1d2d;
    --cvq-ink: #172033;
    --cvq-muted: #667085;
    --cvq-bg: #f8f9fc;
    background: var(--cvq-bg);
}

.cvq-hero {
    padding-block: clamp(2rem, 4.5vw, 3.5rem) 2rem;
}

.cvq-hero__content {
    max-width: 940px;
}

.cvq-hero h1,
.cvq-section__intro h2,
.cvq-final h2 {
    color: var(--cvq-ink);
    letter-spacing: 0;
}

.cvq-hero h1 {
    max-width: 780px;
    margin-top: 0.8rem;
    font-size: clamp(2.3rem, 5vw, 4.65rem);
    line-height: 0.98;
}

.cvq-hero__lead {
    max-width: 720px;
    margin: 1.15rem 0 0;
    color: var(--cvq-muted);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.65;
}

.cvq-hero__actions {
    margin-top: 1.5rem;
}

body.v2 .v2-btn.v2-btn--primary {
    background: var(--cvq-blue);
}

body.v2 .v2-btn.v2-btn--primary:hover {
    background: var(--cvq-blue-2);
}

.cvq-proofline {
    margin-top: 1rem;
    color: var(--cvq-muted);
}

.cvq-proofline li::before {
    content: "";
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--cvq-cyan);
}

.cvq-product {
    margin-top: clamp(1.25rem, 2.5vw, 2rem);
    border: 1px solid #dfe6f1;
    background: linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
    box-shadow: 0 28px 70px rgba(6, 43, 120, 0.13);
    overflow: hidden;
}

.cvq-product__bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 3.5rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid #dfe6f1;
    color: var(--cvq-blue);
}

.cvq-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--cvq-blue);
}

.cvq-dot--cyan { background: var(--cvq-cyan); }
.cvq-dot--red { background: var(--cvq-red); }

.cvq-product__grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr 1.1fr 1fr;
    gap: 1rem;
    padding: clamp(1rem, 2.5vw, 1.5rem);
}

.cvq-panel,
.cvq-audience,
.cvq-feature,
.cvq-metric,
.cvq-steps > div {
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    background: #fff;
}

.cvq-panel {
    min-height: 11rem;
    padding: 1.25rem;
}

.cvq-panel h3,
.cvq-panel p,
.cvq-feature p,
.cvq-audience p,
.cvq-steps p {
    margin: 0;
}

.cvq-kicker,
.cvq-audience__tag {
    display: inline-flex;
    color: var(--cvq-red);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.cvq-panel h3 {
    margin-top: 0.75rem;
    font-family: var(--v2-font-body);
    font-size: 1.3rem;
}

.cvq-panel p {
    margin-top: 0.75rem;
    color: var(--cvq-muted);
}

.cvq-panel--score strong {
    display: block;
    margin-top: 0.5rem;
    color: var(--cvq-blue);
    font-size: 3.25rem;
    line-height: 1;
}

.cvq-panel--list ul,
.cvq-checklist {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.cvq-panel--list li,
.cvq-checklist li {
    display: flex;
    gap: 0.6rem;
    color: var(--cvq-muted);
}

.cvq-panel--list li + li,
.cvq-checklist li + li {
    margin-top: 0.55rem;
}

.cvq-panel--list li::before,
.cvq-checklist li::before {
    content: "";
    flex: 0 0 0.45rem;
    width: 0.45rem;
    height: 0.45rem;
    margin-top: 0.58rem;
    border-radius: 50%;
    background: var(--cvq-cyan);
}

.cvq-meter {
    height: 0.55rem;
    margin-top: 1.25rem;
    border-radius: 999px;
    background: #e8eef7;
    overflow: hidden;
}

.cvq-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cvq-blue), var(--cvq-cyan));
}

.cvq-section {
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
}

.cvq-section__intro {
    max-width: 780px;
    margin-bottom: 2rem;
}

.cvq-section__intro--compact {
    max-width: 860px;
}

.cvq-section__intro h2 {
    margin-top: 0.85rem;
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.05;
}

.cvq-section__intro p:not(.v2-eyebrow) {
    margin: 1rem 0 0;
    color: var(--cvq-muted);
    font-size: 1.08rem;
}

.cvq-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding-top: 0;
}

.cvq-metric {
    padding: 1.25rem;
}

.cvq-metric strong {
    display: block;
    color: var(--cvq-blue);
    font-size: 2rem;
    line-height: 1;
}

.cvq-metric span {
    display: block;
    margin-top: 0.65rem;
    color: var(--cvq-muted);
}

.cvq-audiences {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
}

.cvq-audience {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: clamp(1.5rem, 3vw, 2rem);
}

.cvq-audience--pro {
    border-color: rgba(6, 43, 120, 0.24);
    background: linear-gradient(135deg, #ffffff 0%, #eef6ff 100%);
}

.cvq-audience h3 {
    font-family: var(--v2-font-title);
    font-size: clamp(1.7rem, 3vw, 2.35rem);
    line-height: 1.08;
}

.cvq-featuregrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.cvq-feature {
    padding: 1.35rem;
}

.cvq-feature span {
    color: var(--cvq-red);
    font-weight: 800;
}

.cvq-feature strong {
    display: block;
    margin-top: 0.9rem;
    color: var(--cvq-ink);
    font-size: 1.1rem;
}

.cvq-feature p {
    margin-top: 0.5rem;
    color: var(--cvq-muted);
}

.cvq-pathway {
    border-block: 1px solid #dfe6f1;
}

.cvq-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.cvq-steps > div {
    padding: 1.25rem;
}

.cvq-steps span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--cvq-blue);
    color: #fff;
    font-weight: 800;
}

.cvq-steps strong {
    display: block;
    margin-top: 1rem;
    color: var(--cvq-ink);
    font-size: 1.15rem;
}

.cvq-steps p {
    margin-top: 0.45rem;
    color: var(--cvq-muted);
}

.cvq-programlist {
    display: grid;
    gap: 0.75rem;
}

.cvq-programlist a {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    background: #fff;
    color: var(--cvq-ink);
    text-decoration: none;
}

.cvq-programlist span {
    color: var(--cvq-muted);
}

.cvq-partners {
    padding-top: 2rem;
}

.cvq-partnergrid .v2-partner {
    background: #fff;
}

.cvq-final {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-block: 2.5rem 4.5rem;
    padding-block: clamp(2rem, 4vw, 3rem);
    padding-inline: clamp(1.5rem, 4vw, 3rem);
    border-radius: 8px;
    background: linear-gradient(135deg, var(--cvq-blue), #031b4f);
    color: #fff;
}

.cvq-final h2 {
    max-width: 760px;
    margin-top: 0.75rem;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.05;
}

.cvq-final p:not(.v2-eyebrow) {
    max-width: 700px;
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.78);
}

.cvq-final .v2-eyebrow {
    color: #fff;
}

.cvq-btn--outline-light {
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

.cvq-btn--outline-light:hover {
    border-color: #fff;
    color: #fff;
}

@media (max-width: 1024px) {
    .cvq-product__grid,
    .cvq-metrics,
    .cvq-featuregrid,
    .cvq-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cvq-final {
        align-items: flex-start;
        flex-direction: column;
    }
}

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

    .cvq-product__grid,
    .cvq-metrics,
    .cvq-audiences,
    .cvq-featuregrid,
    .cvq-steps {
        grid-template-columns: 1fr;
    }

    .cvq-programlist a {
        flex-direction: column;
        gap: 0.35rem;
    }

    .cvq-final {
        margin-inline: var(--v2-pad-x);
    }
}

/* --- Landing first viewport refinement ---------------------------------- */
.cvq-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 0.78fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    min-height: calc(100vh - 76px);
    padding-block: clamp(2rem, 4vw, 4rem);
}

.cvq-hero__content {
    max-width: 780px;
}

.cvq-hero h1 {
    max-width: 760px;
    font-size: clamp(2.6rem, 5.6vw, 5rem);
    line-height: 0.96;
}

.cvq-product {
    margin-top: 0;
}

.cvq-product__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cvq-panel {
    min-height: 10rem;
}

.cvq-panel--score strong {
    font-size: 2.75rem;
}

@media (max-width: 980px) {
    .cvq-hero {
        grid-template-columns: 1fr;
        min-height: auto;
    }
}

@media (max-width: 720px) {
    .cvq-hero {
        padding-block: 2rem;
    }

    .cvq-hero h1 {
        font-size: 2.55rem;
    }

    .cvq-product__grid {
        grid-template-columns: 1fr;
    }
}

/* --- Hero tightening after visual review -------------------------------- */
.cvq-hero h1 {
    max-width: 680px;
    font-size: clamp(2.25rem, 4.4vw, 4.15rem);
    line-height: 1.02;
}

.cvq-hero__lead {
    max-width: 640px;
    font-size: clamp(1rem, 1.25vw, 1.15rem);
}

.cvq-product {
    align-self: center;
}

.cvq-proofline {
    max-width: 620px;
}

@media (min-width: 981px) {
    .cvq-hero {
        grid-template-columns: minmax(0, 0.9fr) minmax(440px, 0.82fr);
    }
}

/* --- Above-the-fold density pass ---------------------------------------- */
.cvq-hero {
    min-height: auto;
    align-items: start;
    padding-block: clamp(2.2rem, 4vw, 3.5rem) clamp(2.6rem, 4vw, 4rem);
}

.cvq-hero h1 {
    font-size: clamp(2.15rem, 4.05vw, 3.85rem);
    line-height: 1.03;
}

.cvq-product {
    transform: translateY(0.35rem) scale(1.035);
    transform-origin: top right;
    box-shadow: 0 30px 72px rgba(6, 43, 120, 0.16);
}

.cvq-product__bar {
    min-height: 3.25rem;
}

.cvq-panel {
    min-height: 9.25rem;
}

@media (max-width: 980px) {
    .cvq-product { transform: none; }
}

/* --- Premium hero dashboard mockup -------------------------------------- */
.cvq-product--premium {
    background: #ffffff;
    border-color: #dbe5f2;
}

.cvq-window-dots {
    display: inline-flex;
    gap: 0.55rem;
}

.cvq-live-pill {
    margin-left: auto;
    padding: 0.32rem 0.65rem;
    border-radius: 999px;
    background: rgba(22, 184, 243, 0.12);
    color: #062b78;
    font-size: 0.75rem;
    font-weight: 800;
}

.cvq-dashboard {
    padding: 1rem;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.cvq-dashboard__top {
    display: grid;
    grid-template-columns: 1.1fr 0.95fr 0.95fr;
    gap: 0.75rem;
}

.cvq-stat-card {
    min-height: 7.3rem;
    padding: 1rem;
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    background: #fff;
}

.cvq-stat-card span,
.cvq-panel-head span,
.cvq-action-strip span {
    color: #ef1d2d;
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cvq-stat-card strong {
    display: block;
    margin-top: 0.45rem;
    color: #062b78;
    font-size: 2.35rem;
    line-height: 1;
}

.cvq-stat-card small {
    display: block;
    margin-top: 0.45rem;
    color: #667085;
    font-size: 0.78rem;
    line-height: 1.35;
}

.cvq-stat-card--main {
    background: linear-gradient(135deg, #ffffff 0%, #eef7ff 100%);
}

.cvq-dashboard__body {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.cvq-chart-panel,
.cvq-learners-panel {
    padding: 1rem;
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    background: #fff;
}

.cvq-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.cvq-panel-head strong {
    color: #172033;
    font-size: 0.98rem;
}

.cvq-panel-head span {
    color: #667085;
    font-size: 0.68rem;
}

.cvq-theme-row {
    display: grid;
    grid-template-columns: 5.8rem 1fr 2.2rem;
    align-items: center;
    gap: 0.7rem;
    min-height: 2rem;
    color: #667085;
    font-size: 0.84rem;
}

.cvq-theme-row div {
    height: 0.5rem;
    border-radius: 999px;
    background: #e8eef7;
    overflow: hidden;
}

.cvq-theme-row i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #062b78, #16b8f3);
}

.cvq-theme-row b {
    color: #172033;
    font-size: 0.78rem;
}

.cvq-learner {
    display: grid;
    grid-template-columns: 2.15rem 1fr auto;
    align-items: center;
    gap: 0.7rem;
    min-height: 3.1rem;
    border-top: 1px solid #edf1f7;
}

.cvq-learner:first-of-type {
    border-top: 0;
}

.cvq-learner > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: #eef7ff;
    color: #062b78;
    font-size: 0.72rem;
    font-weight: 850;
}

.cvq-learner strong,
.cvq-learner small {
    display: block;
}

.cvq-learner strong {
    color: #172033;
    font-size: 0.86rem;
}

.cvq-learner small {
    color: #667085;
    font-size: 0.76rem;
}

.cvq-learner em {
    color: #062b78;
    font-size: 0.82rem;
    font-style: normal;
    font-weight: 850;
}

.cvq-action-strip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1px solid rgba(239, 29, 45, 0.16);
    border-radius: 8px;
    background: rgba(239, 29, 45, 0.055);
}

.cvq-action-strip strong {
    color: #172033;
    font-size: 0.88rem;
}

@media (max-width: 1180px) {
    .cvq-dashboard__top,
    .cvq-dashboard__body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .cvq-dashboard__top {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cvq-dashboard__body {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 720px) {
    .cvq-dashboard__top,
    .cvq-dashboard__body {
        grid-template-columns: 1fr;
    }

    .cvq-action-strip {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* --- Parallel pass: proof and dashboard tabs ---------------------------- */
.cvq-microproof {
    margin: 0.8rem 0 0;
    color: #062b78;
    font-size: 0.9rem;
    font-weight: 750;
}

.cvq-dashboard-tabs {
    display: inline-flex;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
    padding: 0.25rem;
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    background: #fff;
}

.cvq-dashboard-tabs span {
    display: inline-flex;
    align-items: center;
    min-height: 1.95rem;
    padding: 0 0.75rem;
    border-radius: 6px;
    color: #667085;
    font-size: 0.75rem;
    font-weight: 800;
}

.cvq-dashboard-tabs span.is-active {
    background: #062b78;
    color: #fff;
}

.cvq-proofband {
    display: grid;
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
    gap: 1rem;
    align-items: stretch;
    padding-block: 0 2.4rem;
}

.cvq-proofband__intro,
.cvq-proofband__items > div {
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    background: #fff;
}

.cvq-proofband__intro {
    padding: 1.2rem;
    background: linear-gradient(135deg, #ffffff 0%, #eef7ff 100%);
}

.cvq-proofband__intro span {
    display: block;
    color: #ef1d2d;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cvq-proofband__intro strong {
    display: block;
    margin-top: 0.65rem;
    color: #172033;
    font-size: 1.05rem;
    line-height: 1.35;
}

.cvq-proofband__items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.cvq-proofband__items > div {
    padding: 1rem;
}

.cvq-proofband__items strong,
.cvq-proofband__items span {
    display: block;
}

.cvq-proofband__items strong {
    color: #062b78;
    font-size: 0.92rem;
    line-height: 1.25;
}

.cvq-proofband__items span {
    margin-top: 0.45rem;
    color: #667085;
    font-size: 0.8rem;
    line-height: 1.35;
}

@media (max-width: 1040px) {
    .cvq-proofband {
        grid-template-columns: 1fr;
    }

    .cvq-proofband__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .cvq-dashboard-tabs {
        width: 100%;
        overflow-x: auto;
    }

    .cvq-dashboard-tabs span {
        white-space: nowrap;
    }

    .cvq-proofband__items {
        grid-template-columns: 1fr;
    }
}

/* --- Product-like dashboard pass ---------------------------------------- */
.cvq-product--workspace {
    overflow: hidden;
}

.cvq-appshot {
    display: grid;
    grid-template-columns: 8.7rem minmax(0, 1fr);
    min-height: 27rem;
    background: #f7faff;
}

.cvq-appshot__side {
    display: flex;
    flex-direction: column;
    gap: 0.52rem;
    padding: 1rem 0.8rem;
    border-right: 1px solid #dfe6f1;
    background: #062b78;
    color: #fff;
}

.cvq-side-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 8px;
    background: #fff;
    color: #062b78;
    font-size: 0.72rem;
    font-weight: 900;
}

.cvq-appshot__side b {
    margin: 0.15rem 0 0.5rem;
    font-size: 0.78rem;
    line-height: 1.25;
}

.cvq-appshot__side i {
    display: block;
    padding: 0.54rem 0.58rem;
    border-radius: 7px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 800;
}

.cvq-appshot__side i.is-active {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.cvq-appshot__main {
    min-width: 0;
    padding: 0.9rem;
}

.cvq-appshot__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.cvq-appshot__toolbar span,
.cvq-kpi-row span,
.cvq-focus-score span {
    display: block;
    color: #ef1d2d;
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cvq-appshot__toolbar strong {
    display: block;
    margin-top: 0.16rem;
    color: #172033;
    font-size: 1.02rem;
    line-height: 1.2;
}

.cvq-filter-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.42rem;
}

.cvq-filter-row span {
    padding: 0.42rem 0.56rem;
    border: 1px solid #dfe6f1;
    border-radius: 7px;
    background: #fff;
    color: #667085;
    font-size: 0.64rem;
    letter-spacing: 0;
    text-transform: none;
}

.cvq-kpi-row {
    display: grid;
    grid-template-columns: 1.08fr 0.82fr 0.82fr;
    gap: 0.55rem;
    margin-bottom: 0.65rem;
}

.cvq-kpi-row article,
.cvq-cohort-table,
.cvq-focus-panel {
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(6, 43, 120, 0.06);
}

.cvq-kpi-row article {
    min-height: 5.8rem;
    padding: 0.78rem;
}

.cvq-kpi-row strong {
    display: block;
    margin-top: 0.28rem;
    color: #062b78;
    font-size: 1.72rem;
    line-height: 1;
}

.cvq-kpi-row small {
    display: block;
    margin-top: 0.32rem;
    color: #667085;
    font-size: 0.72rem;
    line-height: 1.2;
}

.cvq-appshot__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.78fr);
    gap: 0.65rem;
}

.cvq-cohort-table,
.cvq-focus-panel {
    padding: 0.82rem;
}

.cvq-table-head {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.46rem;
}

.cvq-table-head strong,
.cvq-panel-head strong {
    color: #172033;
    font-size: 0.84rem;
}

.cvq-table-head span {
    color: #667085;
    font-size: 0.68rem;
    font-weight: 750;
}

.cvq-table-row {
    display: grid;
    grid-template-columns: 2rem minmax(4.2rem, 1fr) 4.5rem minmax(3.8rem, 0.95fr) 4rem;
    align-items: center;
    gap: 0.52rem;
    min-height: 2.72rem;
    border-top: 1px solid #edf1f7;
}

.cvq-table-row > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.78rem;
    height: 1.78rem;
    border-radius: 7px;
    background: #eef7ff;
    color: #062b78;
    font-size: 0.64rem;
    font-weight: 900;
}

.cvq-table-row strong {
    color: #172033;
    font-size: 0.76rem;
}

.cvq-table-row em {
    color: #667085;
    font-size: 0.7rem;
    font-style: normal;
}

.cvq-table-row div {
    height: 0.42rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e8eef7;
}

.cvq-table-row div i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #062b78, #16b8f3);
}

.cvq-table-row b {
    display: inline-flex;
    justify-content: center;
    padding: 0.24rem 0.38rem;
    border-radius: 999px;
    background: rgba(239, 29, 45, 0.1);
    color: #bf1523;
    font-size: 0.62rem;
    line-height: 1;
}

.cvq-table-row b.is-ok {
    background: rgba(22, 184, 243, 0.12);
    color: #062b78;
}

.cvq-focus-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cvq-focus-score {
    margin: 0.1rem 0 0.72rem;
    padding: 0.76rem;
    border-radius: 8px;
    background: linear-gradient(135deg, #eef7ff 0%, #ffffff 100%);
}

.cvq-focus-score strong {
    display: block;
    margin-top: 0.25rem;
    color: #062b78;
    font-size: 1.08rem;
}

.cvq-focus-score small {
    color: #667085;
    font-size: 0.72rem;
}

.cvq-focus-panel ul {
    display: grid;
    gap: 0.44rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cvq-focus-panel li {
    position: relative;
    padding-left: 0.9rem;
    color: #172033;
    font-size: 0.73rem;
    line-height: 1.35;
}

.cvq-focus-panel li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.48em;
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 50%;
    background: #16b8f3;
}

@media (max-width: 1180px) {
    .cvq-appshot {
        grid-template-columns: 7.4rem minmax(0, 1fr);
    }

    .cvq-appshot__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px) {
    .cvq-appshot {
        grid-template-columns: 8.7rem minmax(0, 1fr);
    }

    .cvq-appshot__grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    }
}

@media (max-width: 760px) {
    .cvq-appshot {
        grid-template-columns: 1fr;
    }

    .cvq-appshot__side {
        display: none;
    }

    .cvq-appshot__toolbar,
    .cvq-table-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .cvq-filter-row {
        justify-content: flex-start;
    }

    .cvq-kpi-row,
    .cvq-appshot__grid {
        grid-template-columns: 1fr;
    }

    .cvq-table-row {
        grid-template-columns: 2rem minmax(0, 1fr) 4rem;
    }

    .cvq-table-row em,
    .cvq-table-row div {
        display: none;
    }
}

/* --- Decision band: who / why / outcome --------------------------------- */
.cvq-decisionband {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding-block: 0 2.6rem;
}

.cvq-decisionband article {
    position: relative;
    min-height: 13.8rem;
    padding: 1.35rem 1.25rem 1.25rem;
    border: 1px solid #dfe6f1;
    background: rgba(255, 255, 255, 0.88);
}

.cvq-decisionband article + article {
    border-left: 0;
}

.cvq-decisionband article:first-child {
    border-radius: 8px 0 0 8px;
}

.cvq-decisionband article:last-child {
    border-radius: 0 8px 8px 0;
}

.cvq-decisionband article::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: #062b78;
}

.cvq-decisionband article:nth-child(2)::before {
    background: #16b8f3;
}

.cvq-decisionband article:nth-child(3)::before {
    background: #ef1d2d;
}

.cvq-decisionband span {
    display: block;
    color: #ef1d2d;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cvq-decisionband strong {
    display: block;
    margin-top: 0.7rem;
    color: #172033;
    font-size: 1.1rem;
    line-height: 1.28;
}

.cvq-decisionband p {
    margin: 0.7rem 0 0;
    color: #667085;
    font-size: 0.88rem;
    line-height: 1.48;
}

.cvq-decisionband__result {
    background: linear-gradient(135deg, #ffffff 0%, #fff5f6 100%);
}

.cvq-decisionband a {
    display: inline-flex;
    align-items: center;
    margin-top: 1rem;
    color: #062b78;
    font-size: 0.88rem;
    font-weight: 850;
    text-decoration: none;
}

.cvq-decisionband a::after {
    content: ">";
    margin-left: 0.42rem;
    color: #16b8f3;
}

@media (max-width: 900px) {
    .cvq-decisionband {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .cvq-decisionband article,
    .cvq-decisionband article + article,
    .cvq-decisionband article:first-child,
    .cvq-decisionband article:last-child {
        border: 1px solid #dfe6f1;
        border-radius: 8px;
    }
}

/* --- Visual hierarchy polish -------------------------------------------- */
@media (min-width: 981px) {
    .cvq-hero {
        grid-template-columns: minmax(0, 0.92fr) minmax(31rem, 1fr);
        gap: clamp(2.2rem, 4.8vw, 5.2rem);
        align-items: center;
    }
}

.cvq-product--workspace {
    border-color: rgba(6, 43, 120, 0.12);
    box-shadow: 0 24px 70px rgba(6, 43, 120, 0.12);
}

.cvq-appshot {
    min-height: 25.1rem;
}

.cvq-appshot__side {
    padding-block: 0.92rem;
}

.cvq-appshot__main {
    padding: 0.82rem;
}

.cvq-kpi-row article {
    min-height: 5.2rem;
}

.cvq-table-row {
    min-height: 2.52rem;
}

.cvq-action-strip {
    padding: 0.72rem 0.9rem;
}

.cvq-decisionband {
    gap: 1rem;
    padding-block: 0.35rem 3rem;
}

.cvq-decisionband article,
.cvq-decisionband article + article,
.cvq-decisionband article:first-child,
.cvq-decisionband article:last-child {
    min-height: 12.7rem;
    padding: 1.5rem;
    border: 1px solid rgba(6, 43, 120, 0.11);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 42px rgba(6, 43, 120, 0.055);
}

.cvq-decisionband article::before {
    left: 1.5rem;
    top: 0;
    width: 3rem;
    height: 3px;
    border-radius: 0 0 999px 999px;
}

.cvq-decisionband span {
    color: #062b78;
}

.cvq-decisionband strong {
    font-size: 1.16rem;
}

.cvq-decisionband__result {
    background: linear-gradient(135deg, #ffffff 0%, #fff8f9 100%) !important;
}

@media (max-width: 760px) {
    .cvq-appshot {
        min-height: auto;
    }

    .cvq-decisionband article,
    .cvq-decisionband article + article,
    .cvq-decisionband article:first-child,
    .cvq-decisionband article:last-child {
        min-height: auto;
        padding: 1.25rem;
    }
}

/* --- Candidate mobile experience ---------------------------------------- */
.cvq-mobile-experience {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(22rem, 0.85fr);
    gap: clamp(2rem, 4vw, 4.4rem);
    align-items: center;
    padding-block: 3.2rem;
    border-block: 1px solid rgba(6, 43, 120, 0.08);
}

.cvq-mobile-copy {
    max-width: 36rem;
}

.cvq-mobile-copy h2 {
    margin: 0.9rem 0 0;
    color: #172033;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.08;
}

.cvq-mobile-copy p:not(.v2-eyebrow) {
    margin: 1rem 0 0;
    color: #667085;
    font-size: 1.04rem;
    line-height: 1.65;
}

.cvq-mobile-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.cvq-mobile-points span {
    display: inline-flex;
    align-items: center;
    min-height: 2.3rem;
    padding: 0 0.78rem;
    border: 1px solid rgba(6, 43, 120, 0.1);
    border-radius: 8px;
    background: #fff;
    color: #062b78;
    font-size: 0.84rem;
    font-weight: 800;
}

.cvq-phone-demo {
    position: relative;
    display: flex;
    justify-content: center;
    min-height: 26rem;
}

.cvq-phone {
    position: relative;
    z-index: 2;
    width: min(18.2rem, 100%);
    padding: 0.85rem;
    border: 8px solid #172033;
    border-radius: 2.1rem;
    background: #f7faff;
    box-shadow: 0 28px 70px rgba(6, 43, 120, 0.2);
}

.cvq-phone::before {
    content: "";
    position: absolute;
    top: 0.45rem;
    left: 50%;
    width: 4.2rem;
    height: 0.32rem;
    border-radius: 999px;
    background: #172033;
    transform: translateX(-50%);
}

.cvq-phone__top {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 1.35rem 0.2rem 0.85rem;
}

.cvq-phone__top span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: #062b78;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
}

.cvq-phone__top strong {
    color: #172033;
    font-size: 0.94rem;
}

.cvq-phone__score,
.cvq-phone__card {
    border: 1px solid #dfe6f1;
    border-radius: 12px;
    background: #fff;
}

.cvq-phone__score {
    padding: 1rem;
    background: linear-gradient(135deg, #062b78 0%, #0b4aa5 100%);
    color: #fff;
}

.cvq-phone__score span,
.cvq-phone__card b {
    display: block;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cvq-phone__score strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 2.35rem;
    line-height: 1;
}

.cvq-phone__score small {
    display: block;
    margin-top: 0.42rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.76rem;
}

.cvq-phone__card {
    margin-top: 0.75rem;
    padding: 0.9rem;
}

.cvq-phone__card b {
    color: #ef1d2d;
}

.cvq-phone__card span {
    display: block;
    margin-top: 0.4rem;
    color: #172033;
    font-size: 0.9rem;
    font-weight: 850;
    line-height: 1.25;
}

.cvq-phone__card i {
    display: block;
    width: 78%;
    height: 0.42rem;
    margin-top: 0.9rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #062b78, #16b8f3);
}

.cvq-phone__list {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.85rem;
}

.cvq-phone__list span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #667085;
    font-size: 0.76rem;
}

.cvq-phone__list b {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: #16b8f3;
}

.cvq-mobile-linkcard {
    position: absolute;
    right: 0;
    bottom: 2.1rem;
    z-index: 3;
    width: 15.2rem;
    padding: 1rem;
    border: 1px solid rgba(6, 43, 120, 0.12);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(6, 43, 120, 0.13);
}

.cvq-mobile-linkcard span {
    color: #ef1d2d;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cvq-mobile-linkcard strong {
    display: block;
    margin-top: 0.45rem;
    color: #172033;
    font-size: 0.92rem;
    line-height: 1.3;
}

@media (max-width: 920px) {
    .cvq-mobile-experience {
        grid-template-columns: 1fr;
    }

    .cvq-phone-demo {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .cvq-mobile-experience {
        padding-block: 2.4rem;
    }

    .cvq-phone-demo {
        min-height: auto;
    }

    .cvq-phone {
        width: 100%;
        max-width: 18.2rem;
    }

    .cvq-mobile-linkcard {
        position: static;
        align-self: end;
        width: min(100%, 18.2rem);
        margin: 1rem 0 0;
    }
}

/* --- Hero mobile app preview -------------------------------------------- */
.cvq-product--workspace {
    position: relative;
}

.cvq-hero-phone {
    position: absolute;
    right: -1.15rem;
    bottom: -1.2rem;
    z-index: 5;
    width: 9.8rem;
    padding: 0.62rem;
    border: 5px solid #172033;
    border-radius: 1.45rem;
    background: #f7faff;
    box-shadow: 0 24px 50px rgba(6, 43, 120, 0.22);
}

.cvq-hero-phone::before {
    content: "";
    display: block;
    width: 2.7rem;
    height: 0.24rem;
    margin: 0 auto 0.48rem;
    border-radius: 999px;
    background: #172033;
}

.cvq-hero-phone__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    padding: 0.52rem;
    border-radius: 0.9rem;
    background: #062b78;
    color: #fff;
}

.cvq-hero-phone__top span {
    font-size: 0.58rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cvq-hero-phone__top strong {
    font-size: 1.12rem;
    line-height: 1;
}

.cvq-hero-phone__body {
    margin-top: 0.5rem;
    padding: 0.58rem;
    border: 1px solid #dfe6f1;
    border-radius: 0.9rem;
    background: #fff;
}

.cvq-hero-phone__body b,
.cvq-hero-phone__body span,
.cvq-hero-phone small {
    display: block;
}

.cvq-hero-phone__body b {
    color: #ef1d2d;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cvq-hero-phone__body span {
    margin-top: 0.28rem;
    color: #172033;
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.2;
}

.cvq-hero-phone__body i {
    display: block;
    width: 82%;
    height: 0.34rem;
    margin-top: 0.58rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #062b78, #16b8f3);
}

.cvq-hero-phone small {
    margin-top: 0.48rem;
    color: #062b78;
    font-size: 0.62rem;
    font-weight: 850;
    text-align: center;
}

@media (max-width: 1180px) {
    .cvq-hero-phone {
        right: 0.8rem;
        bottom: 0.8rem;
    }
}

@media (max-width: 980px) {
    .cvq-hero-phone {
        right: 1rem;
        bottom: -1.1rem;
    }
}

@media (max-width: 700px) {
    .cvq-hero-phone {
        position: relative;
        right: auto;
        bottom: auto;
        width: min(100%, 14rem);
        margin: 0.9rem auto 1rem;
    }
}

/* --- Full-page landing hero --------------------------------------------- */
.cvq-hero {
    min-height: calc(100vh - 5rem);
    padding-block: clamp(3.2rem, 7vh, 5.8rem) clamp(2.4rem, 5vh, 4.5rem);
}

.cvq-product--workspace {
    overflow: visible !important;
}

.cvq-hero-phone {
    right: -2.1rem;
    bottom: -1.75rem;
    width: 11.2rem;
}

.cvq-decisionband {
    margin-top: -0.3rem;
}

@media (min-width: 1181px) {
    .cvq-hero-phone {
        right: -2.8rem;
        bottom: -1.95rem;
    }
}

@media (max-width: 1180px) {
    .cvq-hero {
        min-height: auto;
    }

    .cvq-hero-phone {
        right: 1rem;
        bottom: -1.5rem;
        width: 10.4rem;
    }
}

@media (max-width: 700px) {
    .cvq-hero {
        padding-block: 2.5rem;
    }

    .cvq-hero-phone {
        width: min(100%, 14rem);
    }
}

/* --- Realistic mobile device mockup ------------------------------------- */
.cvq-phone,
.cvq-hero-phone {
    display: none;
}

.cvq-device {
    position: relative;
    z-index: 5;
    width: 17.6rem;
    padding: 0.52rem;
    border-radius: 2.35rem;
    background: linear-gradient(145deg, #0e1728, #263247);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 30px 70px rgba(6, 43, 120, 0.22);
}

.cvq-device::before {
    content: "";
    position: absolute;
    inset: 0.28rem;
    border-radius: 2.05rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.cvq-device__button {
    position: absolute;
    display: block;
    width: 0.18rem;
    border-radius: 999px;
    background: #182235;
}

.cvq-device__button--left {
    left: -0.14rem;
    top: 5.1rem;
    height: 3.1rem;
}

.cvq-device__button--right {
    right: -0.14rem;
    top: 6.7rem;
    height: 4.25rem;
}

.cvq-device__screen {
    position: relative;
    overflow: hidden;
    min-height: 34.2rem;
    padding: 1rem;
    border-radius: 1.86rem;
    background:
        radial-gradient(circle at 90% 0%, rgba(22, 184, 243, 0.16), transparent 34%),
        linear-gradient(180deg, #f9fbff 0%, #eef4fb 100%);
}

.cvq-device__island {
    position: absolute;
    top: 0.55rem;
    left: 50%;
    width: 5.2rem;
    height: 1.25rem;
    border-radius: 999px;
    background: #111827;
    transform: translateX(-50%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.cvq-device__status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.1rem 0.42rem 1.55rem;
    color: #172033;
    font-size: 0.68rem;
    font-weight: 850;
}

.cvq-device__status b {
    color: #062b78;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

.cvq-device__appbar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.cvq-device__appbar span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 0.72rem;
    background: #062b78;
    color: #fff;
    font-size: 0.74rem;
    font-weight: 900;
}

.cvq-device__appbar strong {
    color: #172033;
    font-size: 0.96rem;
}

.cvq-device__score {
    padding: 1rem;
    border-radius: 1.05rem;
    background: linear-gradient(135deg, #062b78 0%, #0d55b6 100%);
    color: #fff;
    box-shadow: 0 16px 34px rgba(6, 43, 120, 0.22);
}

.cvq-device__score span,
.cvq-device__quiz b {
    display: block;
    font-size: 0.66rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cvq-device__score strong {
    display: block;
    margin-top: 0.18rem;
    font-size: 2.6rem;
    line-height: 1;
}

.cvq-device__score small {
    display: block;
    margin-top: 0.45rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.72rem;
}

.cvq-device__quiz {
    margin-top: 0.85rem;
    padding: 0.9rem;
    border: 1px solid #dfe6f1;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.92);
}

.cvq-device__quiz b {
    color: #ef1d2d;
}

.cvq-device__quiz span {
    display: block;
    margin-top: 0.38rem;
    color: #172033;
    font-size: 0.86rem;
    font-weight: 850;
    line-height: 1.25;
}

.cvq-device__quiz i {
    display: block;
    width: 84%;
    height: 0.42rem;
    margin-top: 0.82rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #062b78, #16b8f3);
}

.cvq-device__list {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.cvq-device__list span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #667085;
    font-size: 0.73rem;
}

.cvq-device__list b {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: #16b8f3;
}

.cvq-device__sync {
    margin-top: 0.72rem;
    padding: 0.58rem;
    border-radius: 0.9rem;
    background: rgba(6, 43, 120, 0.08);
    color: #062b78;
    font-size: 0.68rem;
    font-weight: 850;
    text-align: center;
}

.cvq-device--hero {
    position: absolute;
    right: -3.2rem;
    bottom: -2.15rem;
    width: 12.6rem;
    padding: 0.38rem;
    border-radius: 1.72rem;
}

.cvq-device--hero .cvq-device__screen {
    min-height: 17.8rem;
    padding: 0.62rem;
    border-radius: 1.38rem;
}

.cvq-device--hero .cvq-device__island {
    top: 0.34rem;
    width: 3.45rem;
    height: 0.72rem;
}

.cvq-device--hero .cvq-device__status {
    padding: 0 0.25rem 1rem;
    font-size: 0.52rem;
}

.cvq-device--hero .cvq-device__appbar {
    margin-bottom: 0.52rem;
}

.cvq-device--hero .cvq-device__appbar span {
    width: 1.45rem;
    height: 1.45rem;
    border-radius: 0.5rem;
    font-size: 0.55rem;
}

.cvq-device--hero .cvq-device__appbar strong {
    font-size: 0.7rem;
}

.cvq-device--hero .cvq-device__score {
    padding: 0.66rem;
    border-radius: 0.78rem;
}

.cvq-device--hero .cvq-device__score span,
.cvq-device--hero .cvq-device__quiz b {
    font-size: 0.48rem;
}

.cvq-device--hero .cvq-device__score strong {
    font-size: 1.62rem;
}

.cvq-device--hero .cvq-device__score small,
.cvq-device--hero .cvq-device__quiz span,
.cvq-device--hero .cvq-device__sync {
    font-size: 0.56rem;
}

.cvq-device--hero .cvq-device__quiz {
    margin-top: 0.54rem;
    padding: 0.58rem;
    border-radius: 0.72rem;
}

.cvq-device--hero .cvq-device__quiz i {
    height: 0.3rem;
    margin-top: 0.48rem;
}

.cvq-device--section {
    transform: rotate(-1.5deg);
}

@media (max-width: 1180px) {
    .cvq-device--hero {
        right: 0.8rem;
        bottom: -1.35rem;
        width: 11.4rem;
    }
}

@media (max-width: 700px) {
    .cvq-device--hero {
        position: relative;
        right: auto;
        bottom: auto;
        width: min(100%, 14rem);
        margin: 1rem auto 1rem;
    }
}

/* --- Hero product slides ------------------------------------------------- */
.cvq-product--slides {
    overflow: hidden !important;
}

.cvq-slide-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.cvq-slide-tabs {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    margin-left: 0.8rem;
    padding: 0.2rem;
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    background: #f7faff;
}

.cvq-slide-tabs label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.85rem;
    padding: 0 0.58rem;
    border-radius: 6px;
    color: #667085;
    font-size: 0.68rem;
    font-weight: 850;
    cursor: pointer;
    transition: background-color 160ms ease, color 160ms ease;
}

#cvq-slide-centre:checked ~ .cvq-product__bar label[for="cvq-slide-centre"],
#cvq-slide-mobile:checked ~ .cvq-product__bar label[for="cvq-slide-mobile"],
#cvq-slide-reports:checked ~ .cvq-product__bar label[for="cvq-slide-reports"] {
    background: #062b78;
    color: #fff;
}

.cvq-slide-stage {
    position: relative;
    min-height: 27.4rem;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.cvq-slide {
    display: none;
    min-height: 27.4rem;
}

#cvq-slide-centre:checked ~ .cvq-slide-stage .cvq-slide--centre {
    display: block;
}

#cvq-slide-mobile:checked ~ .cvq-slide-stage .cvq-slide--mobile,
#cvq-slide-reports:checked ~ .cvq-slide-stage .cvq-slide--reports {
    display: grid;
}

.cvq-slide--mobile {
    grid-template-columns: minmax(0, 0.8fr) minmax(14rem, 0.72fr);
    gap: 1rem;
    align-items: center;
    padding: 1.3rem 1.45rem;
}

.cvq-slide-copy {
    max-width: 19rem;
}

.cvq-slide-copy span,
.cvq-report-board__head span,
.cvq-report-grid span,
.cvq-report-export span {
    display: block;
    color: #ef1d2d;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cvq-slide-copy strong,
.cvq-report-board__head strong {
    display: block;
    margin-top: 0.55rem;
    color: #172033;
    font-size: 1.45rem;
    line-height: 1.12;
}

.cvq-slide-copy p {
    margin: 0.75rem 0 0;
    color: #667085;
    font-size: 0.9rem;
    line-height: 1.5;
}

.cvq-slide-copy ul {
    display: grid;
    gap: 0.48rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.cvq-slide-copy li {
    position: relative;
    padding-left: 0.9rem;
    color: #172033;
    font-size: 0.82rem;
    font-weight: 750;
}

.cvq-slide-copy li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.52em;
    width: 0.34rem;
    height: 0.34rem;
    border-radius: 50%;
    background: #16b8f3;
}

.cvq-device--slide {
    justify-self: center;
    width: 15.2rem;
    transform: rotate(1.4deg);
}

.cvq-device--slide .cvq-device__screen {
    min-height: 27.1rem;
}

.cvq-slide--reports {
    align-items: center;
    padding: 1.35rem;
}

.cvq-report-board {
    width: 100%;
    padding: 1rem;
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(6, 43, 120, 0.07);
}

.cvq-report-board__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid #edf1f7;
}

.cvq-report-board__head strong {
    max-width: 19rem;
    margin-top: 0;
    font-size: 1.1rem;
}

.cvq-report-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    margin-top: 0.8rem;
}

.cvq-report-grid article {
    min-height: 6.6rem;
    padding: 0.9rem;
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    background: #f8fbff;
}

.cvq-report-grid strong {
    display: block;
    margin-top: 0.4rem;
    color: #062b78;
    font-size: 1.6rem;
    line-height: 1.05;
}

.cvq-report-grid small {
    display: block;
    margin-top: 0.4rem;
    color: #667085;
    font-size: 0.74rem;
}

.cvq-report-lines {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.9rem;
}

.cvq-report-lines div {
    display: grid;
    grid-template-columns: 6.4rem minmax(0, 1fr) 5.8rem;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid #edf1f7;
    border-radius: 8px;
}

.cvq-report-lines span {
    color: #172033;
    font-size: 0.82rem;
    font-weight: 800;
}

.cvq-report-lines i {
    display: block;
    height: 0.5rem;
    border-radius: 999px;
    background: linear-gradient(90deg, #062b78, #16b8f3);
}

.cvq-report-lines b {
    color: #667085;
    font-size: 0.74rem;
}

.cvq-report-export {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.9rem;
    padding: 0.9rem;
    border: 1px solid rgba(239, 29, 45, 0.16);
    border-radius: 8px;
    background: rgba(239, 29, 45, 0.055);
}

.cvq-report-export strong {
    color: #172033;
    font-size: 0.9rem;
}

@media (max-width: 1180px) {
    .cvq-slide-tabs {
        order: 10;
        width: 100%;
        margin: 0.45rem 0 0;
    }
}

@media (max-width: 760px) {
    .cvq-slide-stage,
    .cvq-slide {
        min-height: auto;
    }

    .cvq-slide--mobile,
    .cvq-slide--reports {
        grid-template-columns: 1fr;
    }

    .cvq-slide-tabs {
        overflow-x: auto;
    }

    .cvq-slide-tabs label {
        white-space: nowrap;
    }

    .cvq-report-grid,
    .cvq-report-lines div {
        grid-template-columns: 1fr;
    }

    .cvq-report-export {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* --- Product ecosystem view: show all slides at once -------------------- */
.cvq-hero {
    min-height: auto;
    padding-block: clamp(3rem, 5.5vh, 4.3rem) clamp(2.2rem, 4vh, 3.4rem);
}

@media (min-width: 981px) {
    .cvq-hero {
        grid-template-columns: minmax(0, 0.92fr) minmax(35rem, 1.08fr);
    }
}

.cvq-product--slides {
    overflow: visible !important;
}

.cvq-product--slides .cvq-product__bar {
    min-height: 3.05rem;
}

.cvq-product--slides .cvq-product__bar > strong {
    font-size: 0.98rem;
}

.cvq-slide-tabs {
    display: none;
}

.cvq-product--slides .cvq-live-pill {
    margin-left: auto;
}

.cvq-slide-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(13.6rem, 0.72fr);
    grid-template-rows: minmax(13.4rem, auto) minmax(10.4rem, auto);
    gap: 0.75rem;
    min-height: 0;
    padding: 0.75rem;
    background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.cvq-slide,
#cvq-slide-centre:checked ~ .cvq-slide-stage .cvq-slide--centre,
#cvq-slide-mobile:checked ~ .cvq-slide-stage .cvq-slide--mobile,
#cvq-slide-reports:checked ~ .cvq-slide-stage .cvq-slide--reports {
    display: block;
    min-height: 0;
}

.cvq-slide {
    overflow: hidden;
    border: 1px solid #dfe6f1;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(6, 43, 120, 0.06);
}

.cvq-slide--centre {
    grid-row: 1 / span 2;
}

.cvq-slide--mobile {
    display: grid !important;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 0.65rem;
    padding: 0.85rem;
    background: linear-gradient(145deg, #ffffff 0%, #eef7ff 100%);
}

.cvq-slide--reports {
    display: block !important;
    padding: 0.85rem;
}

.cvq-slide--centre .cvq-appshot {
    grid-template-columns: 6.9rem minmax(0, 1fr);
    min-height: 24.5rem;
}

.cvq-slide--centre .cvq-appshot__side {
    padding: 0.8rem 0.65rem;
}

.cvq-slide--centre .cvq-appshot__side i {
    padding: 0.46rem 0.48rem;
    font-size: 0.62rem;
}

.cvq-slide--centre .cvq-appshot__main {
    padding: 0.72rem;
}

.cvq-slide--centre .cvq-kpi-row {
    gap: 0.5rem;
}

.cvq-slide--centre .cvq-kpi-row article {
    min-height: 4.85rem;
    padding: 0.65rem;
}

.cvq-slide--centre .cvq-kpi-row strong {
    font-size: 1.46rem;
}

.cvq-slide--centre .cvq-table-row {
    grid-template-columns: 1.8rem minmax(3.6rem, 1fr) 3.85rem minmax(2.8rem, 0.72fr);
    min-height: 2.28rem;
    gap: 0.42rem;
}

.cvq-slide--centre .cvq-table-row b {
    display: none;
}

.cvq-slide--centre .cvq-focus-panel {
    padding: 0.7rem;
}

.cvq-slide--centre .cvq-action-strip {
    padding: 0.65rem 0.75rem;
}

.cvq-slide-copy {
    max-width: none;
}

.cvq-slide-copy span {
    font-size: 0.58rem;
}

.cvq-slide-copy strong {
    margin-top: 0.35rem;
    font-size: 1rem;
    line-height: 1.18;
}

.cvq-slide-copy p {
    margin-top: 0.45rem;
    font-size: 0.74rem;
    line-height: 1.38;
}

.cvq-slide-copy ul {
    display: none;
}

.cvq-device--slide {
    width: 8.4rem;
    justify-self: center;
    padding: 0.28rem;
    border-radius: 1.25rem;
    transform: rotate(1.5deg);
}

.cvq-device--slide .cvq-device__screen {
    min-height: 12.9rem;
    padding: 0.45rem;
    border-radius: 0.98rem;
}

.cvq-device--slide .cvq-device__island {
    top: 0.26rem;
    width: 2.45rem;
    height: 0.52rem;
}

.cvq-device--slide .cvq-device__status {
    padding: 0 0.16rem 0.74rem;
    font-size: 0.44rem;
}

.cvq-device--slide .cvq-device__appbar {
    gap: 0.35rem;
    margin-bottom: 0.38rem;
}

.cvq-device--slide .cvq-device__appbar span {
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 0.42rem;
    font-size: 0.46rem;
}

.cvq-device--slide .cvq-device__appbar strong {
    font-size: 0.58rem;
}

.cvq-device--slide .cvq-device__score {
    padding: 0.48rem;
    border-radius: 0.62rem;
}

.cvq-device--slide .cvq-device__score span,
.cvq-device--slide .cvq-device__quiz b {
    font-size: 0.4rem;
}

.cvq-device--slide .cvq-device__score strong {
    font-size: 1.28rem;
}

.cvq-device--slide .cvq-device__score small,
.cvq-device--slide .cvq-device__quiz span,
.cvq-device--slide .cvq-device__list span {
    font-size: 0.46rem;
}

.cvq-device--slide .cvq-device__quiz {
    margin-top: 0.42rem;
    padding: 0.46rem;
    border-radius: 0.6rem;
}

.cvq-device--slide .cvq-device__quiz i {
    height: 0.25rem;
    margin-top: 0.4rem;
}

.cvq-device--slide .cvq-device__list {
    display: none;
}

.cvq-report-board {
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.cvq-report-board__head {
    display: block;
    padding-bottom: 0.55rem;
}

.cvq-report-board__head span {
    font-size: 0.58rem;
}

.cvq-report-board__head strong {
    margin-top: 0.35rem;
    font-size: 0.98rem;
    line-height: 1.18;
}

.cvq-report-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin-top: 0.6rem;
}

.cvq-report-grid article {
    min-height: 4.15rem;
    padding: 0.52rem;
}

.cvq-report-grid span {
    font-size: 0.48rem;
}

.cvq-report-grid strong {
    font-size: 1rem;
}

.cvq-report-grid small {
    font-size: 0.54rem;
}

.cvq-report-lines {
    gap: 0.42rem;
    margin-top: 0.55rem;
}

.cvq-report-lines div {
    grid-template-columns: 4.6rem minmax(0, 1fr);
    min-height: 1.8rem;
    padding: 0 0.5rem;
}

.cvq-report-lines span,
.cvq-report-lines b {
    font-size: 0.62rem;
}

.cvq-report-lines b {
    display: none;
}

.cvq-report-lines i {
    height: 0.38rem;
}

.cvq-report-export {
    margin-top: 0.55rem;
    padding: 0.62rem;
}

.cvq-report-export span {
    font-size: 0.52rem;
}

.cvq-report-export strong {
    font-size: 0.68rem;
}

.cvq-decisionband {
    margin-top: 0;
}

@media (max-width: 1180px) {
    .cvq-slide-stage {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .cvq-slide--centre {
        grid-row: auto;
    }

    .cvq-slide--mobile,
    .cvq-slide--reports {
        grid-template-columns: 1fr;
    }
}

/* --- Final first-screen composition fix --------------------------------- */
@media (min-width: 981px) {
    .cvq-hero {
        align-items: start !important;
        grid-template-columns: minmax(0, 0.86fr) minmax(34rem, 1fr) !important;
        gap: clamp(2rem, 3.8vw, 4rem);
        padding-block: clamp(1.5rem, 2.8vh, 2.4rem) 2rem !important;
    }

    .cvq-hero__content {
        align-self: start !important;
        padding-top: clamp(2rem, 7vh, 4.2rem);
    }

    .cvq-hero h1 {
        max-width: 36rem;
        font-size: clamp(2.55rem, 3.85vw, 3.8rem);
        line-height: 1.02;
    }

    .cvq-hero__lead {
        max-width: 33rem;
        margin-top: 0.95rem;
        font-size: 1rem;
        line-height: 1.55;
    }

    .cvq-hero__actions {
        margin-top: 1.15rem;
    }

    .cvq-microproof {
        margin-top: 0.72rem;
    }

    .cvq-proofline {
        gap: 0.85rem 1.25rem;
        margin-top: 0.82rem;
    }

    .cvq-product {
        align-self: start !important;
        transform: scale(0.84) !important;
        transform-origin: top right;
    }

    .cvq-slide-stage {
        grid-template-columns: minmax(0, 1.02fr) minmax(13.2rem, 0.7fr);
        grid-template-rows: minmax(11.8rem, auto) minmax(8.8rem, auto);
        gap: 0.64rem;
        padding: 0.64rem;
    }

    .cvq-slide--centre .cvq-appshot {
        min-height: 20.8rem;
    }

    .cvq-slide--centre .cvq-kpi-row article {
        min-height: 4.3rem;
    }

    .cvq-slide--centre .cvq-table-row {
        min-height: 1.9rem;
    }

    .cvq-slide--centre .cvq-action-strip {
        margin-top: 0.52rem;
    }
}