/* ============================================
   VARIABLES CSS & RESET
   ============================================ */
:root {
    /* Palette de couleurs thématiques (HSL pour manipulation facile) */
    --color-basic: 145, 63%, 42%;      /* Vert pour "Réglages de base" */
    --color-audit: 210, 70%, 50%;      /* Bleu pour "Audit" */
    --color-monthly: 35, 80%, 50%;     /* Orange pour "Suivi mensuel" */
    --color-innovation: 270, 60%, 60%; /* Violet pour "Innovation" */
    --color-gold: 45, 100%, 50%;       /* Or pour la carte Premium */
    
    /* Couleurs neutres */
    --text-main: #1a1a1a;
    --text-light: #555;
    --bg-page: #fff;
    --bg-footer: #f9fafb;
    
    /* Espacements & Layout */
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --radius-card: 16px;
    --container-width: 1200px;
    
    /* Typographie */
    --font-main: 'Inter', system-ui, sans-serif;
}

/* Reset de base pour uniformiser le comportement des navigateurs */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-page);
    color: var(--text-main);
    line-height: 1.6;
}

/* Conteneur centré avec largeur max */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ============================================
   HEADER DYNAMIQUE (STICKY)
   ============================================ */
/* 
   Le header reste collé en haut de la page.
   Au scroll, la classe ".scrolled" est ajoutée par JS pour changer le style.
*/
.site-header {
    padding: 1.5rem 0;
    border-bottom: 1px solid #eee;
    background: white;
    position: sticky; /* Colle le header en haut */
    top: 0;
    z-index: 100;
    transition: all 0.3s ease; /* Animation fluide lors du changement */
}

/* Quand le header est scrollé (classe ajoutée par JS) */
.site-header.scrolled {
    padding: 0.5rem 0; /* Hauteur réduite */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Ombre légère */
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* ========== LOGO (Nom) ========== */
/* Affiché par défaut, disparaît au scroll */
.logo {
    font-size: 1.75rem;
    font-weight: 800;
    text-decoration: none;
    color: var(--text-main);
    transition: opacity 0.3s ease;
    letter-spacing: -0.5px;
}

.logo-accent {
    color: hsl(var(--color-basic)); /* Couleur verte sur "Renaux" */
    font-weight: 900;
}

/* Cache le logo quand on scroll */
.site-header.scrolled .logo {
    opacity: 0;
    pointer-events: none; /* Désactive les clics */
}

/* ========== TITRE DU HEADER ========== */
/* Caché par défaut, apparaît au scroll */
.header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
    opacity: 0; /* Invisible au départ */
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Affiche le titre quand on scroll */
.site-header.scrolled .header-title {
    opacity: 1;
    pointer-events: auto;
}

/* ========== NAVIGATION ========== */
.main-nav {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.nav-link {
    text-decoration: none;
    color: var(--text-light);
    font-weight: 500;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.nav-link:hover {
    color: var(--text-main);
}

/* Bouton "Me contacter" dans le header */
.btn--outline {
    border: 2px solid var(--text-main);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn--outline:hover {
    background: var(--text-main);
    color: white;
    padding: 10px;
}



/* ============================================
   FIX MOBILE HEADER (VERSION FINALE)
   ============================================ */

@media (max-width: 768px) {
    
    /* 1. Ajustement global */
    .header-inner {
        padding: 0 1rem;
    }

    /* 2. Masquer le lien texte "Retour au site" pour gagner de la place */
    .nav-link {
        display: none; 
    }

    /* 3. Bouton Contact plus compact */
    .btn--outline {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        white-space: nowrap; /* Empêche le texte de passer à la ligne */
    }

    /* 4. Comportement au SCROLL sur Mobile */
    
    /* A. Le Logo doit disparaître (comme sur Desktop) */
    .site-header.scrolled .logo {
        opacity: 0;
        pointer-events: none;
        display: none; /* On le retire du flux pour libérer la place */
    }

    /* B. Le Titre "Propositions SEO" doit apparaître */
    .site-header.scrolled .header-title {
        display: block; /* On l'affiche */
        opacity: 1;
        
        /* POSITIONNEMENT MOBILE SPÉCIFIQUE */
        position: static; /* On enlève la position absolute centrée */
        transform: none;  /* On enlève le centrage */
        text-align: left; /* Alignement à gauche */
        
        font-size: 1.1rem; /* Taille adaptée au mobile */
        flex-grow: 1; /* Prend toute la place disponible jusqu'au bouton */
        white-space: nowrap; /* Évite le retour à la ligne */
        overflow: hidden;
        text-overflow: ellipsis; /* Ajoute "..." si l'écran est vraiment trop petit */
    }
    
    /* Ajustement du header scrollé */
    .site-header.scrolled {
        padding: 0.8rem 0;
    }
}














/* ============================================
   SECTION PRINCIPALE (HERO + CARTES)
   ============================================ */
.pricing-section {
    padding: 4rem 0 6rem;
}

/* ========== INTRODUCTION / HERO ========== */
.section-intro {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
    color: var(--text-main);
}

.page-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    line-height: 1.6;
}

/* ============================================
   GRILLE DES 4 PREMIÈRES CARTES
   ============================================ */
/* Grid responsive : adapte automatiquement le nombre de colonnes */
.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
    align-items: stretch; /* Toutes les cartes ont la même hauteur */
}

/* ============================================
   COMPOSANT CARTE (BASE)
   ============================================ */
.card {
    display: flex;
    flex-direction: column; /* Contenu empilé verticalement */
    padding: var(--spacing-lg);
    border-radius: var(--radius-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    border: 1px solid transparent;
    height: 100%;
}

/* ========== THÈMES DE COULEUR PAR CARTE ========== */
/* Chaque modificateur applique un fond coloré et définit --theme-color */
.card--basic {
    background-color: hsl(145, 63%, 96%); /* Vert très clair */
    --theme-color: hsl(var(--color-basic));
}

.card--audit {
    background-color: hsl(210, 100%, 96%); /* Bleu très clair */
    --theme-color: hsl(var(--color-audit));
}

.card--monthly {
    background-color: hsl(35, 100%, 96%); /* Orange très clair */
    --theme-color: hsl(var(--color-monthly));
}

.card--innovation {
    background-color: hsl(270, 100%, 97%); /* Violet très clair */
    --theme-color: hsl(var(--color-innovation));
}

/* ========== EFFET HOVER SUR LES CARTES ========== */
.card:hover {
    transform: translateY(-5px); /* Lève la carte */
    box-shadow: 0 15px 30px rgba(0,0,0,0.05); /* Ombre douce */
    border-color: var(--theme-color); /* Bordure colorée */
}

/* ========== HEADER DE LA CARTE ========== */
.card__header {
    margin-bottom: var(--spacing-md);
}

/* Icône SVG en haut de chaque carte */
.card__icon {
    width: 40px;
    height: 40px;
    color: var(--theme-color); /* Prend la couleur du thème */
    margin-bottom: 1rem;
}

/* Sous-titre (ex: "SEO de base") */
.card__subtitle {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    color: var(--text-light);
    opacity: 0.8;
}

/* Titre principal de la carte */
.card__title {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-main);
}

/* ========== CORPS DE LA CARTE ========== */
.card__body {
    flex-grow: 1; /* Prend tout l'espace disponible pour pousser le footer en bas */
    margin-bottom: var(--spacing-lg);
}

.card__description {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ========== FOOTER DE LA CARTE ========== */
.card__footer {
    border-top: 1px solid rgba(0,0,0,0.05); /* Ligne de séparation */
    padding-top: var(--spacing-md);
}

/* Affichage du prix */
.card__price {
    margin-bottom: 1.25rem;
}

.card__price .amount {
    display: block;
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--text-main);
    line-height: 1;
    margin-bottom: 0.25rem;
}

.card__price .period {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-light);
}

/* ========== ACTIONS (BOUTONS) ========== */
.card__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

/* Lien "En savoir plus" */
.link-more {
    font-size: 0.85rem;
    color: var(--text-light);
    text-decoration: underline;
    text-decoration-color: rgba(0,0,0,0.2);
    text-underline-offset: 3px;
    transition: color 0.2s;
}

.link-more:hover {
    color: var(--text-main);
}

/* Reset des styles par défaut des boutons */
.btn {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}

/* Bouton "Me contacter" (style lien avec flèche) */
.btn--link {
    display: inline-flex;
    align-items: center;
    color: var(--text-main);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    transition: color 0.2s;
}

.btn--link .arrow {
    margin-left: 0.5rem;
    transition: transform 0.2s;
}

/* Effet hover : change la couleur et déplace la flèche */
.card:hover .btn--link {
    color: var(--theme-color);
}

.card:hover .btn--link .arrow {
    transform: translateX(5px);
}

/* ========== BADGE "ONE SHOT" ========== */
/* Badge centré en bas de la première carte */
.card__badge-bottom {
    display: inline-block;
    margin-top: 1.5rem;
    width: 100%;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 0;
    border-radius: 4px;
    background-color: rgba(0,0,0,0.05);
    color: var(--theme-color);
}

/* ============================================
   5ÈME CARTE : PREMIUM "ONE SHOT" (DARK)
   ============================================ */
/* ============================================
   SECTION BASSE : DUO DE CARTES (Mise à niveau + Refonte)
   ============================================ */

/* Conteneur de cette carte spéciale */
/*.special-offer-container {
    margin-top: 3rem;
    display: flex;
    justify-content: center;
    width: 100%;
}*/

.special-offer-container {
    margin-top: 4rem;
    display: grid;
    /* 
       GRID ASYMÉTRIQUE :
       - 1ère colonne (Carte Grise) : minmax(260px, 1fr) -> Même logique que les cartes du haut
       - 2ème colonne (Carte Noire) : 2fr -> Prend 2 fois plus de place (si possible)
    */
    grid-template-columns: minmax(260px, 1fr) 2.5fr; 
    gap: 2rem;
    align-items: stretch; /* Mêmes hauteurs */
    width: 100%;
}

/* --- 1. CARTE GRISE (Même largeur visuelle que les cartes pastels) --- */
.card--upgrade {
    background-color: #f3f4f6; /* Gris neutre */
    --theme-color: #6b7280;    /* Gris moyen */
    
    /* Style standard vertical */
    display: flex;
    flex-direction: column;
    height: 100%; /* Force la hauteur à s'étirer */
}

.card--upgrade .card__badge-bottom {
    background-color: rgba(0,0,0,0.05);
    color: #4b5563;
}

/* --- 2. CARTE NOIRE (Large et imposante) --- */
.card--oneshot {
    background-color: #1a1a1a;
    color: #fff;
    
    /* Layout horizontal interne */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3rem;
    
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    --theme-color: #FFD700;
    
    height: 100%; /* S'aligne sur la hauteur de la grise */
}

/* --- RESPONSIVE --- */
@media (max-width: 1100px) {
    /* 
       Si l'écran est moyen (ex: petite tablette/laptop), 
       on passe les deux cartes l'une en dessous de l'autre 
       pour éviter que la noire ne soit trop écrasée.
    */
    .special-offer-container {
        grid-template-columns: 1fr; /* Une seule colonne */
    }

    /* La carte noire redevient verticale sur mobile/tablette */
    .card--oneshot {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 2rem;
    }

    .card--oneshot .card__footer {
        border-left: none;
        border-top: 1px solid #333;
        padding-left: 0;
        padding-top: 2rem;
        align-items: flex-start;
    }
    
    /* On aligne les features en 1 colonne sur mobile */
    .card__features {
        grid-template-columns: 1fr;
    }
    
    .card__actions-oneshot {
        align-items: flex-start;
    }
}


/* Carte avec fond sombre pour la différencier */
.card--oneshot {
    background-color: #1a1a1a; /* Fond noir */
    color: #fff;
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: row; /* Disposition horizontale (2 colonnes) */
    align-items: center;
    gap: 3rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    --theme-color: #FFD700; /* Or */
}

/* Surcharge des couleurs de texte pour le mode sombre */
.card--oneshot .card__title {
    color: #fff;
    font-size: 1.75rem;
}

.card--oneshot .card__subtitle {
    color: #888;
}

.card--oneshot .card__description {
    color: #ccc;
    font-size: 1rem;
}

.card--oneshot .card__price .amount {
    color: #fff;
}

.card--oneshot .card__price .period {
    color: #888;
}

/* Badge "Action Unique" en haut de la carte */
.card__badge-top {
    display: inline-block;
    background: var(--theme-color); /* Fond or */
    color: #000;
    font-weight: 800;
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* Wrapper pour le contenu (partie gauche) */
.card__content-wrapper {
    flex: 1;
}

/* Liste des "features" (inclusions de l'offre) */
.card__features {
    list-style: none;
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.card__features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: #eee;
    font-weight: 500;
}

.card__features li span {
    font-size: 1.2rem; /* Emoji plus grand */
}

/* Footer de la carte (partie droite) */
.card--oneshot .card__footer {
    border-top: none;
    border-left: 1px solid #333; /* Séparation verticale */
    padding-left: 3rem;
    padding-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 250px;
}

/* Actions spécifiques à cette carte */
.card__actions-oneshot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

/* Lien "En savoir plus" pour la carte dark */
.link-more-dark {
    font-size: 0.85rem;
    color: #888;
    text-decoration: underline;
    transition: color 0.2s;
}

.link-more-dark:hover {
    color: #fff;
}

/* Bouton Call-to-Action "Commander ce pack" */
.btn--solid {
    background-color: var(--theme-color); /* Or */
    color: #000;
    padding: 1rem 2rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    width: 100%;
    text-align: center;
    transition: transform 0.2s;
}

.btn--solid:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.3);
}

/* ============================================
   FOOTER COMPLET
   ============================================ */
.site-footer {
    background-color: var(--bg-footer); /* Gris clair */
    color: #4b5563;
    padding-top: 5rem;
    padding-bottom: 2rem;
    border-top: 1px solid #e5e7eb;
    font-size: 0.95rem;
}

/* ========== SECTION RESSOURCES PÉDAGOGIQUES ========== */
.footer-resources {
    margin-bottom: 4rem;
}

.footer-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    text-align: center;
    margin-bottom: 0.5rem;
}

.footer-subtitle {
    text-align: center;
    color: #6b7280;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Grid des mini-cartes de ressources */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Carte de ressource (lien cliquable) */
.resource-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.resource-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    border-color: #cbd5e1;
}

.resource-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.resource-content h4 {
    color: #111827;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.resource-content p {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.resource-link {
    font-size: 0.8rem;
    font-weight: 600;
    color: hsl(var(--color-basic)); /* Couleur verte */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ========== SÉPARATEUR ========== */
.footer-divider {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 0 0 4rem 0;
}

/* ========== GRILLE PRINCIPALE DU FOOTER ========== */
.footer-main-grid {
    display: grid;
    grid-template-columns: 1.5fr 1.2fr 0.8fr; /* 3 colonnes */
    gap: 4rem;
    margin-bottom: 4rem;
}

/* Sur mobile : passage en 1 colonne */
@media (max-width: 900px) {
    .footer-main-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* ========== COLONNE BRAND (Nom + Contact) ========== */
.footer-brand {
    font-size: 1.25rem;
    font-weight: 800;
    color: #111827;
    margin-bottom: 1rem;
}

.text-accent {
    color: hsl(var(--color-basic)); /* "Renaux" en vert */
}

.footer-bio {
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 350px;
}

/* Bouton mail dans le footer */
.footer-mail-btn {
    display: inline-block;
    background: #111827;
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.footer-mail-btn:hover {
    background: #000;
}

/* ========== COLONNE EXPLICATION SEO ========== */
.footer-col h4 {
    color: #111827;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.seo-definition {
    line-height: 1.7;
    font-size: 0.9rem;
}

.seo-definition strong {
    color: #111827;
}

/* ========== COLONNE NAVIGATION ========== */
.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 0.75rem;
}

.footer-links a {
    color: #4b5563;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: hsl(var(--color-basic));
}

/* ========== FOOTER BOTTOM (COPYRIGHT) ========== */
.footer-bottom {
    text-align: center;
    font-size: 0.85rem;
    color: #9ca3af;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

/* ============================================
   MODAL (POPUP DE CONTACT)
   ============================================ */
/* Utilise la balise HTML5 <dialog> */
dialog.modal {
    border: none;
    border-radius: 16px;
    padding: 0;
    box-shadow: 0 25px 50px rgba(0,0,0,0.2);
    max-width: 450px;
    width: 90%;
    margin: auto; /* Centrage automatique */
    animation: fadeIn 0.3s ease-out;
}

/* Arrière-plan flouté */
dialog.modal::backdrop {
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}

.modal__content {
    padding: 2rem;
    background: white;
    position: relative;
}

/* Bouton de fermeture (croix) */
.modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    border: none;
    background: none;
    font-size: 1.5rem;
    color: #999;
    cursor: pointer;
}

.modal__close:hover {
    color: #333;
}

.modal__title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-main);
}

/* ========== CONTEXTE (OFFRE + PRIX) ========== */
.modal__context {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--text-main);
}

.modal__offer-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #777;
    margin-bottom: 0.25rem;
}

.modal__offer-value {
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.modal__price-badge {
    display: inline-block;
    background: #e9ecef;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #333;
}

/* ========== FORMULAIRE ========== */
.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
}

/* Bouton de soumission */
.btn--submit {
    width: 100%;
    background: #1a1a1a;
    color: white;
    padding: 1rem;
    border-radius: 8px;
    font-weight: 700;
    margin-top: 0.5rem;
    transition: background 0.2s;
}

.btn--submit:hover {
    background: #000;
}

.modal__note {
    text-align: center;
    font-size: 0.75rem;
    color: #888;
    margin-top: 1rem;
}

/* Animation d'apparition de la modale */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   RESPONSIVE : CARTE ONE SHOT (Mobile)
   ============================================ */
@media (max-width: 900px) {
    /* Passe en colonne verticale */
    .card--oneshot {
        flex-direction: column;
        align-items: stretch;
        gap: 2rem;
        text-align: left;
    }

    .card--oneshot .card__footer {
        border-left: none;
        border-top: 1px solid #333;
        padding-left: 0;
        padding-top: 2rem;
        align-items: flex-start;
    }

    .card__features {
        grid-template-columns: 1fr;
    }

    .card__actions-oneshot {
        align-items: flex-start;
    }
}