/* Shared reusable components: buttons, cards, icon tiles, badges, mockup/terminal window. */

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-weight:600;
  border-radius:var(--r-lg);
  text-decoration:none;
  position:relative;
  z-index:0;
}
.btn-primary{
  background:var(--orange-a11y);
  color:#fff;
}
.btn-primary:hover{ background:var(--orange-a11y-hover); }
.btn-secondary{
  background:#fff;
  color:var(--navy);
  border:1px solid var(--border-5);
  box-shadow:0 2px 8px -2px rgba(12,30,60,.18);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn-secondary:hover{ border-color:var(--navy); transform:translateY(-2px); box-shadow:0 10px 22px -6px rgba(12,30,60,.28); }
.btn-text{
  background:none;
  border:none;
  cursor:pointer;
  font-family:inherit;
  font-weight:600;
  color:var(--navy);
  border-bottom:2px solid var(--orange);
  padding-bottom:4px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}

/* ---------- generic card ---------- */
.card{
  background:#fff;
  border:1px solid var(--border-2);
  border-radius:var(--r-4xl);
}
.card h3{ margin:0 0 9px; }

/* ---------- icon tile ---------- */
.icon-tile{
  width:46px;
  height:46px;
  border-radius:var(--r-xl);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  flex:none;
}
.icon-tile--a{ background:var(--navy-gradient); border:1px solid var(--orange); color:var(--orange); box-shadow:0 0 0 1px rgba(221,122,51,.25), 0 0 16px rgba(221,122,51,.35); }
.icon-tile--b{ background:var(--navy-gradient); border:1px solid var(--blue-2); color:#fff; box-shadow:0 0 0 1px rgba(46,155,255,.35), 0 0 16px rgba(46,155,255,.4); }
.icon-tile--green{ background:var(--navy-gradient); border:1px solid var(--green); color:var(--green-bright); box-shadow:0 0 0 1px rgba(30,142,90,.25), 0 0 16px rgba(30,142,90,.35); }
.icon-tile svg{ stroke-width:2; }
.automations__card--link:hover .icon-tile--a{ box-shadow:0 0 0 1px rgba(221,122,51,.4), 0 0 26px rgba(221,122,51,.6); }
.automations__card--link:hover .icon-tile--b{ box-shadow:0 0 0 1px rgba(46,155,255,.4), 0 0 26px rgba(46,155,255,.6); }
.automations__card--link:hover .icon-tile--green{ box-shadow:0 0 0 1px rgba(30,142,90,.4), 0 0 26px rgba(30,142,90,.6); }

/* Quand la tuile encapsule un vrai logo de marque (eb_tool_icon_html), pas
   de double cadre concurrent : la tuile extérieure s'efface, et c'est le
   badge du logo lui-même (déjà à ses propres couleurs officielles) qui
   porte le cadre + la lueur, dans un ton neutre qui reste cohérent quelle
   que soit la couleur de la marque en dessous. */
.icon-tile:has(.tool-chip__abbr){
  background:none; border:none; box-shadow:none; padding:0;
}
.icon-tile .tool-chip__abbr{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 0 0 1.5px rgba(199,210,228,.5), 0 0 16px rgba(91,182,255,.4), 0 3px 8px -3px rgba(12,30,60,.35);
  transition:box-shadow .2s ease;
}
.icon-tile .tool-chip__abbr--logo{
  box-shadow:0 0 0 1.5px rgba(199,210,228,.6), 0 0 16px rgba(91,182,255,.4);
}
.differentiators__card:hover .tool-chip__abbr{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 2px rgba(91,182,255,.7), 0 0 26px rgba(91,182,255,.65), 0 3px 8px -3px rgba(12,30,60,.4);
}
.differentiators__card:hover .tool-chip__abbr--logo{
  box-shadow:0 0 0 2px rgba(91,182,255,.7), 0 0 26px rgba(91,182,255,.65);
}

/* Bordure teintée légère : la carte reste blanche, seul un liseré reprend la couleur de son icône (pêche/bleu/vert). */
.automations__card:has(.icon-tile--a),
.differentiators__card:has(.icon-tile--a){ border-color:var(--orange-soft-border); }
.automations__card:has(.icon-tile--b),
.differentiators__card:has(.icon-tile--b){ border-color:#C7E1FF; }
.automations__card:has(.icon-tile--green),
.differentiators__card:has(.icon-tile--green){ border-color:var(--green-border); }

/* ---------- badge pill ---------- */
.badge-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  font-weight:600;
  padding:6px 13px;
  border-radius:20px;
}
.badge-pill--green{ background:var(--green-bg); color:var(--green); }
.badge-pill--orange{ background:var(--orange-soft-bg); color:var(--navy); }

/* ---------- check list item ---------- */
.check-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13.5px;
  line-height:1.4;
}
.check-item__mark{ flex:none; }

/* ---------- terminal / mockup window ---------- */
.mockup{
  border-radius:var(--r-4xl);
  overflow:hidden;
}
.mockup--navy{
  background:var(--navy-panel);
  border:1px solid var(--navy-panel-border);
}
.mockup__titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 16px;
  border-bottom:1px solid var(--navy-panel-border);
}
.mockup__dots{
  display:flex;
  align-items:center;
  gap:7px;
  flex:none;
}
.mockup__dots span{
  width:10px;
  height:10px;
  border-radius:50%;
  display:block;
}
.mockup__dots span:nth-child(1){ background:var(--dot-red); }
.mockup__dots span:nth-child(2){ background:var(--dot-yellow); }
.mockup__dots span:nth-child(3){ background:var(--dot-green); }
.mockup__filename{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted-on-navy-3);
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin:0 12px;
}
.mockup__live{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--green-bright);
  flex:none;
}
.mockup__live-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green-bright);
  box-shadow:0 0 10px rgba(91,203,139,1);
  animation:ebblink 1.4s ease-in-out infinite;
}

/* ---------- left-aligned page hero (Solutions, Réalisations — matches EB Automatisation V2.dc.html) ---------- */
.hero-left{
  max-width:1200px;
  margin:0 auto;
  padding:84px 40px 50px;
}
.hero-left__eyebrow{ margin-bottom:18px; }
.hero-left h1{ max-width:820px; margin:0 0 20px; font-size:52px; line-height:1.06; }
.hero-left p{ max-width:660px; font-size:19px; line-height:1.6; color:var(--muted-on-navy); margin:0; }
.hero-left__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.hero-left__actions .btn-primary{ padding:15px 26px; font-size:15.5px; box-shadow:0 14px 30px -14px rgba(221,122,51,.7); }
.hero-left__reassurance{ margin-top:22px; }
/* aligné à gauche comme le reste du bloc (titre, texte, bouton, pastille) :
   le centrer dans une colonne plus large que le texte visible le faisait
   flotter, déconnecté, du côté droit du hero. */
.hero-left__reviews{ margin-top:22px; }
@media (max-width:640px){
  .hero-left{ padding:48px 20px 30px; text-align:center; }
  .hero-left h1{ font-size:32px; line-height:1.14; margin-left:auto; margin-right:auto; }
  .hero-left p{ margin-left:auto; margin-right:auto; }
  .hero-left__actions{ flex-direction:column; align-items:stretch; }
  .hero-left__actions .btn-primary{ width:100%; justify-content:center; }
  .hero-left__reassurance{ display:flex; justify-content:center; }
}

/* ---------- CTA final navy à motif de points (Solutions, Réalisations, À propos) ---------- */
.cta-dotted{
  background-color:#15305C;
  background-image:var(--navy-gradient);
  border-radius:22px;
  padding:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.cta-dotted__text{ max-width:640px; }
.cta-dotted h2{ font-size:32px; line-height:1.15; letter-spacing:-.02em; color:#fff; margin:0 0 10px; }
.cta-dotted p{ font-size:16px; line-height:1.55; color:var(--muted-on-navy); margin:0; }
.cta-dotted .btn-primary{ font-size:16.5px; padding:18px 32px; white-space:nowrap; box-shadow:0 16px 36px -14px rgba(221,122,51,.85); }
@media (max-width:640px){
  .cta-dotted{ padding:28px; flex-direction:column; text-align:center; }
  .cta-dotted__text{ max-width:none; }
  .cta-dotted .btn-primary{ width:100%; justify-content:center; }
}

/* ---------- tool chip (bandeaux d'outils : Accueil, Solutions, Réalisations, À propos, piliers) ---------- */
.tool-chip-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.tool-chip-grid--home{ max-width:960px; margin:0 auto; }
.tool-chip-grid__note{
  font-size:13.5px; color:var(--text-3); line-height:1.5; margin:16px 0 0; text-align:center;
  background:var(--bg-soft-2); border:1px solid var(--border-2); border-radius:11px; padding:13px 18px;
}
.tool-chip-grid__note strong{ color:var(--navy); }
.tool-chip{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-heading); font-weight:700; font-size:14.5px; color:var(--navy);
  background:#fff; border:1px solid var(--border-3); padding:12px 15px; border-radius:11px;
  overflow:hidden;
}
/* le libellé est un noeud de texte brut, flanqué de l'icône et parfois du
   chevron (éléments) : en display:flex, un noeud de texte devient son propre
   item flex anonyme avec un min-width:auto implicite — il ne peut alors pas
   rétrécir sous sa largeur intrinsèque (ex. "Google Workspace" sur 2 colonnes
   mobile) et déborde de la puce, non contenu. On l'enveloppe dans un span
   qui peut, lui, rétrécir et passer à la ligne normalement. */
.tool-chip__label{ flex:1; min-width:0; }
.tool-chip__abbr{
  width:34px; height:34px; flex:none; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-weight:700; font-size:13px; letter-spacing:-.01em;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 3px 8px -3px rgba(12,30,60,.35);
}
/* logo officiel (SVG local) : fond neutre clair plutôt que la couleur de marque en aplat,
   plus lisible pour une marque complexe qu'un simple monogramme */
.tool-chip__abbr--logo{
  background:#fff; border:1px solid var(--border-3); box-shadow:none;
}
.tool-chip__abbr--logo img{ width:20px; height:20px; display:block; }
/* variante cliquable : vraie balise <a>, quand une page interne existe réellement */
.tool-chip--link{
  color:var(--navy); text-decoration:none; cursor:pointer;
  border-color:var(--orange-soft-border-2);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tool-chip--link:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card); border-color:var(--orange-a11y); }
.tool-chip--link:hover .tool-chip__abbr{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 0 0 3px rgba(46,155,255,.22), 0 0 14px rgba(46,155,255,.55); }
.tool-chip--link:hover .tool-chip__abbr--logo{ border-color:var(--blue-2); box-shadow:0 0 12px rgba(46,155,255,.4); }
.tool-chip--link:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.tool-chip__chevron{
  margin-left:auto; flex:none; color:var(--orange-a11y); opacity:.85;
  transition:transform .16s ease, opacity .16s ease;
}
.tool-chip--link:hover .tool-chip__chevron,
.tool-chip--link:focus-visible .tool-chip__chevron{ transform:translateX(2px); opacity:1; }

/* ---------- différenciation (Accueil, Solutions, À propos) ---------- */
.differentiators__intro{ max-width:920px; margin:0 auto 34px; text-align:center; }
.differentiators__intro h2{ margin:0 0 14px; }
.differentiators__intro p{ font-size:17px; line-height:1.64; color:var(--text-2); text-align:left; }
.differentiators__card{ padding:30px; display:flex; flex-direction:column; height:100%; }

/* ---------- CTA final (Accueil, Solutions, Réalisations, À propos) ---------- */
.final-cta-section{ padding-bottom:40px; }
/* fond légèrement teinté + halo + liseré dégradé en haut : la carte était
   jusqu'ici un simple encart blanc plat (titre + texte + bouton), sans rien
   qui la distingue visuellement du reste de la page. */
.final-cta-card{
  position:relative; isolation:isolate; overflow:hidden;
  background:linear-gradient(180deg, #F3F7FF 0%, #fff 60%);
  border:1px solid var(--border-2); border-radius:var(--r-7xl);
  padding:56px; text-align:center; box-shadow:var(--shadow-cta-final);
}
.final-cta-card::before{
  content:""; position:absolute; z-index:-1; top:-70px; right:-70px; width:240px; height:240px;
  border-radius:50%; background:radial-gradient(circle, rgba(46,155,255,.16), transparent 70%);
}
.final-cta-card::after{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:120px; height:3px; border-radius:0 0 4px 4px;
  background:linear-gradient(90deg, var(--blue-2), var(--orange));
}
.final-cta-card__desc{ font-size:17px; color:var(--text-3); margin:0 0 30px; }
.final-cta-card__cta{ padding:16px 30px; font-size:16px; box-shadow:var(--shadow-btn-orange-lg); }

/* ---------- back to top ---------- */
.back-to-top{
  position:fixed;
  right:24px;
  bottom:24px;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--navy-gradient);
  color:#fff;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(12,30,60,.5);
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease, visibility 0s .2s;
  z-index:999;
}
.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .2s ease, transform .2s ease, box-shadow .2s ease, visibility 0s;
}
.back-to-top:hover{ box-shadow:0 14px 30px -10px rgba(12,30,60,.65); }

@media (max-width:640px){
  .final-cta-card__cta{ width:100%; justify-content:center; }
  .tool-chip-grid{ grid-template-columns:repeat(2,1fr); }
  .back-to-top{ right:16px; bottom:16px; width:42px; height:42px; font-size:17px; }
}

/* ---------- avis Google ---------- */
.google-reviews-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(180deg,#fff 0%,#F4F8FF 100%);
  border:1px solid var(--border-2);
  border-radius:30px;
  padding:9px 16px 9px 13px;
  box-shadow:0 0 0 1px rgba(46,155,255,.07), 0 8px 20px -12px rgba(12,30,60,.4);
}
/* variante posée sur un fond sombre (hero, footer) : une puce blanche plate
   tranche trop fort sur le navy — même traitement "lueur" que le reste des
   composants de ces panneaux (fond translucide + liseré + halo bleu), au
   lieu d'essayer de la fondre avec un simple dégradé interne (imperceptible
   sur un fond sombre). */
.google-reviews-badge--on-dark{
  background:rgba(10,26,51,.6);
  border:1px solid rgba(46,155,255,.45);
  box-shadow:0 0 0 1px rgba(46,155,255,.18), 0 0 22px rgba(46,155,255,.3);
}
.google-reviews-badge--on-dark .google-reviews-badge__score{ color:#fff; }

/* ---------- pastille de réassurance (bandeau CTA), partagée par toutes les
   pages avec un hero sombre — même traitement que .hero__reassurance
   (accueil) sous un nom générique pour être réutilisée telle quelle. ---------- */
.reassurance-pill{
  display:flex;align-items:center;gap:10px;color:#fff;font-size:14px;
  width:fit-content;padding:11px 20px;border-radius:30px;
  background:rgba(10,26,51,.6);border:1px solid rgba(91,203,139,.45);position:relative;
  box-shadow:0 0 0 1px rgba(91,203,139,.18), 0 0 22px rgba(91,203,139,.3);
}
.reassurance-pill::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;
  border:1.5px solid var(--green-bright);
  box-shadow:0 0 18px rgba(91,203,139,.9), 0 0 34px rgba(91,203,139,.6);
  opacity:0;pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .reassurance-pill::before{ animation:ebbadgeflash 3s ease-in-out infinite; }
}
.reassurance-pill__check{ color:var(--green-bright);font-size:16px;text-shadow:0 0 10px rgba(91,203,139,.9); }
/* le logo Google (svg brut, seul enfant non-span) a un centrage optique
   légèrement haut par rapport au score/étoiles — recalé de 1px. */
.google-reviews-badge > svg{ flex:none; position:relative; top:1px; }
.google-reviews-badge__score{ font-family:var(--font-heading); font-weight:700; font-size:15px; color:var(--navy); }
.google-reviews-badge__stars{ display:inline-flex; gap:1px; line-height:0; }

.reviews-section{ text-align:center; }
.reviews-section .google-reviews-badge{ margin:0 auto 36px; }
.reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:left; }
.review-card{
  background:#fff; border:1px solid var(--border-2); border-radius:18px; padding:26px;
  display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-card);
}
.review-card__stars{ display:inline-flex; gap:2px; line-height:0; }
.review-card__text{ font-size:15px; line-height:1.6; color:var(--text-3); margin:0; flex:1; }
.review-card__author{ display:flex; align-items:center; gap:10px; }
.review-card__avatar{
  width:36px; height:36px; border-radius:50%; flex:none;
  background:var(--navy-panel); border:1px solid var(--blue-2); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-weight:700; font-size:14px;
  box-shadow:0 0 0 1px rgba(46,155,255,.25), 0 0 12px rgba(46,155,255,.3);
}
.review-card__name{ font-family:var(--font-heading); font-weight:700; font-size:14.5px; color:var(--navy); }
.review-card__company{ font-size:13px; color:var(--muted); }

.reviews-appreciated{ margin-top:52px; text-align:center; }
.reviews-appreciated h3{ font-size:19px; margin:0 0 24px; color:var(--navy); }
.reviews-appreciated__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; text-align:left; }
.reviews-appreciated__item{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--bg-soft); border:1px solid var(--border); border-radius:14px; padding:20px;
}
.reviews-appreciated__icon{
  width:30px; height:30px; flex:none; border-radius:9px;
  background:var(--navy-gradient); border:1px solid var(--blue-2); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px;
  box-shadow:0 0 0 1px rgba(46,155,255,.25), 0 0 10px rgba(46,155,255,.3);
}
.reviews-appreciated__title{ font-family:var(--font-heading); font-weight:700; font-size:14.5px; color:var(--navy); margin-bottom:4px; }
.reviews-appreciated__desc{ font-size:13.5px; line-height:1.5; color:var(--text-3); }

/* ---------- mini-avis isolé (preuve sociale ponctuelle hors section complète) ---------- */
.mini-review{
  background:#fff; border:1px solid var(--border-2); border-radius:14px; padding:18px 20px;
  display:flex; flex-direction:column; gap:8px;
}
.mini-review__stars{ display:inline-flex; gap:1px; line-height:0; }
.mini-review__text{ font-size:14px; line-height:1.55; color:var(--text-3); margin:0; }
.mini-review__author{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); }
.mini-review__author .review-card__avatar{ width:28px; height:28px; font-size:12px; }
.mini-reviews-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:820px; margin:0 auto; }

/* ---------- teaser tarif contextuel (pages Solutions + métier) ---------- */
.price-teaser{
  max-width:820px; margin:40px auto; background:var(--bg-soft); border:1px solid var(--border);
  border-radius:14px; padding:20px 26px; text-align:center; font-size:15px; line-height:1.55; color:var(--text-2);
}
.price-teaser strong{ color:var(--navy); }
.price-teaser a{ font-weight:600; }

@media (max-width:900px){
  .reviews-grid{ grid-template-columns:1fr; }
  .reviews-appreciated__grid{ grid-template-columns:1fr; }
  .mini-reviews-row{ grid-template-columns:1fr; }
}

/* ---------- tarifs (Accueil, Audit gratuit) ---------- */
.pricing__grid{ gap:18px;align-items:stretch; }
.pricing__card{
  background:#fff;border:1px solid var(--border-2);border-radius:var(--r-4xl);
  padding:32px;display:flex;flex-direction:column;height:100%;position:relative;
}
.pricing__card--featured{ background:var(--navy-gradient);border-color:var(--orange);box-shadow:0 22px 50px -22px rgba(221,122,51,.55); }
.pricing__ribbon{
  position:absolute;top:-13px;left:32px;background:var(--orange-a11y);color:#fff;
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:5px 12px;border-radius:20px;
}
.pricing__name{ font-family:var(--font-heading);font-weight:600;font-size:20px;letter-spacing:-.01em;margin-bottom:6px;color:var(--navy); }
.pricing__card--featured .pricing__name{ color:#fff; }
.pricing__tagline{ font-size:13.5px;margin-bottom:22px;color:var(--muted); }
.pricing__card--featured .pricing__tagline{ color:var(--muted-on-navy); }
.pricing__features{ display:flex;flex-direction:column;gap:11px;flex:1; }
.pricing__feature{ display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--text-5); }
.pricing__card--featured .pricing__feature{ color:#E7ECF4; }
.pricing__check{ color:var(--green);flex:none; }
.pricing__card--featured .pricing__check{ color:var(--green-bright); }
.pricing__price-row{ border-top:1px solid var(--border);margin-top:22px;padding-top:18px; }
.pricing__card--featured .pricing__price-row{ border-top-color:var(--navy-card-border); }
.pricing__price-label{ font-size:12.5px;color:var(--muted);margin-bottom:2px; }
.pricing__card--featured .pricing__price-label{ color:var(--muted-on-navy); }
.pricing__price{ font-family:var(--font-heading);font-weight:700;font-size:26px;color:var(--navy);letter-spacing:-.02em; }
.pricing__price--free{ color:var(--green); }
.pricing__card--featured .pricing__price{ color:#fff; }
.pricing__footnote{ text-align:center;font-size:13.5px;color:var(--muted);margin:26px auto 0;max-width:640px;line-height:1.55; }
.pricing__cta{ margin-top:28px;padding:16px 30px;font-size:16px;box-shadow:var(--shadow-btn-orange-md); }
@media (max-width:640px){
  .pricing__grid{ gap:26px; }
}