/* ng.css — compléments spécifiques Dr Nathalie Gozlan, par-dessus le thème DG.
   Utilise les mêmes variables (--navy, --blue, --border…) que main.css. */

/* Hero photo : léger dézoom + cadrage vers la gauche (fond gris assorti à la photo) */
.hero-photo{background:#e6e8eb url('/assets/img/dr-nathalie-gozlan.webp') 35% 27% / 87% no-repeat;}
.hero-photo img{display:none;}

/* Hero — badges méta + sous-titre */
.hero-text .subtitle{font-weight:700;}
.hero-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:.9rem;color:var(--text-light);}
.hero-meta b{color:var(--navy);}
.stars{color:#e8b100;letter-spacing:2px;}

/* Hero compact (pages internes, sans photo) */
.hero--compact{padding:54px 5% 34px;}
.hero--compact .hero-inner{display:block;max-width:840px;}
.hero--compact .hero-text h1{font-size:2.3rem;}
.hero--compact .hero-text h2{margin-top:6px;}
/* Mobile : le hero se centre pour TOUTES les langues. Annule le text-align:right
   RTL (homepage.css / he-rtl.css) qui ne doit valoir qu'en desktop. ng.css étant
   chargé en dernier, ces règles l'emportent → centrage identique fr/en/he/ru/ar. */
@media(max-width:768px){
  [dir="rtl"] .hero-text,[dir="rtl"] .hero-text h1,[dir="rtl"] .hero-text h2,
  [dir="rtl"] .hero-text .subtitle,[dir="rtl"] .hero-text p{text-align:center;}
  [dir="rtl"] .hero-meta{justify-content:center;}
}

/* Cartes services (grille catégories DG, sans image → icône) */
.cat-ico{height:118px;display:flex;align-items:center;justify-content:center;font-size:3rem;background:var(--blue-light);}
.cat-desc{padding:0 14px 18px;font-size:.9rem;color:var(--text-light);line-height:1.6;}
.category-card{cursor:default;}

/* Grille de cartes texte (pourquoi) */
.ng-grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);}
.ng-grid-2{display:grid;gap:28px;grid-template-columns:1.3fr 1fr;align-items:start;}
.ng-card{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:24px;box-shadow:var(--shadow);}
.ng-card h3{color:var(--navy);font-size:1.1rem;margin-bottom:8px;}
.ng-card p{color:var(--text-light);font-size:.95rem;margin:0;}
.ng-card .pill{display:inline-block;background:var(--blue-light);color:var(--accent);font-weight:700;font-size:.78rem;padding:4px 12px;border-radius:99px;margin-bottom:14px;}
.ng-card ul{list-style:none;}
.ng-card li{padding-left:22px;position:relative;margin-bottom:9px;color:var(--text);}
.ng-card li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:50%;background:var(--blue);}
@media(max-width:820px){.ng-grid,.ng-grid-2{grid-template-columns:1fr;}}
[dir="rtl"] .ng-card li{padding-left:0;padding-right:22px;}
[dir="rtl"] .ng-card li::before{left:auto;right:2px;}

/* Prose centrée */
.ng-prose{max-width:780px;margin:0 auto;color:var(--text);}
.ng-prose p{margin-bottom:1em;}

/* Listes de contenu (money pages) */
.ng-list{max-width:820px;margin:0 auto;list-style:none;}
.ng-list li{position:relative;padding-left:30px;margin-bottom:12px;color:var(--text);line-height:1.7;}
.ng-list li::before{content:"";position:absolute;left:5px;top:11px;width:9px;height:9px;border-radius:50%;background:var(--blue);}
[dir="rtl"] .ng-list li{padding-left:0;padding-right:30px;}
[dir="rtl"] .ng-list li::before{left:auto;right:5px;}

/* Zones (chips) */
.ng-zones{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:6px;}
.ng-zones span{background:var(--white);border:1.5px solid var(--border);border-radius:99px;padding:8px 16px;font-weight:700;font-size:.9rem;color:var(--navy);}

/* Prix */
.ng-price{font-size:3.2rem;font-weight:900;color:var(--navy);line-height:1;text-align:center;}
.ng-price small{font-size:1rem;color:var(--text-light);font-weight:400;}

/* FAQ accordéon — petit « + » animé (rotation en croix) + réponse en fondu glissé */
.ng-faq{max-width:840px;margin:0 auto;}
.ng-faq details{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:2px 22px;margin-bottom:12px;box-shadow:0 2px 10px rgba(0,51,102,.04);transition:border-color .25s, box-shadow .25s;}
.ng-faq details[open]{border-color:var(--blue);box-shadow:0 4px 16px rgba(0,122,204,.10);}
.ng-faq summary{list-style:none;cursor:pointer;font-weight:700;color:var(--navy);padding:16px 0;position:relative;padding-right:34px;}
.ng-faq summary::-webkit-details-marker{display:none;}
.ng-faq summary::after{content:"+";position:absolute;right:0;top:50%;width:26px;height:26px;margin-top:-13px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--blue-light);color:var(--blue);font-weight:700;font-size:1.2rem;line-height:1;
  transition:transform .3s ease, background .3s, color .3s;}
.ng-faq details[open] summary::after{transform:rotate(45deg);background:var(--blue);color:#fff;}
.ng-faq p{padding:0 0 16px;color:var(--text-light);margin:0;}
.ng-faq details[open] p{animation:ngFaqOpen .3s ease;}
@keyframes ngFaqOpen{from{opacity:0;transform:translateY(-7px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){
  .ng-faq details[open] p{animation:none;}
  .ng-faq summary::after{transition:none;}
}
[dir="rtl"] .ng-faq summary{padding-right:0;padding-left:34px;}
[dir="rtl"] .ng-faq summary::after{right:auto;left:0;}

/* Bandeau CTA */
.ng-cta .hero-ctas{justify-content:center;margin-top:8px;}
.ng-center{text-align:center;}

/* Contact — carte CTA (remplace le formulaire, pas de backend en statique) */
.ng-contact-cta{background:var(--navy);color:#fff;border-radius:14px;padding:2.2rem;display:flex;flex-direction:column;justify-content:center;gap:1rem;text-align:center;box-shadow:var(--shadow);}
.ng-contact-cta h3{color:#fff;margin:0;font-size:1.15rem;}
.ng-contact-cta p{color:rgba(255,255,255,.82);margin:0;font-size:.95rem;}
.ng-contact-cta .wa{background:#25d366;color:#fff;}
.ng-contact-cta .wa:hover{background:#1eb457;color:#fff;}

/* CTA unique « Demander une / visite à domicile » (ouvre le chat) */
.ng-open-chat{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  line-height:1.12;text-align:center;cursor:pointer;}
.ng-open-chat .ng-cta-l1{font-weight:600;font-size:.8em;opacity:.9;}
.ng-open-chat .ng-cta-l2{font-weight:800;font-size:1.03em;text-transform:uppercase;letter-spacing:.02em;}
/* Bouton CTA du header — pilule .btn-rdv-nav du réseau (nav.css), libellé sur 2 lignes :
   « Discuter avec / Dr Nathalie Gozlan » (ouvre le chat via .ng-open-chat) */
#site-header .btn-rdv-nav.ng-open-chat{flex-direction:row;}  /* neutralise la colonne de .ng-open-chat */
#site-header .btn-rdv-nav .brn-sub{font-size:.68rem;font-weight:600;color:#fff;opacity:.92;
  line-height:1.1;white-space:nowrap;position:relative;z-index:2;}
#site-header .btn-rdv-nav .brn-pre{font-size:.85rem;}
/* Header FR : deux boutons superposés Visite à domicile / Téléconsultation
   (mini-pilules bleues, icônes du hero à gauche d'une barre verticale) */
/* Conteneur calé sur le bouton le plus large ; les deux boutons remplissent cette
   largeur (width:100%) → largeurs identiques dans toutes les langues. Contenu aligné
   au début (justify-content:flex-start) → barre verticale au même endroit. */
.ng-hdr-ctas{display:flex;flex-direction:column;gap:6px;flex-shrink:0;width:max-content;min-width:180px;align-items:stretch;}
a.ng-hdr-btn{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;
  width:100%;box-sizing:border-box;background:#007ACC;
  color:#fff !important;border-radius:50px;height:30px;padding:0 16px 0 10px;text-decoration:none;
  white-space:nowrap;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  cursor:pointer;box-shadow:0 2px 0 rgba(255,255,255,.15) inset,0 -1px 0 rgba(0,0,0,.10) inset,
  0 3px 10px rgba(0,122,204,.38);transition:background .2s,transform .15s;}
a.ng-hdr-btn:hover{background:#005FA3;transform:translateY(-1px);text-decoration:none;}
.ng-hdr-btn .hb-ico{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:18px;height:18px;}
.ng-hdr-btn .hb-ico svg{width:100%;height:100%;display:block;}
.ng-hdr-btn .hb-sep{width:1px;height:16px;background:rgba(255,255,255,.55);margin:0 9px 0 8px;flex-shrink:0;}
/* libellé : occupe l'espace restant après la barre et s'y centre (icône+barre fixes à gauche) */
.ng-hdr-btn>span:last-child{flex:1;text-align:center;}
@media(max-width:900px){
  /* Header mobile non-rétractable : les 2 boutons CTA occupent la rangée 2, toujours
     visibles, côte à côte et pleine largeur (le menu hamburger ne sert qu'aux liens).
     On GARDE les mêmes éléments de design qu'en desktop — icône · barre verticale ·
     libellé centré (span:last-child flex:1) — dans TOUTES les langues (LTR + RTL).
     On n'ajuste ici que le conteneur (2 côte à côte) et la taille. */
  #site-header .ng-hdr-ctas{order:3;flex-basis:100%;width:100%;min-width:0;max-width:none;
    margin:0;flex-direction:row;gap:8px;align-items:stretch;}
  #site-header .ng-hdr-btn{flex:1 1 0;min-width:0;height:44px;border-radius:11px;
    font-size:.72rem;padding:0 12px 0 8px;}
  #site-header .ng-hdr-btn .hb-sep{margin:0 8px 0 7px;}
}
/* Desktop étroit (901–1180px) : le header (logo + 5 liens + langue + 2 boutons)
   dépasse sinon la largeur — on compacte uniformément liens et boutons */
@media(min-width:901px) and (max-width:1180px){
  #site-header #main-nav{gap:10px;}
  #site-header .nav-links a{font-size:.78rem;padding:6px 6px;}
  #site-header .nav-logo-name{font-size:1.02rem;}
  #site-header .nav-logo-sub{font-size:.72rem;}
  a.ng-hdr-btn{font-size:.68rem;height:26px;padding:0 12px 0 8px;}
  .ng-hdr-btn .hb-ico{width:15px;height:15px;}
  .ng-hdr-btn .hb-sep{height:13px;margin:0 7px 0 6px;}
}
@media(min-width:901px) and (max-width:1060px){
  #site-header #main-nav{gap:8px;}
  #site-header .nav-links a{font-size:.72rem;padding:6px 4px;}
  #site-header .nav-logo-img{width:28px;height:46px;}
  #site-header .nav-logo-name{font-size:.95rem;}
  #site-header .nav-logo-sub{font-size:.68rem;}
}
@media(min-width:901px) and (max-width:975px){
  #site-header #main-nav{gap:5px;}
  #site-header .nav-links a{font-size:.68rem;padding:6px 2px;}
  a.ng-hdr-btn{font-size:.6rem;letter-spacing:0;padding:0 9px 0 6px;}
  .ng-hdr-btn .hb-sep{margin:0 5px;}
  #site-header .nav-logo-sub{display:none;}
  #site-header .nav-logo-img{width:24px;height:39px;}
}
/* Téléconsultation « bientôt » : badge du hero + étiquette d'angle sur le bouton d'accueil */
.ng-soon-badge{display:inline-flex;align-items:center;gap:8px;background:#eef4fb;color:var(--navy);
  border:1px solid var(--border);border-radius:50px;padding:9px 20px;font-weight:800;
  font-size:.95rem;letter-spacing:.02em;}
.ng-soon-badge::before{content:"";width:9px;height:9px;border-radius:50%;background:#f0a500;flex-shrink:0;}
.ng-big-btn--soon{position:relative;}
.ng-big-btn--soon .ng-soon-tag{position:absolute;top:8px;right:10px;background:#f0a500;color:#fff;
  font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 8px;border-radius:50px;line-height:1.3;}
[dir="rtl"] .ng-big-btn--soon .ng-soon-tag{right:auto;left:10px;}
/* h1 stylé comme un titre de section (page Tarifs : tout dans une seule section) */
h1.section-title{font-family:var(--font);font-size:2.1rem;font-weight:700;color:var(--navy);text-align:center;margin:10px 0 12px;}
/* variante footer (liens « Me joindre » avec icône) */
.footer-col a.fc-item{display:inline-flex;flex-direction:row;gap:.375rem;align-items:center;font-weight:700;}
.footer-col a.ng-open-chat .ng-cta-l1{font-size:.9rem;opacity:1;font-weight:700;}
.footer-col a.ng-open-chat .ng-cta-l2{font-size:.9rem;text-transform:none;font-weight:700;letter-spacing:0;}
/* variante sur fond navy (carte contact) */
.ng-contact-cta .ng-open-chat.btn-hero-primary{background:var(--blue);}
.ng-contact-cta .ng-open-chat.btn-hero-primary:hover{background:#fff;color:var(--navy);}

/* ================================================================
   Téléconsultation (mise à jour 2026-07) — deux boutons jumeaux accueil,
   bandeau « disponible maintenant », page téléconsultation, pages légales. */

/* Deux boutons jumeaux (accueil) : visite à domicile | téléconsultation */
.ng-dual-cta{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px;max-width:560px;}
.hero-text .ng-dual-cta{margin-left:0;}
.ng-cta .ng-dual-cta,.ng-center .ng-dual-cta{margin-left:auto;margin-right:auto;}
@media(max-width:560px){.ng-dual-cta{grid-template-columns:1fr;max-width:100%;}}
.ng-big-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:#0077B6;color:#fff !important;border-radius:16px;padding:18px 14px;text-align:center;
  line-height:1.15;text-decoration:none;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,119,182,.32);transition:background .2s,transform .15s;}
.ng-big-btn:hover{background:#0369a1;transform:translateY(-2px);text-decoration:none;color:#fff;}
.ng-big-btn .ng-big-ico{font-size:1.5rem;margin-bottom:4px;}
.ng-big-btn .ng-cta-l1{font-weight:600;font-size:.8rem;opacity:.92;}
.ng-big-btn .ng-cta-l2{font-weight:800;font-size:1.02rem;text-transform:uppercase;letter-spacing:.02em;}
.ng-big-btn--tc{background:var(--navy);box-shadow:0 6px 18px rgba(0,51,102,.32);}
.ng-big-btn--tc:hover{background:#00264d;}

/* Bandeau « Dr Gozlan disponible maintenant » (page téléconsultation) */
.ng-walkin-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;
  background:linear-gradient(100deg,#e8f8ef,#e8f4fd);border:1.5px solid #b8e6cd;border-radius:12px;
  padding:12px 16px;font-size:.92rem;font-weight:700;color:#0a5c34;}
.ng-walkin-dot{width:10px;height:10px;border-radius:50%;background:#0a8a4a;flex-shrink:0;
  animation:ngpulse 1.6s infinite;}
@keyframes ngpulse{0%{box-shadow:0 0 0 0 rgba(10,138,74,.5);}70%{box-shadow:0 0 0 8px rgba(10,138,74,0);}100%{box-shadow:0 0 0 0 rgba(10,138,74,0);}}
.ng-walkin-banner a{font-weight:800;white-space:nowrap;}

/* Étapes « comment ça marche » (page téléconsultation) */
.ng-grid-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:1020px){.ng-grid-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.ng-grid-4{grid-template-columns:1fr;}}
.ng-step{position:relative;padding-top:30px;}
.ng-step-n{position:absolute;top:-16px;left:22px;width:34px;height:34px;border-radius:50%;
  background:var(--blue);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(0,119,182,.35);}

/* Bouton principal du tunnel sur la page téléconsultation */
.ng-tc-start{display:inline-flex;flex-direction:column;align-items:center;line-height:1.12;text-align:center;}
.ng-tc-start .ng-cta-l1{font-weight:600;font-size:.8em;opacity:.9;}
.ng-tc-start .ng-cta-l2{font-weight:800;font-size:1.03em;text-transform:uppercase;letter-spacing:.02em;}

/* Pages légales */
.ng-legal h2{color:var(--navy);font-size:1.15rem;margin:26px 0 10px;}
.ng-legal p{color:var(--text);margin-bottom:12px;}

/* Icônes SVG (remplacement des émojis — 2026-07) */
.ng-ico{vertical-align:-3px;}
.cat-ico .ng-ico{width:46px;height:46px;color:var(--blue);}
.hero-meta .ng-ico{width:16px;height:16px;color:var(--blue);vertical-align:-2px;}
.ng-big-ico{display:flex;align-items:center;justify-content:center;margin-bottom:5px;}
.ng-big-ico .ng-ico{width:26px;height:26px;color:#fff;opacity:.95;}

/* Header : sous-titre « Médecin généraliste » seul, plus lisible (2026-07) */
#site-header .nav-logo-sub{font-size:.95rem;font-weight:600;color:#3d6285;}

/* Logo dans le header (2026-07) — calé tout à gauche, texte à sa droite */
#site-header .nav-logo{display:flex;align-items:center;gap:12px;}
#site-header .nav-logo-img{height:62px;width:auto;display:block;flex-shrink:0;}
@media(max-width:860px){#site-header .nav-logo-img{height:50px;}}

/* Cartes « expertise » (accueil FR — nourrissons/adultes/aînés, 2026-07) */
.ng-exp{text-align:center;padding:30px 24px;}
.ng-exp-ico{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  border-radius:50%;background:var(--blue-light);color:var(--blue);margin-bottom:14px;}
.ng-exp h3{font-size:1.12rem;margin-bottom:8px;}

/* Carte interactive de la zone (2026-07) — FOND DE CARTE RÉEL (© OSM/CARTO,
   image unique lazy-loadée générée par tools/generate-carte.py) + pins HTML/CSS.
   Desktop : pilules à gauche, carte à droite. Mobile : empilé, tout tient à l'écran. */
.ng-map-wrap{display:grid;grid-template-columns:200px minmax(300px,400px);gap:34px;align-items:center;justify-content:center;margin:10px auto 0;}
@media(max-width:820px){.ng-map-wrap{grid-template-columns:1fr;gap:16px;justify-items:center;}}
.ng-zones--pills{display:flex;flex-direction:column;gap:8px;width:200px;}
@media(max-width:820px){.ng-zones--pills{width:230px;}}
.ng-zone-chip{display:block;width:100%;text-align:center;background:var(--white);border:1.5px solid var(--border);border-radius:99px;padding:9px 14px;
  font-weight:700;font-size:.9rem;color:var(--navy);cursor:pointer;
  transition:border-color .2s,background .2s,color .2s,transform .15s;-webkit-tap-highlight-color:transparent;outline:none;}
.ng-zone-chip:hover,.ng-zone-chip.active{border-color:var(--blue);background:var(--blue-light);color:var(--accent);transform:translateY(-1px);}
.ng-zone-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
.ng-zone-chip--m{border-style:dashed;}
.ng-mapreal{position:relative;width:100%;max-width:400px;border-radius:16px;overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--shadow);}
.ng-mapreal img{display:block;width:100%;height:auto;}
.ng-map-credit{position:absolute;right:6px;bottom:4px;font-size:9px;color:#677482;
  background:rgba(255,255,255,.75);padding:1px 7px;border-radius:6px;}
.ng-map-moshavim{grid-column:1 / -1;font-size:.8rem;color:var(--text-light);text-align:center;max-width:600px;margin:0 auto;}
.ng-city{position:absolute;width:0;height:0;-webkit-tap-highlight-color:transparent;outline:none;cursor:pointer;}
.ng-city .dot{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:3px solid var(--blue);box-shadow:0 1px 4px rgba(0,30,60,.35);transition:opacity .2s,transform .2s;}
/* survol/épinglage d'une pilule ville : même animation sobre que les moshavim (le rond grossit) */
.ng-city.active .dot{background:var(--blue-light);transform:scale(1.35);}
/* moshavim : petits anneaux, étiquettes révélées par la pilule ou le survol */
.ng-city.ng-m .dot{left:-5px;top:-5px;width:10px;height:10px;border-width:2px;border-color:#7d9cb8;}
.ng-city .lbl{position:absolute;left:9px;top:-10px;font-size:12px;font-weight:700;color:var(--navy);
  background:rgba(255,255,255,.94);border:1px solid var(--border);border-radius:6px;padding:0 7px;
  white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none;line-height:1.55;}
.ng-city .lbl.lbl-l{left:auto;right:9px;}
.ng-city .lbl.lbl-b{left:50%;right:auto;top:10px;transform:translateX(-50%);}
.ng-city .lbl.lbl-t{left:50%;right:auto;top:auto;bottom:12px;transform:translateX(-50%);}
.ng-city .lbl-city{opacity:1;font-size:13px;font-weight:800;padding:1px 9px;top:-12px;
  box-shadow:0 1px 4px rgba(0,30,60,.18);}
.ng-mapreal.m-on .ng-m .dot{border-color:var(--blue);background:var(--blue-light);transform:scale(1.2);}
.ng-mapreal.m-on .ng-m .lbl,.ng-city.ng-m:hover .lbl{opacity:1;}
@media(max-width:560px){
  .ng-mapreal{max-width:min(390px,90vw);}
  .ng-zone-chip{padding:7px 13px;font-size:.8rem;}
  /* la carte se compresse mais pas les polices : on réduit uniformément
     toutes les étiquettes (villes et moshavim) pour préserver les écarts */
  .ng-city .lbl{font-size:11px;}
  .ng-city .lbl-city{font-size:11.5px;padding:1px 7px;}
}

/* Header : séparateur vertical + « Dr Gozlan » (motif cataracte.fr) */
#site-header li.nav-divider{width:2px;height:20px;background:var(--blue);margin:0 10px;padding:0;flex:0 0 2px;align-self:center;list-style:none;}
#site-header li.nav-divider + li > a{font-weight:700;}
@media(max-width:1020px){
  #site-header li.nav-divider{display:none;}          /* menu mobile : liste simple */
  #site-header li.nav-divider + li > a{font-weight:400;}
}
.ng-zone-chip,.ng-city{-webkit-tap-highlight-color:transparent;outline:none;}
.ng-zone-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}


/* Cohérence des pages internes (2026-07) : héros centré, prose lisible, mobile soigné */
.hero--compact .hero-inner{margin:0 auto;}
.hero--compact .hero-text{max-width:800px;margin:0 auto;text-align:center;}
.hero--compact .hero-ctas{justify-content:center;}
.hero--compact .hero-meta{justify-content:center;}
.ng-legal{max-width:720px;}
.ng-legal h2{text-align:start;}
@media(max-width:700px){
  .hero--compact{padding:36px 5% 24px;}
  .hero--compact .hero-text h1{font-size:1.65rem;}
  .section-inner{padding-left:2px;padding-right:2px;}
  .ng-exp{padding:24px 18px;}
  .ng-price{font-size:2.6rem;}
  .ng-grid-2{gap:18px;}
}