/* Specific styles for landing page */

    /* [MEME-ENTETE, 16/09/2026 — demande Kane « il y a un decalage entre les
       2 entetes »] LA GOUTTIERE DE DEFILEMENT EST TOUJOURS RESERVEE.

       Les deux en-tetes sont identiques au pixel pres. Ce qui bougeait, c'est
       la largeur utile : l'accueil est long donc il a une barre de defilement,
       un article court n'en a pas, et tout ce qui est aligne a droite sautait
       de 15 px en passant de l'un a l'autre. On reserve la place dans les deux
       cas, avec le repli historique pour les navigateurs sans la propriete. */
    html {
      scrollbar-gutter: stable;
    }

    .hero {
      text-align: center;
      padding: var(--sp-32) 0 0;
    }

    .capsule {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-8);
      padding: 8px 14px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      margin-bottom: var(--sp-24);
    }

    .capsule-success {
      background: rgba(16, 185, 129, 0.1);
      border: 1px solid rgba(16, 185, 129, 0.3);
      color: var(--success);
    }

    .capsule-accent {
      background: var(--active-glow);
      border: 1px solid rgba(99, 102, 241, 0.2);
      color: var(--text-primary);
      text-transform: none;
      font-size: 13px;
      font-weight: 700;
      padding: 10px 16px;
      border-radius: 16px;
      margin-top: var(--sp-24);
    }

    /* [HERO-SANS-DECALAGE, 25/10/2026 — mesuré] Avant l'arrivée de Plus Jakarta Sans, le titre
       tenait sur 4 lignes au lieu de 5 en mobile : le bandeau dessous sautait (CLS 0,195,
       performance 88). Arial agrandi de 8 % casse le titre comme la vraie police. */
    @font-face {
      font-family: 'Jakarta Repli';
      src: local('Arial');
      size-adjust: 108%;
    }

    .hero-title {
      font-family: 'Plus Jakarta Sans', 'Jakarta Repli', sans-serif;
      /* [HERO-ALIGNE, 19/10/2026 — demande Kane] Meme cadre que les sections :
         1100px moins 16px de chaque cote ; 41px : la premiere ligne le remplit
         sans le depasser. */
      font-size: 41px;
      padding: 0 var(--sp-16);
      box-sizing: border-box;
      font-weight: 900;
      letter-spacing: -1.2px;
      line-height: 1.18;
      max-width: min(1100px, 100%);
      margin: 0 auto var(--sp-24);
    }

    /* ── Cartes hero premium ──────────────────────────────────── */
    .hero-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-24);
      width: 100%;
      margin: var(--sp-32) auto 0;
      padding: 0 var(--sp-16);
    }

    @media (max-width: 900px) {
      .hero-cards {
        grid-template-columns: 1fr;
      }
    }

    .hero-card-pro {
      position: relative;
      overflow: hidden;
      text-align: left;
      padding: 26px 24px 24px;
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.06) 0%, transparent 45%),
        var(--surface);
      border: 1px solid var(--border);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }

    /* Hairline d'accent en haut de carte */
    .hero-card-pro::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.9), transparent);
      opacity: .5;
      transition: opacity .25s ease;
    }

    /* Numéro d'étape en filigrane */
    .hero-card-pro__num {
      position: absolute;
      top: 14px;
      right: 20px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 40px;
      font-weight: 700;
      line-height: 1;
      color: var(--text-primary);
      opacity: .06;
      letter-spacing: -2px;
      user-select: none;
    }

    .hero-card-pro__head {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
    }

    .hero-card-pro__badge {
      flex: 0 0 auto;
      width: 46px;
      height: 46px;
      border-radius: 13px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--accent);
      background: linear-gradient(145deg, rgba(var(--accent-rgb), 0.18), rgba(var(--accent-rgb), 0.06));
      border: 1px solid rgba(var(--accent-rgb), 0.22);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .hero-card-pro__badge .material-icons-round {
      font-size: 24px;
    }

    .hero-card-pro__title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 800;
      font-size: 16px;
      letter-spacing: -.2px;
      line-height: 1.25;
      color: var(--text-primary);
    }

    .hero-card-pro__desc {
      font-size: 13px;
      line-height: 1.55;
      color: var(--text-secondary);
      margin: 0;
    }

    .hero-card-pro:hover {
      transform: translateY(-4px);
      border-color: rgba(var(--accent-rgb), 0.45);
      box-shadow: 0 16px 40px -12px rgba(var(--accent-rgb), 0.28);
    }

    .hero-card-pro:hover::before {
      opacity: 1;
    }

    .hero-card-pro:hover .hero-card-pro__badge {
      transform: scale(1.06);
      box-shadow: 0 8px 20px -8px rgba(var(--accent-rgb), 0.55);
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-card-pro,
      .hero-card-pro__badge {
        transition: none;
      }

      .hero-card-pro:hover {
        transform: none;
      }
    }

    @media (max-width: 960px) {
      .hero-title {
        font-size: 27px;
        letter-spacing: -0.8px;
      }
    }

    .countdown-widget-premium {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--sp-24);
      padding: 12px 24px;
      border-radius: 16px;
      background: rgba(249, 115, 22, 0.06);
      border: 1px solid rgba(249, 115, 22, 0.25);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      color: var(--warning);
      margin: 0;
      margin-top: var(--sp-12);
      /* [SANS-FUSEE, 16/09/2026 — demande Kane] Elargi : le bandeau porte
         desormais la promesse produit, une phrase entiere, qui se cassait en
         trois lignes courtes a 800px. */
      max-width: min(1100px, 100%);
      box-shadow: 0 4px 20px rgba(249, 115, 22, 0.05);
      transition: all 0.3s ease;
    }

    .countdown-widget-premium:hover {
      border-color: rgba(249, 115, 22, 0.4);
      box-shadow: 0 8px 30px rgba(249, 115, 22, 0.1);
      transform: translateY(-1px);
    }

    .countdown-content {
      display: flex;
      align-items: center;
      gap: var(--sp-12);
      text-align: left;
    }

    .countdown-content .alert-icon {
      font-size: 20px;
      animation: pulse-icon 2s infinite ease-in-out;
      flex-shrink: 0;
    }

    .countdown-content .banner-text {
      font-size: 13px;
      font-weight: 600;
      line-height: 1.5;
      text-align: center;
    }

    .btn-banner-contact {
      display: inline-flex;
      align-items: center;
      gap: var(--sp-4);
      background: var(--warning);
      color: #0b0f19;
      border: none;
      padding: 8px 16px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(249, 115, 22, 0.2);
    }

    .btn-banner-contact:hover {
      background: #f97316;
      box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
      transform: scale(1.03);
    }

    /* [PILOTE-BLEU-BLANC, 16/10/2026 — demande Kane] Le bandeau de l'essai
       gratuit est bleu et blanc. [BANDEAU-UN-SEUL-THEME, 22/10/2026 — demande
       Kane] Dans les deux thèmes : les jetons de marque n'existant qu'en thème
       clair, leur valeur est reprise en repli. */
    .countdown-widget-premium,
    .countdown-widget-premium:hover {
      background: var(--marque, #2563EB);
      border-color: var(--marque, #2563EB);
    }

    .countdown-content .banner-text {
      color: var(--sur-marque, #FFFFFF);
    }

    .btn-banner-contact {
      background: var(--sur-marque, #FFFFFF);
      color: var(--marque, #2563EB);
    }

    [data-theme="light"] #hero-badge {
      background: var(--marque-doux);
      border-color: var(--marque);
      color: var(--marque);
    }

    .btn-banner-contact:hover {
      background: var(--marque-doux, #EFF6FF);
    }

    @keyframes pulse-icon {

      0%,
      100% {
        opacity: 1;
        transform: scale(1);
      }

      50% {
        opacity: 0.7;
        transform: scale(1.15);
      }
    }

    @media (max-width: 900px) {
      .countdown-widget-premium {
        flex-direction: column;
        gap: var(--sp-16);
        padding: var(--sp-16);
        width: calc(100% - var(--sp-32));
      }

      .countdown-content {
        flex-direction: column;
        text-align: center;
        align-items: center;
      }

      .countdown-content .banner-text {
        font-size: 12px;
        text-align: center;
      }

      .btn-banner-contact {
        width: 100%;
        justify-content: center;
      }
    }

    .hero-actions {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--sp-16);
      margin-bottom: var(--sp-24);
    }

    /* Social Proof Cards */
    .social-proof {
      padding: var(--sp-24) var(--sp-16);
      border-radius: 24px;
      background: var(--surface);
      border: 1px solid var(--border);
      max-width: 1100px;
      margin: 0 auto;
      text-align: center;
    }

    .social-proof-title {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
      color: var(--text-secondary);
      text-transform: uppercase;
      margin-bottom: 20px;
      text-align: center;
    }

    .social-cards-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: var(--sp-16);
    }

    .social-card {
      padding: var(--sp-16);
      border-radius: 16px;
      background: var(--overlay-bg);
      border: 1px solid var(--border);
      text-align: left;
    }

    .social-card-header {
      display: flex;
      align-items: center;
      gap: var(--sp-8);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 12px;
      font-weight: 800;
      margin-bottom: 10px;
    }

    .social-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }

    .social-quote {
      font-size: 11px;
      color: var(--text-secondary);
      line-height: 1.4;
      font-style: italic;
    }

    /* Persona Selector */
    .section-header {
      text-align: center;
      margin: 0 0 var(--sp-40);
    }

    .section-label {
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 2.5px;
      color: var(--accent);
      text-transform: uppercase;
      margin-bottom: var(--sp-12);
    }

    .section-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }

    @media (max-width: 768px) {
      .section-title {
        font-size: 24px;
      }
    }

    .persona-tabs {
      display: flex;
      justify-content: flex-start;
      flex-wrap: nowrap;
      gap: var(--sp-12);
      margin-bottom: var(--sp-40);
      overflow-x: auto;
      width: 100%;
      padding: 4px;
      scrollbar-width: none;
    }

    .persona-tabs::-webkit-scrollbar {
      display: none;
    }

    @media (min-width: 901px) {
      .persona-tabs {
        justify-content: center;
      }
    }

    .persona-tab {
      display: flex;
      align-items: center;
      gap: var(--sp-8);
      padding: 14px 20px;
      border-radius: 12px;
      background: var(--surface);
      border: 1.5px solid var(--border);
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .persona-tab:hover {
      border-color: var(--accent);
    }

    .persona-tab-name {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 14px;
      font-weight: 800;
      color: var(--text-secondary);
    }

    .persona-tab-subtitle {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 11px;
      font-weight: 400;
      color: var(--text-secondary);
      display: none;
    }

    @media (min-width: 768px) {
      .persona-tab-subtitle {
        display: inline;
      }
    }

    .persona-tab-desc {
      font-size: 11px;
      font-weight: 400;
      color: var(--text-secondary);
      opacity: 0.6;
    }

    .persona-tab.active {
      background: var(--active-glow);
      border-color: var(--active-color, var(--accent));
    }

    .persona-tab.active .persona-tab-name {
      color: var(--text-primary);
    }

    .persona-panel {
      background-color: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 24px;
      padding: var(--sp-32);
      text-align: left;
      display: flex;
      gap: var(--sp-48);
      min-height: 320px;
      box-shadow: 0 8px 32px var(--shadow-color);
      transition: all 0.25s ease;
    }

    @media (max-width: 900px) {
      .persona-panel {
        flex-direction: column;
        padding: var(--sp-20);
        gap: var(--sp-24);
      }
    }

    .persona-left {
      flex: 4;
    }

    .persona-right {
      flex: 5;
    }

    .persona-panel-divider {
      width: 1px;
      background: var(--border);
      align-self: stretch;
    }

    @media (max-width: 900px) {
      .persona-panel-divider {
        display: none;
      }
    }

    .persona-panel-header {
      display: flex;
      align-items: center;
      gap: var(--sp-12);
      margin-bottom: var(--sp-20);
    }

    .persona-icon-container {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--active-glow);
      color: var(--active-color, var(--accent));
    }

    .persona-panel-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 18px;
      font-weight: 800;
    }

    .persona-pain {
      font-size: 15px;
      font-weight: 500;
      font-style: italic;
      color: var(--text-primary);
      margin-bottom: var(--sp-12);
      line-height: 1.4;
      opacity: 0.9;
    }

    .persona-hook {
      font-size: 13px;
      font-weight: 700;
      font-style: italic;
      color: var(--active-color, var(--accent));
      margin-bottom: var(--sp-24);
    }

    .persona-label-accent {
      font-size: 12px;
      font-weight: 800;
      color: var(--active-color, var(--accent));
      letter-spacing: 0.5px;
      text-transform: uppercase;
      margin-bottom: var(--sp-8);
    }

    .persona-solution {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 20px;
      font-weight: 800;
    }

    .persona-features-label {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 1px;
      color: var(--text-secondary);
      text-transform: uppercase;
      margin-bottom: var(--sp-16);
    }

    .feature-list {
      display: flex;
      flex-direction: column;
      gap: var(--sp-16);
    }

    .feature-item {
      display: flex;
      align-items: flex-start;
      gap: var(--sp-12);
    }

    .feature-check-icon {
      color: var(--active-color, var(--accent));
      flex-shrink: 0;
      margin-top: 2px;
    }

    .feature-item-text {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.45;
    }

    .feature-item-text strong {
      color: var(--text-primary);
    }

    .steer-cta-text {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 16px;
      font-weight: 600;
      color: var(--accent);
      margin: var(--sp-32) 0;
      text-align: center;
      line-height: 1.4;
    }

    /* Lock-In Section */
    .lock-in-card {
      background-color: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 24px;
      padding: var(--sp-40);
      text-align: left;
      margin-bottom: var(--sp-48);
      box-shadow: 0 8px 24px rgba(99, 102, 241, 0.03);
    }

    @media (max-width: 600px) {
      .lock-in-card {
        padding: var(--sp-20);
      }
    }

    .lock-in-header {
      display: flex;
      align-items: center;
      gap: var(--sp-16);
      margin-bottom: var(--sp-20);
    }

    .lock-in-icon-box {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(249, 115, 22, 0.12);
      color: var(--warning);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lock-in-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }

    .lock-in-desc {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.5;
      margin-bottom: var(--sp-24);
    }

    .lock-in-features-grid {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-24);
    }

    .lock-in-feature-item {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 250px;
      flex: 1;
    }

    .lock-in-feature-item.wide {
      min-width: 320px;
      flex: 2;
    }

    .lock-in-feat-icon {
      color: var(--accent);
      flex-shrink: 0;
    }

    .lock-in-feat-text {
      font-size: 13px;
      font-weight: 600;
    }

    /* Ready Agents Section */
    .ready-agents-card {
      background-color: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: 24px;
      padding: var(--sp-40);
      text-align: left;
      margin-bottom: var(--sp-48);
      box-shadow: 0 8px 24px rgba(99, 102, 241, 0.03);
    }

    .ready-agents-header {
      display: flex;
      align-items: center;
      gap: var(--sp-16);
      margin-bottom: var(--sp-20);
    }

    .ready-agents-icon-box {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--active-glow);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ready-agents-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }

    .ready-agents-intro {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: var(--sp-8);
      line-height: 1.4;
    }

    .ready-agents-desc {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.5;
      margin-bottom: var(--sp-28);
    }

    .agents-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-16);
      margin-bottom: 0;
    }

    @media (max-width: 900px) {
      .agents-grid {
        grid-template-columns: 1fr;
      }
    }

    .agent-card {
      padding: var(--sp-16);
      border-radius: 16px;
      background: var(--overlay-bg);
      border: 1px solid var(--border);
      display: flex;
      gap: var(--sp-14);
      align-items: flex-start;
    }

    .agent-icon-box {
      padding: var(--sp-8);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .agent-card-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 15px;
      font-weight: 700;
      margin-bottom: var(--sp-4);
    }

    .agent-card-desc {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .ready-agents-alert {
      padding: var(--sp-12) var(--sp-16);
      background: var(--active-glow);
      border-radius: 16px;
      border: 1px solid rgba(99, 102, 241, 0.15);
      display: flex;
      align-items: center;
      gap: var(--sp-8);
      font-size: 13px;
      font-weight: 700;
      margin-top: var(--sp-28);
    }

    #ready-alert-text {
      flex: 1;
      text-align: center;
    }

    @media (max-width: 900px) {
      .ready-agents-alert {
        justify-content: flex-start;
      }

      #ready-alert-text {
        text-align: left;
      }

      .ready-agents-card {
        padding: var(--sp-20);
      }
    }

    .ready-agents-alert-icon {
      color: var(--accent);
    }

    /* Services Table Section */
    .services-section {
      margin-bottom: var(--sp-48);
    }

    .services-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      background-color: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      overflow: hidden;
      margin-top: var(--sp-32);
    }

    .services-table th {
      background-color: var(--overlay-bg);
      padding: var(--sp-16) var(--sp-24);
      font-size: 13px;
      font-weight: 700;
      text-align: left;
      border-bottom: 1px solid var(--border);
    }

    .services-table td {
      padding: var(--sp-20) var(--sp-24);
      font-size: 13px;
      border-bottom: 1px solid var(--border);
      vertical-align: top;
    }

    .services-table tr:last-child td {
      border-bottom: none;
    }

    .service-cell {
      display: flex;
      align-items: center;
      gap: var(--sp-12);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 800;
      font-size: 14px;
    }

    .service-icon-box {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(99, 102, 241, 0.1);
      flex-shrink: 0;
    }

    .service-desc-cell {
      color: var(--text-secondary);
      line-height: 1.45;
    }

    .service-need-box {
      padding: var(--sp-8) var(--sp-12);
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
    }

    @media (max-width: 900px) {
      .services-table {
        display: none;
      }

      .services-cards-mobile {
        display: flex;
        flex-direction: column;
        gap: var(--sp-16);
        margin-top: var(--sp-32);
      }
    }

    @media (min-width: 901px) {
      .services-cards-mobile {
        display: none;
      }
    }

    .service-mobile-card {
      background-color: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: var(--sp-16);
    }

    .service-mobile-header {
      display: flex;
      align-items: center;
      gap: var(--sp-12);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 800;
      font-size: 15px;
      margin-bottom: var(--sp-12);
    }

    .service-mobile-desc {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.45;
      margin-bottom: var(--sp-16);
    }

    .service-mobile-need {
      padding: var(--sp-12);
      border-radius: 8px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
    }

    .service-mobile-need-label {
      font-size: 9px;
      font-weight: 900;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      margin-bottom: var(--sp-4);
      display: block;
    }

    .story-section {
      display: flex;
      gap: var(--sp-48);
      align-items: flex-start;
      margin-bottom: var(--sp-48);
    }

    .story-actions {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: var(--sp-16);
      margin-top: var(--sp-24);
    }

    @media (max-width: 900px) {
      .story-actions {
        justify-content: center;
      }
    }

    @media (max-width: 900px) {
      .story-section {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
    }

    .story-left {
      width: 320px;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: var(--sp-24);
      align-items: center;
    }

    @media (max-width: 900px) {
      .story-left {
        display: none !important;
      }
    }

    .story-avatar {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
      border: 2px solid rgba(99, 102, 241, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 20px rgba(99, 102, 241, 0.15);
    }

    .story-avatar-inner {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background-color: var(--surface);
      border: 1px solid var(--border);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .story-avatar-img {
      width: 80px;
      height: 80px;
      object-fit: contain;
    }

    .whitepaper-card {
      width: 100%;
      padding: var(--sp-20);
      background-color: rgba(99, 102, 241, 0.05);
      border-radius: 16px;
      border: 1.5px solid rgba(99, 102, 241, 0.35);
      text-align: left;
    }

    .whitepaper-header {
      display: flex;
      align-items: center;
      gap: var(--sp-8);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 14px;
      font-weight: 800;
      margin-bottom: var(--sp-8);
    }

    .whitepaper-icon {
      color: var(--accent);
    }

    .whitepaper-desc {
      font-size: 12px;
      color: var(--text-secondary);
      margin-bottom: var(--sp-16);
      line-height: 1.4;
    }

    .story-content {
      flex-grow: 1;
      text-align: left;
    }

    .story-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.5px;
      margin-bottom: var(--sp-16);
    }

    .story-vision {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 16px;
      font-style: italic;
      font-weight: 600;
      color: var(--accent);
      line-height: 1.4;
      margin-bottom: var(--sp-16);
    }

    .story-bio {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    /* Design Partner Section */
    .partner-section {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, transparent 100%);
      border: 1.5px dashed rgba(99, 102, 241, 0.4);
      border-radius: 24px;
      padding: var(--sp-32);
      margin-bottom: var(--sp-48);
    }

    .partner-header {
      display: flex;
      align-items: center;
      gap: var(--sp-16);
      margin-bottom: var(--sp-16);
    }

    .partner-icon-box {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background-color: var(--active-glow);
      color: var(--accent);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .partner-title-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .partner-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.5px;
    }

    .partner-spots {
      align-self: flex-start;
      padding: 2px 8px;
      background-color: rgba(239, 68, 68, 0.1);
      border-radius: 12px;
      border: 1px solid rgba(239, 68, 68, 0.3);
      font-size: 10px;
      font-weight: 700;
      color: var(--danger);
    }

    .partner-desc {
      font-size: 14px;
      color: var(--text-secondary);
      line-height: 1.5;
      margin-bottom: var(--sp-24);
    }

    /* Contact Modal Specific Styles */
    .form-input-container {
      position: relative;
      display: flex;
      align-items: center;
    }

    .form-input-container .form-input {
      padding-left: 48px;
    }

    .form-input-container .form-input-icon {
      position: absolute;
      left: 16px;
      color: var(--text-secondary);
      font-size: 20px;
      pointer-events: none;
    }

    select.form-input {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748b'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 16px center;
      background-size: 20px;
      padding-right: 40px;
      cursor: pointer;
    }

    .challenge-chips-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
      margin-bottom: 8px;
    }

    .challenge-chip {
      padding: 8px 14px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 500;
      font-family: 'Plus Jakarta Sans', sans-serif;
      cursor: pointer;
      transition: all 0.2s ease;
      border: 1px solid var(--border);
      background-color: rgba(255, 255, 255, 0.03);
      color: var(--text-secondary);
    }

    [data-theme="light"] .challenge-chip {
      background-color: rgba(0, 0, 0, 0.02);
    }

    .challenge-chip:hover {
      border-color: var(--text-secondary);
    }

    .challenge-chip.selected {
      background-color: rgba(99, 102, 241, 0.15);
      border-color: var(--accent);
      border-width: 1.5px;
      color: var(--text-primary);
      font-weight: 700;
      padding: 7.5px 13.5px;
    }

    .form-error-msg {
      color: var(--danger);
      font-size: 11px;
      margin-top: 4px;
      display: none;
    }

    .form-group.has-error .form-error-msg {
      display: block;
    }

    .form-group.has-error .form-input {
      border-color: var(--danger);
    }

    /* Spinner */
    .spinner-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 48px;
    }

    .form-input-spinner {
      width: 24px;
      height: 24px;
      border: 3px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      border-top-color: var(--accent);
      animation: form-spinner-spin 1s linear infinite;
    }

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

    /* Toast Notification */
    .toast-notification {
      position: fixed;
      bottom: 24px;
      right: 24px;
      background-color: var(--surface);
      border: 1.5px solid var(--accent);
      border-radius: 16px;
      padding: 16px 20px;
      box-shadow: 0 10px 30px var(--shadow-color);
      z-index: 2000;
      display: flex;
      align-items: center;
      gap: var(--sp-12);
      transform: translateY(100px);
      opacity: 0;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
      max-width: 380px;
    }

    .toast-notification.show {
      transform: translateY(0);
      opacity: 1;
    }

    .toast-icon {
      color: var(--accent);
      font-size: 24px;
    }

    .toast-content {
      display: flex;
      flex-direction: column;
      gap: 2px;
      text-align: left;
    }

    .toast-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 14px;
      font-weight: 800;
      color: var(--text-primary);
    }

    .toast-msg {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    /* Global footer styles handled by exec_theme.css */

    /* macOS-style Cockpit Window Styles */
    .cockpit-window {
      /* Custom variables mapping exactly to Flutter ExecutiveTheme specifications */
      --cockpit-bg: var(--surface);
      --cockpit-border: var(--border);
      --cockpit-sidebar-bg: rgba(255, 255, 255, 0.01);
      --cockpit-main-bg: var(--surface);
      --cockpit-titlebar-bg: rgba(255, 255, 255, 0.02);
      --cockpit-text-primary: var(--text-primary);
      --cockpit-text-secondary: var(--text-secondary);
      --cockpit-active-bg: rgba(99, 102, 241, 0.1);
      --cockpit-active-text: var(--text-primary);
      --cockpit-category-text: var(--text-secondary);

      display: flex;
      flex-direction: column;
      width: 850px;
      height: 620px;
      border-radius: 20px;
      overflow: hidden;
      background-color: var(--cockpit-bg);
      border: 1.5px solid var(--cockpit-border);
      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6), 0 0 64px rgba(99, 102, 241, 0.1);
    }

    [data-theme="dark"] .cockpit-window {
      --cockpit-bg: #0B0F19;
      --cockpit-border: #1E293B;
      --cockpit-sidebar-bg: #0B0F19;
      --cockpit-main-bg: #070A13;
      --cockpit-titlebar-bg: #0F172A;
      --cockpit-text-primary: #FFFFFF;
      --cockpit-text-secondary: #94A3B8;
      --cockpit-active-bg: rgba(99, 102, 241, 0.1);
      --cockpit-active-text: #FFFFFF;
      --cockpit-category-text: #475569;
    }

    [data-theme="light"] .cockpit-window {
      --cockpit-bg: #FFFFFF;
      --cockpit-border: #E2E8F0;
      --cockpit-sidebar-bg: #FFFFFF;
      --cockpit-main-bg: #F8FAFC;
      --cockpit-titlebar-bg: #FFFFFF;
      --cockpit-text-primary: #0F172A;
      --cockpit-text-secondary: #64748B;
      --cockpit-active-bg: rgba(99, 102, 241, 0.1);
      --cockpit-active-text: var(--accent);
      --cockpit-category-text: rgba(100, 116, 139, 0.8);
      box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
    }

    .cockpit-titlebar {
      height: 40px;
      background-color: var(--cockpit-titlebar-bg);
      border-bottom: 1px solid var(--cockpit-border);
      display: flex;
      align-items: center;
      padding: 0 16px;
      position: relative;
      user-select: none;
    }

    .cockpit-mac-buttons {
      display: flex;
      gap: 6px;
    }

    .cockpit-mac-btn {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
    }

    .cockpit-mac-btn.close {
      background-color: #EF4444;
    }

    .cockpit-mac-btn.minimize {
      background-color: #F59E0B;
    }

    .cockpit-mac-btn.maximize {
      background-color: #10B981;
    }

    .cockpit-title {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 12px;
      font-weight: 600;
      color: var(--cockpit-text-secondary);
    }

    .cockpit-close-icon {
      position: absolute;
      right: 16px;
      font-size: 16px;
      color: var(--cockpit-text-secondary);
      cursor: pointer;
      transition: color 0.2s ease;
    }

    .cockpit-close-icon:hover {
      color: var(--cockpit-text-primary);
    }

    .cockpit-body {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    .cockpit-sidebar {
      width: 210px;
      background-color: var(--cockpit-sidebar-bg);
      border-right: 1.5px solid var(--cockpit-border);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      padding: 16px 0;
    }

    .cockpit-sidebar-group {
      margin-bottom: 12px;
    }

    .cockpit-sidebar-group-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 10px;
      font-weight: 900;
      color: var(--cockpit-category-text);
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 8px 16px;
      margin-bottom: 4px;
      opacity: 1;
    }

    .cockpit-sidebar-item {
      padding: 10px 16px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 12px;
      font-weight: 500;
      color: var(--cockpit-text-secondary);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: all 0.2s ease;
      border-left: 3px solid transparent;
      user-select: none;
    }

    .cockpit-sidebar-item:hover {
      background-color: rgba(255, 255, 255, 0.02);
      color: var(--cockpit-text-primary);
    }

    .cockpit-sidebar-item.active {
      background-color: var(--cockpit-active-bg);
      border-left-color: var(--accent);
      color: var(--cockpit-active-text);
      font-weight: 700;
    }

    .cockpit-sidebar-item .cockpit-sidebar-icon {
      font-size: 16px;
      color: var(--cockpit-text-secondary);
      transition: color 0.2s ease;
    }

    .cockpit-sidebar-item.active .cockpit-sidebar-icon {
      color: var(--accent);
    }

    .cockpit-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      padding: 20px;
      position: relative;
      background-color: var(--cockpit-main-bg);
    }

    .cockpit-main-header {
      margin-bottom: 20px;
    }

    .cockpit-main-eyebrow {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--accent);
      letter-spacing: 0.5px;
      margin-bottom: 4px;
    }

    .cockpit-main-title-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .cockpit-main-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 22px;
      font-weight: 800;
      color: var(--text-primary);
    }

    .cockpit-main-desc {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    /* Toggle switch style */
    .cockpit-toggle-container {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--border);
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      user-select: none;
    }

    .cockpit-toggle-switch {
      position: relative;
      display: inline-block;
      width: 32px;
      height: 18px;
    }

    .cockpit-toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .cockpit-toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.1);
      transition: .3s;
      border-radius: 18px;
    }

    .cockpit-toggle-slider:before {
      position: absolute;
      content: "";
      height: 14px;
      width: 14px;
      left: 2px;
      bottom: 2px;
      background-color: white;
      transition: .3s;
      border-radius: 50%;
    }

    input:checked+.cockpit-toggle-slider {
      background-color: var(--accent);
    }

    input:checked+.cockpit-toggle-slider:before {
      transform: translateX(14px);
    }

    /* KPI grid */
    .cockpit-kpi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 20px;
    }

    .cockpit-kpi-card {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .cockpit-kpi-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-secondary);
      text-transform: uppercase;
      opacity: 0.8;
    }

    .cockpit-kpi-value {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 18px;
      font-weight: 800;
      color: var(--text-primary);
    }

    .cockpit-kpi-value.green {
      color: var(--success);
    }

    .cockpit-kpi-value.blue {
      color: var(--accent);
    }

    .cockpit-kpi-value.red {
      color: var(--danger);
    }

    .cockpit-kpi-value.purple {
      color: #A855F7;
    }

    /* Simulation Arena (Terminal Console) */
    .cockpit-console {
      background: #050811;
      border: 1.5px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
      font-size: 11px;
      line-height: 1.5;
      overflow-y: auto;
      height: 180px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 20px;
    }

    .console-line {
      display: flex;
      gap: 8px;
    }

    .console-time {
      color: var(--text-secondary);
      opacity: 0.6;
    }

    .console-tag {
      font-weight: 700;
      text-transform: uppercase;
    }

    .console-tag.info {
      color: #3B82F6;
    }

    .console-tag.success {
      color: var(--success);
    }

    .console-tag.danger {
      color: var(--danger);
    }

    .console-tag.warning {
      color: #F59E0B;
    }

    .console-tag.system {
      color: #A855F7;
    }

    .console-text {
      color: var(--text-primary);
    }

    .cockpit-progress-container {
      margin-bottom: 20px;
      display: none;
    }

    .cockpit-progress-bar {
      height: 6px;
      width: 100%;
      background-color: rgba(255, 255, 255, 0.08);
      border-radius: 3px;
      overflow: hidden;
      position: relative;
    }

    .cockpit-progress-fill {
      height: 100%;
      width: 0%;
      background-color: var(--accent);
      transition: width 0.1s linear;
    }

    .cockpit-footer {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
    }

    /* Specialized View styles */
    .special-view-container {
      background: rgba(255, 255, 255, 0.01);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 20px;
    }

    /* Compliance Checklist */
    .compliance-checklist {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .compliance-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--text-secondary);
    }

    .compliance-item.checked {
      color: var(--text-primary);
    }

    .compliance-icon {
      font-size: 16px;
      line-height: 1;
    }

    .compliance-icon.checked {
      color: var(--success);
    }

    .compliance-icon.pending {
      color: var(--text-secondary);
      opacity: 0.5;
    }

    /* LLM Benchmark bar graph */
    .benchmark-graph {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .benchmark-row {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .benchmark-row-header {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      font-weight: 600;
    }

    .benchmark-bar-outer {
      height: 12px;
      background-color: rgba(255, 255, 255, 0.05);
      border-radius: 6px;
      overflow: hidden;
    }

    .benchmark-bar-inner {
      height: 100%;
      width: 0%;
      transition: width 0.5s ease;
      border-radius: 6px;
    }

    /* ROI Simulator */
    .roi-slider-container {
      display: flex;
      flex-direction: column;
      gap: var(--sp-12);
    }

    .roi-slider-row {
      display: flex;
      flex-direction: column;
      gap: var(--sp-8);
    }

    .roi-slider-labels {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 600;
    }

    .roi-slider {
      width: 100%;
      height: 6px;
      border-radius: 3px;
      outline: none;
      background: rgba(255, 255, 255, 0.1);
      accent-color: var(--accent);
      cursor: pointer;
    }

    .roi-results-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--sp-16);
      margin-top: var(--sp-16);
    }

    /* Prompt XML view */
    .prompt-xml-view {
      font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
      font-size: 11px;
      white-space: pre-wrap;
      color: #A855F7;
    }

    /* Playground Chat */
    .playground-chat {
      height: 120px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .chat-bubble {
      max-width: 80%;
      padding: 8px 12px;
      border-radius: 12px;
      font-size: 12px;
      line-height: 1.4;
    }

    .chat-bubble.user {
      align-self: flex-end;
      background-color: var(--accent);
      color: white;
    }

    .chat-bubble.ai {
      align-self: flex-start;
      background-color: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--border);
      color: var(--text-primary);
    }

    /* Cockpit Status Bar */
    .cockpit-statusbar {
      height: 36px;
      background-color: var(--cockpit-titlebar-bg);
      border-top: 1.5px solid var(--cockpit-border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 16px;
      font-size: 10px;
      color: var(--cockpit-text-secondary);
      user-select: none;
    }

    .statusbar-connection {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
      font-weight: 700;
    }

    .statusbar-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #10B981;
      animation: pulse-dot 1.5s infinite;
    }

    @keyframes pulse-dot {
      0% {
        opacity: 0.4;
      }

      50% {
        opacity: 1;
      }

      100% {
        opacity: 0.4;
      }
    }

    /* Responsive adaptations for Cockpit & Hero CTAs */
    @media (max-width: 960px) {
      #explore-modal {
        display: none !important;
      }

      .btn-explore-platform {
        display: none !important;
      }

      /* Upgrade the diagnostic button to primary on mobile since explore is hidden */
      .btn-diagnostic-cta {
        color: var(--text-primary) !important;
        border: 2px solid transparent !important;
        background: linear-gradient(var(--surface), var(--surface)) padding-box,
          linear-gradient(135deg, #A855F7, #3B82F6) border-box !important;
        box-shadow: -2px 2px 18px rgba(168, 85, 247, 0.20),
          2px 2px 18px rgba(59, 130, 246, 0.20) !important;
      }

      .btn-diagnostic-cta:hover {
        background: linear-gradient(rgba(168, 85, 247, 0.1), rgba(168, 85, 247, 0.1)) padding-box,
          linear-gradient(135deg, #A855F7, #3B82F6) border-box !important;
      }
    }

    /* Benefits Table Section */
    .benefits-section {
      margin-top: var(--sp-32);
      margin-bottom: var(--sp-40);
      position: relative;
      z-index: 2;
    }

    .benefits-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 20px;
      font-weight: 800;
      color: var(--text-primary);
      text-align: center;
      margin-bottom: var(--sp-24);
    }

    .benefits-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-top: var(--sp-12);
    }

    .benefit-card {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 24px var(--sp-20);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: 14px;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;
    }

    .benefit-card:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 255, 255, 0.15);
      background: rgba(255, 255, 255, 0.04);
    }

    .benefit-card-pain {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .benefit-card-pain .pain-icon {
      color: #EF4444;
      font-size: 14px;
      margin-top: 2px;
      flex-shrink: 0;
    }

    .benefit-card-divider {
      height: 1px;
      background: rgba(255, 255, 255, 0.06);
      width: 100%;
    }

    .benefit-card-gain {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 13px;
      color: var(--text-primary);
      line-height: 1.5;
      font-weight: 500;
    }

    .benefit-card-gain .gain-icon {
      color: #10B981;
      font-size: 16px;
      margin-top: 2px;
      flex-shrink: 0;
    }

    .benefit-card-gain strong {
      color: #10B981;
      font-weight: 800;
    }

    @media (max-width: 1024px) {
      .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 640px) {
      .benefits-grid {
        grid-template-columns: 1fr;
      }
    }

    /* Value Pillars Section */
    .value-pillars-section {
      margin-top: var(--sp-12);
      margin-bottom: var(--sp-32);
      position: relative;
      z-index: 2;
    }

    .pillars-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-24);
    }

    .pillar-card {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 32px 24px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      gap: var(--sp-16);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(10px);
    }

    .pillar-card:hover {
      transform: translateY(-4px);
      background: rgba(255, 255, 255, 0.05);
      border-color: rgba(255, 255, 255, 0.15);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    }

    .pillar-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, transparent, var(--icon-color), transparent);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .pillar-card:hover::before {
      opacity: 1;
    }

    .pillar-icon-wrapper {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--icon-color);
      transition: all 0.3s ease;
    }

    .pillar-card:hover .pillar-icon-wrapper {
      background: var(--icon-color);
      color: #000;
      box-shadow: 0 0 15px var(--icon-color);
    }

    /* In dark mode, icon text can be dark, but let's make sure it is readable */
    [data-theme="dark"] .pillar-card:hover .pillar-icon-wrapper {
      color: #fff;
    }

    .pillar-header {
      display: flex;
      align-items: center;
      gap: var(--sp-12);
      width: 100%;
    }

    .pillar-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 16px;
      font-weight: 800;
      color: var(--text-primary);
      margin: 0;
    }

    .pillar-desc {
      font-size: 13px;
      line-height: 1.6;
      color: var(--text-secondary);
      margin: 0;
      white-space: pre-line;
    }

    .pillar-extra {
      margin-top: 12px;
      padding: 8px 12px;
      font-size: 11.5px;
      font-weight: 600;
      color: var(--accent);
      background: rgba(59, 130, 246, 0.08);
      border-left: 3px solid var(--accent);
      border-radius: 4px;
      line-height: 1.4;
    }

    @media (max-width: 960px) {
      .pillars-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
    }

    /* Sticky CTA Bar */
    .sticky-cta-bar {
      position: fixed;
      bottom: -120px;
      /* Hidden by default */
      left: 0;
      width: 100%;
      background: rgba(11, 15, 25, 0.85);
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      padding: var(--sp-12) var(--sp-24);
      z-index: 9999;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: bottom 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
      box-sizing: border-box;
    }

    /* [THEME-002, 01/08/2026] DEUX CONVENTIONS DE THÈME DANS LE MÊME FICHIER.
       Cette règle était écrite `body.light-theme`, alors que la page pose son
       thème en `data-theme` sur `<html>` — dix occurrences pour une seule
       ici. La classe n'étant jamais ajoutée, la règle n'a JAMAIS pris.
       Conséquence : en thème clair, la barre d'appel à l'action gardait son
       fond sombre pendant que son texte passait en `#0F172A`. Sombre sur
       sombre, rapport 1,07 — le symptôme exact rapporté par Kane. */
    [data-theme="light"] .sticky-cta-bar {
      background: rgba(255, 255, 255, 0.85);
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.08);
    }

    /* Cookie Banner Adapters */
    .cookie-banner,
    #cookieBanner {
      position: fixed;
      bottom: 1.5rem;
      left: 1.5rem;
      right: 1.5rem;
      max-width: 860px;
      margin: 0 auto;
      background: rgba(6, 11, 19, 0.96);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
      border-radius: 14px;
      padding: 1.25rem 1.5rem;
      display: none;
      align-items: center;
      justify-content: space-between;
      gap: 1.25rem;
      z-index: 9999;
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    }
    .cookie-text {
      font-size: 0.88rem;
      color: var(--text-primary, #f8fafc);
      line-height: 1.45;
    }
    .cookie-btn-reject {
      padding: 0.5rem 1rem;
      border-radius: 8px;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      background: transparent;
      border: 1px solid var(--border, rgba(255, 255, 255, 0.15));
      color: var(--text-secondary, #94a3b8);
      transition: all 0.2s;
    }
    .cookie-btn-accept {
      padding: 0.5rem 1.25rem;
      border-radius: 8px;
      font-size: 0.85rem;
      font-weight: 700;
      cursor: pointer;
      background: #4f46e5;
      color: white;
      border: none;
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
      transition: all 0.2s;
    }

    [data-theme="light"] .cookie-banner,
    [data-theme="light"] #cookieBanner {
      background: rgba(255, 255, 255, 0.98) !important;
      border: 1px solid #E2E8F0 !important;
      box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12) !important;
      color: #0F172A !important;
    }
    [data-theme="light"] .cookie-text,
    [data-theme="light"] #cookieBanner .cookie-text {
      color: #0F172A !important;
    }
    [data-theme="light"] .cookie-btn-reject,
    [data-theme="light"] #cookieBanner .cookie-btn-reject {
      background: #F1F5F9 !important;
      border: 1px solid #CBD5E1 !important;
      color: #334155 !important;
    }
    [data-theme="light"] .cookie-btn-reject:hover,
    [data-theme="light"] #cookieBanner .cookie-btn-reject:hover {
      background: #E2E8F0 !important;
      color: #0F172A !important;
    }
    [data-theme="light"] .cookie-btn-accept,
    [data-theme="light"] #cookieBanner .cookie-btn-accept {
      background: #4F46E5 !important;
      color: #FFFFFF !important;
    }

    @media (max-width: 640px) {
      .cookie-banner,
      #cookieBanner {
        bottom: 0.75rem !important;
        left: 0.75rem !important;
        right: 0.75rem !important;
        padding: 1rem 1.15rem !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.85rem !important;
        border-radius: 12px !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
      }
      .cookie-banner .cookie-text,
      #cookieBanner .cookie-text {
        font-size: 0.82rem !important;
        line-height: 1.4 !important;
      }
      .cookie-banner > div:last-child,
      #cookieBanner > div:last-child {
        display: flex !important;
        gap: 0.5rem !important;
        width: 100% !important;
      }
      .cookie-btn-reject,
      .cookie-btn-accept,
      #cookieBanner .cookie-btn-reject,
      #cookieBanner .cookie-btn-accept {
        flex: 1 1 0 !important;
        text-align: center !important;
        justify-content: center !important;
        display: inline-flex !important;
        align-items: center !important;
        /* [TACTILE-44, 12/10/2026] 42 -> 44. Deux pixels, et un `!important`
           qui explique pourquoi ma premiere correction n'a rien change : cette
           regle porte un identifiant et une priorite, donc la mienne, ajoutee
           plus bas sans les deux, ne pouvait pas la battre. Mesure a l'appui —
           le bouton rendait toujours 42 px. */
        min-height: 44px !important;
        padding: 0.6rem 0.5rem !important;
        font-size: 0.82rem !important;
      }
    }

    .sticky-cta-bar.visible {
      bottom: 0;
    }

    /* La barre fixe recouvrait le bouton d'envoi d'une fenêtre ouverte. */
    body:has(.modal-backdrop.open) .sticky-cta-bar {
      display: none;
    }

    .sticky-cta-info {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
    }

    .sticky-cta-title {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 14px;
      font-weight: 800;
      color: var(--text-primary);
    }

    .sticky-cta-desc {
      font-size: 11.5px;
      color: var(--text-secondary);
    }

    .sticky-cta-actions {
      display: flex;
      gap: var(--sp-12);
    }

    /* Service Table & Card Accordion */
    .service-row-secondary {
      display: none;
    }

    .service-row-secondary.show {
      display: table-row !important;
    }

    .service-card-secondary {
      display: none;
    }

    .service-card-secondary.show {
      display: block !important;
    }

    /* Avant les règles mobiles, qui doivent l'emporter (bouton sous la barre fixe sinon). */
    .back-to-top-btn {
      bottom: 96px !important;
    }

    @media (max-width: 900px) {
      .sticky-cta-bar {
        flex-direction: column;
        gap: var(--sp-12);
        padding: var(--sp-16) var(--sp-24);
        text-align: center;
      }

      .sticky-cta-info {
        align-items: center;
      }

      .sticky-cta-desc {
        display: none;
      }

      .sticky-cta-actions {
        width: 100%;
        justify-content: center;
      }

      .sticky-cta-actions .btn {
        flex-grow: 1;
        text-align: center;
        justify-content: center;
      }

      .back-to-top-btn {
        bottom: 140px !important;
      }

      /* Le bas de page passe au-dessus de la barre fixe. */
      body {
        padding-bottom: 150px;
      }
    }

    @media (max-width: 480px) {
      .sticky-cta-bar {
        padding: var(--sp-12) var(--sp-16);
        gap: var(--sp-8);
      }

      .sticky-cta-title {
        font-size: 13px;
      }

      .sticky-cta-actions {
        gap: var(--sp-8);
      }

      .sticky-cta-actions .btn {
        padding: 8px 10px;
        font-size: 11px;
      }

      .back-to-top-btn {
        bottom: 130px !important;
      }

      body {
        padding-bottom: 120px;
      }
    }

    .pillar-kpi {
      margin-top: auto;
      width: 100%;
      padding-top: 0;
      border-top: none;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .pillar-kpi-value {
      font-size: 24px;
      font-weight: 800;
      color: var(--icon-color);
      letter-spacing: -0.5px;
    }

    .pillar-kpi-source {
      font-size: 11px;
      font-weight: 500;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    /* Limitation de la largeur de toute la landing page à partir des garanties */
    .value-pillars-section,
    .benefits-section,
    .persona-section,
    .services-section,
    .story-section,
    .unified-ecosystem-section,
    .trust-security-section,
    .case-results-section,
    .partner-section {
      max-width: 1100px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: var(--sp-16) !important;
      padding-right: var(--sp-16) !important;
      box-sizing: border-box !important;
    }

    /* La carte « Votre prochaine étape » est un encadré qui EST le contenu :
       elle se cale sur la largeur de contenu (1068 = 1100 - 2×16), pas sur
       la largeur de section, pour aligner son cadre avec les cartes. */
    .faq-next-steps {
      max-width: 1068px !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }

    /* Cartes du hero alignées sur la même largeur que les sections (1100). */
    .hero-cards {
      max-width: 1100px;
    }

    /* [COMMENT-CA-MARCHE, 16/09/2026] Quatre temps : quatre colonnes, deux sur
       tablette. La grille du hero en fait trois, ce qui laissait une carte
       orpheline sur une seconde ligne. */
    .hero-cards.cards-4 {
      grid-template-columns: repeat(4, 1fr);
    }

    @media (max-width: 1100px) and (min-width: 901px) {
      .hero-cards.cards-4 {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    /* [MOBILE-CASSE, 16/09/2026 — constat Kane] Une colonne sous 900 px, comme
       les autres grilles. La règle `.hero-cards { grid-template-columns: 1fr }`
       du média mobile existait déjà, mais `.hero-cards.cards-4` la bat en
       spécificité : les quatre cartes restaient côte à côte, à 62 px de large
       sur un téléphone. Une règle plus précise ne se corrige que par une règle
       aussi précise. */
    @media (max-width: 900px) {
      .hero-cards.cards-4 {
        grid-template-columns: 1fr;
      }
    }

    /* Grilles de cartes 3 colonnes -> 1 colonne sur mobile (les grilles
       inline en repeat(3,1fr) ne s'effondrent pas seules). */
    @media (max-width: 900px) {
      .cards-3col {
        grid-template-columns: 1fr !important;
      }
    }

    /* Rythme vertical uniforme entre toutes les sections de la page.
       margin-top: 0 pour ne pas cumuler avec la marge basse de la section
       précédente ; une seule valeur de marge basse partout. */
    .value-pillars-section,
    .unified-ecosystem-section,
    .agents-objection-section,
    .benefits-section,
    .persona-section,
    .services-section,
    .story-section,
    .trust-security-section,
    .case-results-section,
    .faq-next-steps,
    .partner-section {
      margin-top: 0 !important;
      margin-bottom: var(--sp-48) !important;
    }

    /* Sticky Header matching medconnect.choraigraph.ai
     *
     * [UI-030] La `padding` n'est PLUS redéclarée ici : elle vient de
     * `exec_theme.css` (`0.8rem 3rem`, et `0.85rem 1rem` sous 768 px), comme
     * pour toutes les autres pages statiques. Cette page portait `1.5rem` sans
     * media query — le logo et le menu démarraient donc à 24 px alors que
     * /terms, /pricing et les autres démarrent à 48 px : la landing paraissait
     * décalée à gauche, et le décalage suivait l'utilisateur d'une page à
     * l'autre. Les autres propriétés restent, elles ne divergent pas du thème.
     */
    header {
      position: sticky !important;
      top: 0 !important;
      z-index: 1000 !important;
      background: var(--surface) !important;
      backdrop-filter: blur(16px) !important;
      border-bottom: 1px solid var(--border) !important;
      min-height: 70px !important;
      transition: background 0.3s ease, border-color 0.3s ease;
    }

    /* Top Phone Bar & Mobile Nav Drawer */
    .phone-bar {
      background: linear-gradient(90deg, #0891B2, #0D9488);
      color: #FFFFFF;
      padding: 6px 2rem;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      box-sizing: border-box;
    }

    .phone-bar a {
      color: #FFFFFF;
      text-decoration: none;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .phone-bar-info {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .mobile-menu-toggle {
      display: none;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-primary);
      border-radius: 10px;
      padding: 8px;
      cursor: pointer;
      align-items: center;
      justify-content: center;
    }

    /* [UI-031] Bloc RETIRÉ : il recopiait à l'identique le tiroir de
     * `exec_theme.css`, y compris l'animation sur `right` responsable du
     * tremblement. Le doublon aurait annulé le correctif du thème sur cette
     * seule page — et c'est celle qui sert aussi de vitrine carehelios.
     * Une seule définition, dans le thème. */

    .mobile-drawer-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--border);
    }

    .mobile-menu-close {
      background: transparent;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      display: flex;
      align-items: center;
    }

    .mobile-drawer-links {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
      margin-bottom: auto;
    }

    .mobile-drawer-links a {
      color: var(--text-primary);
      text-decoration: none;
      font-size: 1.05rem;
      font-weight: 600;
      transition: color 0.2s;
    }

    .mobile-drawer-links a:hover {
      color: var(--accent);
    }

    .mobile-drawer-actions {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      padding-top: 1rem;
      border-top: 1px solid var(--border);
    }

    header nav {
      display: flex;
      align-items: center;
      gap: 1.8rem;
    }

    header nav a {
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 14px;
      font-weight: 600;
      transition: color 0.2s ease;
    }

    header nav a:hover {
      color: var(--accent);
    }

    @media (max-width: 900px) {
      .phone-bar {
        padding: 6px 1rem;
        font-size: 12px;
        justify-content: center;
        text-align: center;
      }
      .phone-bar .phone-bar-info { display: none; }
      header nav { display: none !important; }
      .mobile-menu-toggle { display: inline-flex; }
      /* l'icône « Nous contacter » tient sur la ligne à 375 px */
      .nav-actions { gap: 8px; }
      .nav-actions .pricing-link,
      .nav-actions .phone-link,
      .nav-actions .header-contact-btn { display: none !important; }
    }

    @media (max-width: 900px) {
      .cockpit-window {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 520px !important;
        border-radius: 14px !important;
      }
      .cockpit-body {
        flex-direction: column !important;
      }
      .cockpit-sidebar {
        width: 100% !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        border-right: none !important;
        border-bottom: 1.5px solid var(--cockpit-border) !important;
        padding: 8px 12px !important;
        gap: 6px !important;
      }
      .cockpit-sidebar-group {
        display: flex !important;
        flex-direction: row !important;
        gap: 6px !important;
        margin-bottom: 0 !important;
      }
      .cockpit-sidebar-group-title {
        display: none !important;
      }
      .cockpit-sidebar-item {
        padding: 6px 10px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        border-left: none !important;
        border-bottom: 2px solid transparent !important;
        border-radius: 8px !important;
      }
      .cockpit-sidebar-item.active {
        border-bottom-color: var(--accent) !important;
        border-left-color: transparent !important;
      }
      .cockpit-main {
        padding: 12px !important;
      }
      .cockpit-main-header {
        margin-bottom: 10px !important;
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════
       [TACTILE-44, 12/10/2026] LES ZONES TACTILES DU TELEPHONE.

       MESURE, pas intuition. PageSpeed mobile rendu par Kane : 89 en
       performance et 90 en accessibilite, contre 100/100 sur ordinateur. Un
       audit de la page reelle en emulation mobile (390x844, tactile) a trouve
       TRENTE-TROIS zones sous les 44 px recommandes — dont trois qu'on touche
       en premier :

         · le bouton du MENU mobile .......... 36 x 36
         · le bouton de theme ................ 35 x 30
         · le lien de telephone .............. 123 x 18
         · « Espace client » ................. 38 x 38
         · le bandeau d'offre ................ 300 x 32
         · les sept liens de pied de page ....  36 de haut

       44 px n'est pas une preference : c'est la taille en dessous de laquelle
       un doigt rate sa cible, et rater le bouton du menu sur un telephone,
       c'est ne pas trouver la navigation.

       ON NE CHANGE QUE LA CIBLE, PAS LE DESSIN : `min-height` et `min-width`
       laissent la mise en page faire ce qu'elle faisait, et ajoutent seulement
       la surface qui manquait. Le centrage evite qu'un bouton court se colle
       en haut de sa nouvelle boite.
       ═══════════════════════════════════════════════════════════════════════ */
    @media (max-width: 900px) {
      .mobile-menu-toggle,
      #theme-toggle-btn,
      .btn-outlined,
      .btn-banner-contact,
      #btn-toggle-services,
      .footer-link,
      a[href^="tel:"] {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      /* Les liens de pied de page s'alignent sur leur COLONNE : les centrer
         ferait danser sept liens de longueurs differentes. */
      .footer-link { justify-content: flex-start; }

      /* ── DEUXIEME PASSE : ce que le premier tour avait laisse ─────────────
         Apres la premiere correction, l'audit est passe de 33 a 16 zones sous
         44 px. Les seize restantes etaient d'autres familles de controles :

           · la CROIX DE FERMETURE des modales ....... 8 x 16  <- la pire
           · les puces de defi (challenge-chip) ...... 35 de haut
           · trois boutons d'action .................. 41 et 42 px
           · les cases a cocher du formulaire ........ 18 px

         La croix de fermeture est le pire cas : huit pixels de large, sur une
         modale qui recouvre l'ecran — qui la rate ne voit plus la page.

         LES CASES A COCHER GARDENT LEUR TAILLE. Une case de 44 px serait
         ridicule ; ce qui grandit, c'est l'ETIQUETTE qui la bascule — et c'est
         elle qu'un doigt vise. La ligne entiere devient la cible. */
      .modal-close-btn,
      .challenge-chip,
      .btn,
      .cookie-btn-accept,
      .cookie-btn-reject {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .gdpr-row {
        min-height: 44px;
        align-items: center;
      }

      .gdpr-row input,
      .cgu-row input {
        flex-shrink: 0;
      }
    }

/* [OFFRE-ANIMEE, 19/10/2026] La largeur du « 100 » est réservée par landing.js. */
.offre-compteur { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }

/* [BADGE-MOBILE, 19/10/2026] Le badge porte desormais une PHRASE, et l'animation
   remplace « 100 » par un <span>. Dans un conteneur flex, le texte et le span
   deviennent des elements distincts qui se reordonnent en mobile : « DEMARREZ
   L'ESSAI AVEC » / « 100 » / « MILLIONS DE TOKENS… ». On rend le badge BLOC :
   le texte se lit comme une phrase, le compteur reste inline au milieu.
   Regle par identifiant : elle l'emporte sur `.capsule` sans le modifier. */
#hero-badge {
  display: inline-block;
  text-align: center;
  white-space: normal;
  line-height: 1.5;
  max-width: min(560px, 92vw);
}

/* [MARQUE-MOBILE, 19/10/2026] Sur carehelios.com la marque devient
   « ChorAigraph by Carehelios » : la signature est injectee en style inline
   (font-size 0.62em, nowrap), et sur mobile elle passait a la ligne, coupee du
   logo. On garde le groupe sur UNE ligne et on retrecit la signature.
   !important : les valeurs sont en style inline, une regle ordinaire perdrait. */
.logo-group { white-space: nowrap; flex-wrap: nowrap; }

@media (max-width: 640px) {
  /* Le mot « ChorAigraph » est masque en mobile (.logo-text, display none, dans
     exec_theme.css) : il ne reste que l'icone et la signature, mais leurs MARGES
     restent. D'ou cet ecart. On les annule : l'icone touche presque la signature. */
  .logo-img-wrapper { margin-right: 4px; }
  .logo-byline { font-size: .5em !important; margin-left: 0 !important; letter-spacing: 0 !important; }
  .logo-text { font-size: .92em; }
}

/* [BADGE-DESKTOP, 19/10/2026 — demande Kane] En desktop, la phrase du badge tient
   sur UNE ligne : plus de largeur maximale (c'est elle qui forcait le retour a
   la ligne) et pas de coupure. En mobile on garde le retour a la ligne, sinon la
   phrase deborderait de l'ecran. */
@media (min-width: 641px) {
  #hero-badge { max-width: none; white-space: nowrap; }
}