/* Landing « Facturation électronique » (app lead_magnet).
   Réécrit à partir des maquettes Claude Design (projet
   50d9a3b1-…, fichiers « Landing FE - Page 1/2 » desktop + mobile) et des
   tokens du design system Milou (colors_and_type.css). Classes `fe-`. */

.fe {
    /* Brand */
    --fe-primary: #5800FF;
    --fe-primary-strong: #470ABA;
    --fe-ink: #120034;
    --fe-accent: #FAAD13;
    /* Surfaces */
    --fe-bg: #F4F6FC;
    --fe-surface: #fff;
    --fe-border: #E8EAF1;
    --fe-border-strong: #C4CADE;
    --fe-divider: #F0F1F7;
    /* Violet tint */
    --fe-violet-bg: #EEEAFB;
    --fe-violet-border: #D8CFF7;
    --fe-violet-fg: #470ABA;
    --fe-violet-ink: #2A0A6E;
    /* Green */
    --fe-green: #1D7A3A;
    --fe-green-bg: #EAFBF1;
    --fe-green-border: #BFE8CD;
    --fe-green-ink: #12502A;
    /* Yellow */
    --fe-yellow: #FAAD13;
    --fe-yellow-bg: #FFF6DB;
    --fe-yellow-border: #F5E3AC;
    --fe-yellow-fg: #B26B00;
    --fe-yellow-ink: #5C4400;
    /* Text greys */
    --fe-t1: #2A2246;
    --fe-t2: #4A4466;
    --fe-t3: #6E7191;
    --fe-t4: #8B92AD;
    --fe-on-dark: #B4AECF;
    --fe-on-dark-muted: #8B84AC;
    /* Danger */
    --fe-danger: #D64545;
    --fe-danger-fg: #B23030;
    --fe-danger-bg: #FDF3F3;
    /* Elevation / radius */
    --fe-shadow-lg: 0 12px 32px -8px rgba(18, 0, 52, .12);

    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--fe-ink);
    background: #fff;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.fe *, .fe *::before, .fe *::after { box-sizing: border-box; }
.fe a { color: var(--fe-primary); text-decoration: none; }
.fe a:hover { color: var(--fe-primary-strong); text-decoration: underline; }

/* --- Wordmark --------------------------------------------------------- */
.fe-logo { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--fe-ink); }
.fe-logo-dot { color: var(--fe-accent); }

/* --- Header ----------------------------------------------------------- */
.fe-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 40px; background: #fff; position: sticky; top: 0; z-index: 30;
    border-bottom: 1px solid var(--fe-divider);
}
.fe-nav { display: flex; align-items: center; gap: 28px; font-size: 13px; font-weight: 500; }
.fe-nav a { color: var(--fe-ink); }
.fe-nav a:hover { color: var(--fe-primary-strong); }
.fe-burger { display: none; background: none; border: 0; padding: 6px; cursor: pointer; color: var(--fe-ink); }
/* Nav du header minimal (écrans funnel) : pas de burger, reste visible en mobile. */
.fe-nav-min { display: flex; align-items: center; gap: 18px; font-size: 12px; font-weight: 500; }
.fe-nav-min a { color: var(--fe-t2); }
.fe-nav-min a:hover { color: var(--fe-primary-strong); }

/* --- Buttons ---------------------------------------------------------- */
.fe-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 14px 24px; border-radius: 8px;
    font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1;
    border: 0; cursor: pointer; text-decoration: none; transition: background 160ms cubic-bezier(.2, 0, 0, 1);
}
.fe-btn:hover { text-decoration: none; }
/* `.fe` prefix bumps specificity above `.fe a` (0,1,1) so anchor buttons keep
   their white/violet text instead of inheriting the link colour. */
.fe .fe-btn--primary { background: var(--fe-primary); color: #fff; }
.fe .fe-btn--primary:hover { background: var(--fe-primary-strong); color: #fff; }
.fe .fe-btn--ghost { background: #fff; color: var(--fe-primary); border: 1px solid var(--fe-border-strong); }
.fe .fe-btn--ghost:hover { background: #E8E6FA; color: var(--fe-primary); }
/* Cotes communes aux boutons de nav ; couleurs par variante ci-dessous
   (la secondaire « Quelle est ma situation ? » reprend celles du ghost). */
.fe .fe-btn--nav, .fe .fe-btn--nav-ghost { padding: 10px 18px; min-height: 0; font-size: 13px; border-radius: 8px; }
.fe .fe-btn--nav { background: var(--fe-primary); color: #fff; }
.fe .fe-btn--nav:hover { background: var(--fe-primary-strong); color: #fff; }
.fe .fe-btn--nav-ghost { background: #fff; color: var(--fe-primary); border: 1px solid var(--fe-border-strong); }
.fe .fe-btn--nav-ghost:hover { background: #E8E6FA; color: var(--fe-primary); }
.fe-btn--block { width: 100%; }
.fe-btn--lg { font-size: 16px; padding: 16px 32px; }

/* --- Sections / layout ------------------------------------------------ */
.fe-wrap { max-width: 880px; margin: 0 auto; padding: 0 24px; }
.fe-section { padding: 64px 0; background: #fff; }
.fe-section--tint { background: var(--fe-bg); }
.fe-stack { display: flex; flex-direction: column; gap: 24px; }
.fe-h1 { font-size: 44px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.fe-h2 { font-size: 30px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.fe-lead { font-size: 19px; line-height: 28px; color: var(--fe-t2); margin: 0; }
.fe-body { font-size: 16px; line-height: 25px; color: var(--fe-t1); margin: 0; }
.fe-micro { font-size: 13px; color: var(--fe-t3); margin: 0; }

/* --- Hero ------------------------------------------------------------- */
.fe-hero { background: var(--fe-bg); padding: 72px 24px 64px; text-align: center; }
.fe-hero-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
/* fe-hero-copy porte le même layout que l'inner : sans visuel (pages sans
   hero_image), le rendu est identique au hero centré historique. */
.fe-hero-copy { display: flex; flex-direction: column; align-items: center; gap: 20px; }
/* Variante avec visuel (hero_image dans PROFESSION_PAGES) : texte à gauche,
   image à droite ; repasse en colonne centrée au breakpoint mobile. */
.fe-hero-inner--split { max-width: 1040px; flex-direction: row; align-items: center; gap: 48px; text-align: left; }
.fe-hero-inner--split .fe-hero-copy { flex: 1 1 0; align-items: flex-start; }
.fe-hero-inner--split .fe-hero-actions { justify-content: flex-start; }
.fe-hero-img { flex: 0 1 400px; min-width: 0; }
.fe-hero-img img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: var(--fe-shadow-lg); }
.fe-pill {
    background: var(--fe-violet-bg); color: var(--fe-violet-fg);
    font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 9999px;
}
.fe-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* --- Video ------------------------------------------------------------ */
.fe-video-wrap { position: relative; width: 100%; max-width: 880px; margin: 0 auto; }
.fe-video-player {
    display: block; width: 100%; aspect-ratio: 16/9;
    background: var(--fe-ink); border-radius: 16px; overflow: hidden; object-fit: cover;
}
/* Overlay play brandé (cercle violet + triangle blanc, cf. tutorial-video-card
   de l'app) : couvre le poster, masqué au 1er play (.is-hidden). */
.fe-video-play-overlay {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: none; border: 0; padding: 0; cursor: pointer;
}
.fe-video-play-overlay.is-hidden { display: none; }
.fe-video-play-btn {
    width: 72px; height: 72px; border-radius: 9999px; background: rgba(88, 0, 255, .9);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--fe-shadow-lg); transition: background 160ms cubic-bezier(.2, 0, 0, 1);
}
.fe-video-play-overlay:hover .fe-video-play-btn { background: var(--fe-primary-strong); }
.fe-video-play-btn svg { margin-left: 4px; }

/* --- Cards grid ------------------------------------------------------- */
.fe-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.fe-card { background: var(--fe-bg); border-radius: 16px; padding: 24px; }
/* Carte cliquable (maillage interne des landings) : neutralise le style lien
   de `.fe a` — la spécificité (0,2,0) bat le sélecteur lien et son :hover. */
.fe .fe-card--link { text-decoration: none; color: inherit; }
.fe-card-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.fe-card-text { font-size: 14px; line-height: 21px; color: var(--fe-t2); margin: 0; }

/* --- Two dates -------------------------------------------------------- */
.fe-dates { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.fe-date { background: #fff; border: 1px solid var(--fe-border); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.fe-date--primary { border: 2px solid var(--fe-primary); }
.fe-date-badge { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 12px; border-radius: 9999px; align-self: flex-start; }
.fe-date-badge--primary { background: var(--fe-primary); color: #fff; }
.fe-date-badge--soft { background: var(--fe-violet-bg); color: var(--fe-violet-fg); }
.fe-date-title { font-size: 20px; font-weight: 700; }
.fe-date-text { font-size: 14px; line-height: 21px; color: var(--fe-t2); margin: 0; }
.fe-note-violet { background: var(--fe-violet-bg); border: 1px solid var(--fe-violet-border); border-radius: 16px; padding: 20px 28px; display: flex; align-items: center; gap: 14px; }
.fe-note-violet p { font-size: 15px; line-height: 22px; color: var(--fe-violet-ink); margin: 0; }
.fe-note-violet svg { flex-shrink: 0; }

/* --- Patients green callout ------------------------------------------- */
.fe-green {
    background: var(--fe-green-bg); border: 1px solid var(--fe-green-border); border-radius: 16px;
    padding: 36px; display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap;
}
.fe-green-icon { width: 56px; height: 56px; border-radius: 9999px; background: var(--fe-green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fe-green-body { flex: 1; min-width: 260px; }
.fe-green-body h2 { font-size: 26px; font-weight: 800; margin: 0 0 10px; color: var(--fe-green-ink); letter-spacing: -.01em; }
.fe-green-body p { font-size: 16px; line-height: 25px; color: #1D5A34; margin: 0 0 8px; }
.fe-green-legal { font-size: 12px; line-height: 18px; color: #4C7A5C; margin: 0 !important; }

/* --- Flow ------------------------------------------------------------- */
.fe-flow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.fe-flow-step { flex: 1; min-width: 150px; background: #fff; border: 1px solid var(--fe-border); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.fe-flow-step--final { background: var(--fe-primary); border-color: var(--fe-primary); }
.fe-flow-num { font-size: 12px; font-weight: 700; color: var(--fe-t3); text-transform: uppercase; letter-spacing: .04em; }
.fe-flow-step--final .fe-flow-num { color: var(--fe-violet-border); }
.fe-flow-text { font-size: 14px; line-height: 20px; color: var(--fe-t1); }
.fe-flow-step--final .fe-flow-text { color: #fff; }
.fe-flow-arrow { display: flex; align-items: center; color: var(--fe-border-strong); }
.fe-flow-arrow--down { display: none; }

/* --- Numbered choice -------------------------------------------------- */
.fe-choice { background: var(--fe-bg); border-radius: 16px; padding: 24px; display: flex; gap: 14px; }
.fe-choice-num { width: 36px; height: 36px; border-radius: 9999px; background: var(--fe-violet-bg); color: var(--fe-violet-fg); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fe-choice-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }

/* --- Stats ------------------------------------------------------------ */
.fe-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.fe-stat { background: #fff; border: 1px solid var(--fe-border); border-radius: 16px; padding: 24px; }
.fe-stat-num { font-size: 26px; font-weight: 200; color: var(--fe-primary); margin-bottom: 6px; }

/* --- FAQ -------------------------------------------------------------- */
.fe-faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.fe-faq-item { background: #fff; border: 1px solid var(--fe-border); border-radius: 16px; padding: 0 24px; }
.fe-faq-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; font-size: 16px; font-weight: 600; min-height: 44px; }
.fe-faq-item > summary::-webkit-details-marker { display: none; }
.fe-faq-chevron { flex-shrink: 0; transition: transform 160ms cubic-bezier(.2, 0, 0, 1); }
.fe-faq-item[open] .fe-faq-chevron { transform: rotate(180deg); }
.fe-faq-a { font-size: 14px; line-height: 22px; color: var(--fe-t2); margin: 0; padding: 0 0 20px; }

/* --- CTA intermédiaire (intercalé entre les sections pédagogiques) ---- */
.fe-cta-mid { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }

/* --- Final CTA (dark) ------------------------------------------------- */
.fe-final { max-width: 880px; margin: 0 auto; background: var(--fe-ink); border-radius: 24px; padding: 56px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.fe-final h2 { font-size: 34px; line-height: 1.2; font-weight: 800; color: #fff; margin: 0; letter-spacing: -.01em; }
.fe-final p { font-size: 17px; line-height: 26px; color: var(--fe-on-dark); margin: 0; max-width: 520px; }
.fe-final-micro { font-size: 13px; color: var(--fe-on-dark-muted) !important; }

/* --- Chat FAB --------------------------------------------------------- */
.fe-fab {
    position: fixed; bottom: 24px; right: 24px; background: var(--fe-primary); color: #fff;
    font-size: 14px; font-weight: 600; padding: 14px 20px; border: 0; border-radius: 9999px; cursor: pointer;
    box-shadow: 0 12px 32px -8px rgba(18, 0, 52, .32); display: flex; align-items: center; gap: 8px; z-index: 40; min-height: 44px;
    font-family: inherit;
}
.fe-fab:hover { background: var(--fe-primary-strong); color: #fff; }
/* display:flex ci-dessus l'emporte sur [hidden]{display:none} (UA) : on rétablit
   le masquage pour que fab.hidden=true cache bien le FAB (cf. feFabChat). */
.fe-fab[hidden] { display: none; }

/* --- Footer ----------------------------------------------------------- */
.fe-footer { background: #fff; border-top: 1px solid var(--fe-divider); padding: 48px 40px; display: flex; gap: 64px; flex-wrap: wrap; }
.fe-footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 180px; }
.fe-footer-col > div { font-size: 13px; font-weight: 700; }
.fe-footer-col a { font-size: 13px; color: var(--fe-t2); }

/* --- Chat inline link (screens) --------------------------------------- */
.fe-chat-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--fe-primary); font-family: inherit; font-size: inherit; font-weight: 600; }
.fe-chat-link:hover { color: var(--fe-primary-strong); text-decoration: underline; }

/* ====================================================================== */
/* Page 2 — form + screens                                                */
/* ====================================================================== */
.fe-form-head { text-align: center; margin-bottom: 24px; }
.fe-form-head h1 { font-size: 27px; font-weight: 800; margin: 0 0 8px; letter-spacing: -.01em; }
.fe-form-head p { font-size: 14px; line-height: 21px; color: var(--fe-t2); margin: 0 0 8px; }
.fe-form-head .fe-form-reassure { font-size: 12px; font-weight: 600; color: var(--fe-t3); margin: 0; }
.fe-form-card { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--fe-border); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.fe-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fe-field { display: flex; flex-direction: column; gap: 6px; }
.fe-field label { font-size: 13px; font-weight: 600; }
.fe-input {
    width: 100%; border: 1px solid var(--fe-border-strong); border-radius: 8px; padding: 12px 14px;
    font-family: inherit; font-size: 14px; color: var(--fe-ink); background: #fff; min-height: 44px;
}
.fe-input::placeholder { color: #8B92AD; }
.fe-input:focus { outline: none; border-color: var(--fe-primary); box-shadow: 0 0 0 3px rgba(88, 0, 255, .12); }
select.fe-input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236E7191' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.fe-help { font-size: 12px; color: var(--fe-t3); }
.fe-field--error .fe-input { border: 2px solid var(--fe-danger); padding: 11px 13px; }
.fe-error { font-size: 12px; color: var(--fe-danger-fg); display: flex; align-items: flex-start; gap: 6px; }
.fe-error svg { flex-shrink: 0; margin-top: 1px; }
.fe-turnstile { min-height: 44px; }
.fe-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 18px; color: var(--fe-t2); }
.fe-consent input { width: 18px; height: 18px; flex-shrink: 0; margin: 1px 0 0; accent-color: var(--fe-primary); }
.fe-privacy { font-size: 11px; line-height: 16px; color: var(--fe-t4); margin: 0; text-align: center; }
.fe-privacy p { margin: 6px 0 0; }
.fe-privacy p:first-child { margin-top: 0; }
.fe-privacy a { color: var(--fe-primary); text-decoration: underline; }

/* --- Centered screens (B, B2, D) -------------------------------------- */
.fe-screen-wrap { background: var(--fe-bg); padding: 64px 24px 72px; display: flex; justify-content: center; min-height: 60vh; }
.fe-screen { background: #fff; border: 1px solid var(--fe-border); border-radius: 16px; padding: 40px; max-width: 460px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.fe-screen-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.fe-screen-icon--violet { background: var(--fe-violet-bg); }
.fe-screen-icon--grey { background: var(--fe-bg); }
.fe-screen h1 { font-size: 23px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.fe-screen p { font-size: 14px; line-height: 22px; color: var(--fe-t2); margin: 0; }
.fe-note-yellow { background: var(--fe-yellow-bg); border: 1px solid var(--fe-yellow-border); border-radius: 8px; padding: 10px 16px; font-size: 13px; line-height: 19px; color: #7A5B00; }

/* --- Verdict card (C1–C4) --------------------------------------------- */
.fe-verdict-wrap { background: var(--fe-bg); padding: 48px 24px 56px; display: flex; justify-content: center; }
.fe-verdict { background: #fff; border: 1px solid var(--fe-border); border-radius: 16px; max-width: 480px; overflow: hidden; width: 100%; }
.fe-verdict-band { padding: 28px 32px; display: flex; gap: 16px; align-items: center; border-bottom: 1px solid; }
.fe-verdict-band--success { background: var(--fe-green-bg); border-color: var(--fe-green-border); }
.fe-verdict-band--info { background: var(--fe-violet-bg); border-color: var(--fe-violet-border); }
.fe-verdict-band--warning { background: var(--fe-yellow-bg); border-color: var(--fe-yellow-border); }
.fe-verdict-icon { width: 48px; height: 48px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fe-verdict-band--success .fe-verdict-icon { background: var(--fe-green); }
.fe-verdict-band--info .fe-verdict-icon { background: var(--fe-primary); }
.fe-verdict-band--warning .fe-verdict-icon { background: var(--fe-yellow); }
.fe-verdict-siren { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.fe-verdict-band--success .fe-verdict-siren { color: var(--fe-green); }
.fe-verdict-band--info .fe-verdict-siren { color: var(--fe-violet-fg); }
.fe-verdict-band--warning .fe-verdict-siren { color: var(--fe-yellow-fg); }
.fe-verdict-band h1 { font-size: 22px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.fe-verdict-band--success h1 { color: var(--fe-green-ink); }
.fe-verdict-band--info h1 { color: var(--fe-violet-ink); }
.fe-verdict-band--warning h1 { color: var(--fe-yellow-ink); }
.fe-verdict-body { padding: 24px 32px 32px; display: flex; flex-direction: column; gap: 14px; }
.fe-verdict-body p { font-size: 14px; line-height: 22px; color: var(--fe-t1); margin: 0; }
.fe-verdict-body p.muted { color: var(--fe-t2); }
.fe-verdict-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fe-verdict-note { font-size: 12px; line-height: 18px; color: var(--fe-t4); margin: 0; }
.fe-step { display: flex; gap: 12px; align-items: flex-start; }
.fe-step-num { width: 26px; height: 26px; border-radius: 9999px; background: var(--fe-yellow-bg); color: var(--fe-yellow-fg); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fe-step p { font-size: 14px; line-height: 21px; color: var(--fe-t1); margin: 0; }
.fe-copybox { background: var(--fe-bg); border-radius: 8px; padding: 12px 16px; font-size: 12px; line-height: 18px; color: var(--fe-t2); }

/* Écran verdict : stack (carte + encart) & encart promo Milou.
   Design « Verdicts - Proposition CTA » (projet Claude Design). */
.fe-verdict-stack { width: 100%; max-width: 680px; display: flex; flex-direction: column; gap: 16px; }
.fe-verdict-stack .fe-verdict { max-width: none; }
.fe-verdict-chat { border-top: 1px solid #F0F1F7; padding-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fe-t2); }
.fe-verdict-chat svg { flex-shrink: 0; }
.fe-promo { background: #fff; border: 1px solid var(--fe-violet-border); border-radius: 16px; overflow: hidden; }
.fe-promo-head { background: #F4F6FC; border-bottom: 1px solid var(--fe-border); padding: 20px 30px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fe-promo-logo { font-size: 21px; font-weight: 800; letter-spacing: -.02em; color: #120034; }
.fe-promo-dot { color: var(--fe-yellow); }
.fe-promo-rating { display: flex; align-items: center; gap: 8px; }
.fe-promo-stars { display: flex; gap: 2px; }
.fe-promo-rating > span { font-size: 12px; color: #6E7191; }
.fe-promo-body { padding: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.fe-promo-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.fe-promo-feat { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--fe-t1); }
.fe-promo-feat svg { flex-shrink: 0; }
.fe-promo-cta { display: flex; flex-direction: column; gap: 20px; }
.fe-promo-cta h3 { font-size: 24px; line-height: 1.15; font-weight: 800; margin: 0; letter-spacing: -.01em; color: #120034; }

/* ====================================================================== */
/* Mobile                                                                 */
/* ====================================================================== */
@media (max-width: 720px) {
    .fe-header { padding: 14px 20px; }
    .fe-nav { display: none; }
    .fe-nav.is-open {
        display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
        position: absolute; top: 100%; left: 0; right: 0; background: #fff;
        padding: 8px 20px 16px; border-bottom: 1px solid var(--fe-divider); box-shadow: var(--fe-shadow-lg);
    }
    .fe-nav.is-open a { padding: 10px 0; }
    .fe-burger { display: inline-flex; }

    .fe-hero { padding: 44px 20px 40px; }
    .fe-hero .fe-btn { align-self: stretch; width: 100%; }
    .fe-hero-inner--split { flex-direction: column; gap: 28px; text-align: center; }
    .fe-hero-inner--split .fe-hero-copy { align-items: center; }
    .fe-hero-inner--split .fe-hero-actions { justify-content: center; width: 100%; }
    .fe-hero-img { flex: none; width: 100%; max-width: 420px; }
    .fe-h1 { font-size: 30px; }
    .fe-lead { font-size: 16px; line-height: 24px; }
    .fe-section { padding: 40px 0; }
    .fe-wrap { padding: 0 20px; }
    .fe-h2 { font-size: 24px; }
    .fe-body { font-size: 15px; line-height: 23px; }

    .fe-flow { flex-direction: column; }
    .fe-flow-arrow { display: none; }
    .fe-flow-arrow--down { display: flex; justify-content: center; }

    .fe-green { padding: 24px; gap: 12px; flex-direction: column; }
    .fe-green-body h2 { font-size: 21px; }
    .fe-green-body p { font-size: 14px; line-height: 22px; }

    .fe-final { border-radius: 20px; padding: 36px 24px; }
    .fe-final h2 { font-size: 26px; }
    .fe-final p { font-size: 14px; line-height: 22px; }
    .fe-final .fe-btn { align-self: stretch; width: 100%; }
    .fe-cta-mid .fe-btn { align-self: stretch; width: 100%; }

    .fe-footer { padding: 32px 20px 96px; flex-direction: column; gap: 24px; }
    .fe-fab { bottom: 16px; right: 16px; padding: 13px 18px; font-size: 13px; }

    .fe-form-row { grid-template-columns: 1fr; }
    .fe-form-card { padding: 20px; }
    .fe-screen-wrap, .fe-verdict-wrap { padding: 40px 16px 48px; }
    .fe-screen { padding: 28px 20px; }
    .fe-verdict-band { flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 20px; }
    .fe-verdict-body { padding: 18px 20px 24px; }
    .fe-promo-head { padding: 18px 20px; }
    .fe-promo-body { grid-template-columns: 1fr; gap: 24px; padding: 22px 20px; }
    .fe-promo-cta h3 { font-size: 21px; }
}