/* corpcore.css — Design System statique v1.0 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ─── RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:#fff;
  background:#1a0a2e;
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
button{font-family:inherit}

/* ─── TOKENS ─────────────────────────────────────────────── */
:root{
  --text-primary:#fff;
  --text-secondary:#E9D5FF;
  --text-muted:#C084FC;
  --brand-sky:#38BDF8;
  --brand-secondary:#2563EB;
  --brand-accent:#60A5FA;
  --border:rgba(168,85,247,0.3);
  --dark-surface:rgba(30,20,50,0.95);
  --dark-hover:rgba(40,30,60,0.8);
}

/* ─── TYPOGRAPHY — scoped au .static-main pour éviter conflits React ── */
.static-main h1,.site-header h1{font-size:clamp(1.5rem,3.5vw,2.5rem);font-weight:800;line-height:1.2;color:#fff}
.static-main h2,.site-header h2{font-size:clamp(1.1rem,2.2vw,1.625rem);font-weight:700;line-height:1.3;color:#fff}
.static-main h3,.site-header h3{font-size:clamp(0.875rem,1.5vw,1.05rem);font-weight:600;line-height:1.4;color:#fff}
.static-main p{color:var(--text-secondary);line-height:1.7}
/* Hero card & cards hors main (sur la homepage statique dans #root) */
.hero-card h1,.hero-card h2,.hero-card h3,.hero-card p{color:inherit}
.card h1,.card h2,.card h3,.card-dark h1,.card-dark h2,.card-dark h3{color:#fff}

/* ─── LAYOUT ─────────────────────────────────────────────── */
.container{max-width:1280px;margin:0 auto;padding:0 1.5rem}
.container-md{max-width:900px;margin:0 auto;padding:0 1.5rem}
.container-sm{max-width:760px;margin:0 auto;padding:0 1.5rem}

/* ─── GRID ───────────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
@media(max-width:1024px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ─── CARDS ──────────────────────────────────────────────── */
.card{
  background:rgba(30,20,50,0.95);
  backdrop-filter:blur(10px);
  border:1px solid rgba(168,85,247,0.3);
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  border-radius:14px;
  padding:1rem;
}
.card-dark{
  background:rgba(20,10,35,0.98);
  backdrop-filter:blur(10px);
  border:1px solid rgba(168,85,247,0.4);
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  border-radius:14px;
  padding:1.25rem;
}
.hero-card{
  background:linear-gradient(135deg,rgba(18,18,48,0.98) 0%,rgba(44,24,78,0.98) 55%,rgba(72,28,92,0.98) 100%);
  backdrop-filter:blur(12px);
  border:1px solid rgba(96,165,250,0.35);
  box-shadow:0 12px 48px rgba(59,130,246,0.18);
  border-radius:1.25rem;
  padding:1.5rem 1.25rem;
  text-align:center;
}

/* ─── BUTTONS ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.75rem 1.5rem;font-size:1rem;font-weight:700;border-radius:10px;
  min-height:44px;transition:all .3s;cursor:pointer;border:none;
  text-decoration:none;
}
.btn-primary{
  background:linear-gradient(135deg,#2563EB 0%,#60A5FA 100%);
  color:#fff;
  box-shadow:0 4px 24px rgba(37,99,235,.5);
}
.btn-primary:hover{background:linear-gradient(135deg,#3B82F6 0%,#93C5FD 100%);transform:scale(1.02)}
.btn-secondary{
  background:rgba(30,20,50,.9);color:#fff;
  border:2px solid rgba(56,189,248,.5);
}
.btn-secondary:hover{background:rgba(56,189,248,.2);border-color:#38BDF8}
.btn-w{width:100%;justify-content:center}

/* ─── HEADER / NAV ───────────────────────────────────────── */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:transparent;
  backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background .3s,backdrop-filter .3s,box-shadow .3s,border-color .3s;
}
.site-header.scrolled{
  background:rgba(20,10,35,.96);
  backdrop-filter:blur(14px);
  box-shadow:0 2px 20px rgba(56,189,248,.2);
  border-bottom:1px solid rgba(37,99,235,.5);
}
.nav-inner{
  max-width:1280px;margin:0 auto;padding:0 1.5rem;
  display:flex;align-items:center;justify-content:space-between;height:3.5rem;
}
.nav-logo{display:flex;align-items:center;gap:.75rem;font-weight:700;font-size:1.25rem;color:#fff}
.nav-logo img{width:44px;height:44px;filter:brightness(0) invert(1)}
.nav-logo:hover{color:#38BDF8}
.nav-logo:hover img{filter:none}
.nav-actions{display:flex;align-items:center;gap:.75rem}
.burger-btn{
  background:none;border:none;cursor:pointer;color:#fff;
  padding:.5rem;border-radius:10px;transition:background .2s;
  display:flex;flex-direction:column;gap:5px;
}
.burger-btn:hover{background:rgba(40,30,60,.8)}
.burger-btn span{display:block;width:24px;height:2px;background:#fff;transition:all .3s}
.burger-btn.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.burger-btn.open span:nth-child(2){opacity:0}
.burger-btn.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* ─── SLIDE-IN PANEL ─────────────────────────────────────── */
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:110}
.nav-overlay.active{display:block}
.nav-panel{
  position:fixed;top:0;right:0;height:100%;width:min(320px,85vw);
  background:rgba(20,10,35,.98);border-left:1px solid rgba(168,85,247,.3);
  z-index:120;transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;
}
.nav-panel.open{transform:translateX(0)}
.nav-panel-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5rem;height:4.5rem;border-bottom:1px solid rgba(168,85,247,.3);
}
.nav-panel-header span{font-weight:700;font-size:1.125rem}
.close-btn{
  background:none;border:none;cursor:pointer;color:#fff;
  padding:.5rem;font-size:1.5rem;line-height:1;border-radius:10px;
}
.close-btn:hover{background:rgba(40,30,60,.8)}
.nav-links{padding:1.5rem 1rem;display:flex;flex-direction:column;gap:.25rem}
.nav-link{
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1rem;border-radius:12px;font-weight:500;
  color:rgba(255,255,255,.8);transition:all .2s;
}
.nav-link:hover{color:#fff;background:rgba(40,30,60,.8)}
.nav-link.active{color:#fff;background:rgba(139,92,246,.2);border:1px solid rgba(139,92,246,.4)}
.nav-divider{border:none;border-top:1px solid rgba(168,85,247,.3);margin:1rem 0}
.nav-cta{margin:0 1rem}

/* ─── FOOTER ─────────────────────────────────────────────── */
.site-footer{
  background:rgba(20,10,35,.95);
  border-top:1px solid rgba(168,85,247,.25);
}
.footer-inner{max-width:1280px;margin:0 auto;padding:3rem 1.5rem 2rem}
.footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:2.5rem;margin-bottom:2.5rem;
}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.footer-grid{grid-template-columns:1fr}}
.footer-brand-desc{color:var(--text-secondary);font-size:.875rem;line-height:1.7;max-width:280px;margin:1.25rem 0}
.footer-socials{display:flex;gap:.5rem}
.social-link{
  width:36px;height:36px;border-radius:10px;border:1px solid rgba(168,85,247,.3);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-secondary);font-size:.8rem;font-weight:700;transition:all .2s;
}
.social-link:hover{color:#fff;border-color:#38BDF8;background:rgba(56,189,248,.1)}
.footer-col-title{
  font-size:.75rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-secondary);margin-bottom:1rem;
}
.footer-links{list-style:none}
.footer-links li{margin-bottom:.625rem}
.footer-links a{font-size:.875rem;color:var(--text-secondary);transition:color .2s}
.footer-links a:hover{color:#fff}
.footer-contact-item{
  display:flex;align-items:flex-start;gap:.625rem;
  color:var(--text-secondary);font-size:.875rem;margin-bottom:.75rem;transition:color .2s;
}
.footer-contact-item:hover{color:#fff}
.footer-contact-icon{color:#38BDF8;flex-shrink:0;margin-top:2px}
.footer-bottom{
  border-top:1px solid #1E3A5F;padding-top:1.5rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;
}
.footer-bottom p{font-size:.75rem;color:var(--text-secondary)}
.footer-legal{display:flex;gap:1.25rem}
.footer-legal a{font-size:.75rem;color:var(--text-secondary);transition:color .2s}
.footer-legal a:hover{color:#fff}

/* ─── PAGE STRUCTURE ─────────────────────────────────────── */
/* Uniquement pour les pages statiques — ne pas toucher à <main> du React app */
.static-main{
  padding-top:3.5rem;
  padding-bottom:2rem;
  background:linear-gradient(160deg,#1a0a2e 0%,#4a148c 45%,#1a0a2e 100%);
  min-height:100vh;
}

/* ─── HERO / SECTION LABEL ───────────────────────────────── */
.section-label{
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
  color:#38BDF8;margin-bottom:.75rem;display:block;
}
.badge{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;
  background:rgba(139,92,246,.2);border:1px solid rgba(168,85,247,.5);
  border-radius:9999px;font-size:.875rem;color:#fff;margin-bottom:2rem;
}
.trust-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:2rem}
.trust-pill{
  padding:.25rem .75rem;border-radius:9999px;
  background:rgba(40,30,60,.8);border:1px solid rgba(168,85,247,.3);
  font-size:.875rem;color:var(--text-secondary);
}

/* ─── STATS BAR ──────────────────────────────────────────── */
.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:2rem 0}
@media(max-width:640px){.stats-bar{grid-template-columns:repeat(2,1fr)}}
.stat-item{
  background:rgba(30,20,50,.95);border:1px solid rgba(168,85,247,.3);
  border-radius:12px;padding:1rem;text-align:center;
}
.stat-value{font-size:1.25rem;font-weight:700;color:#38BDF8;margin-bottom:.25rem}
.stat-label{font-size:.75rem;color:var(--text-secondary)}

/* ─── FEATURE LIST ───────────────────────────────────────── */
.feature-list{list-style:none}
.feature-list li{
  display:flex;align-items:flex-start;gap:.75rem;
  margin-bottom:.75rem;font-size:.9375rem;color:var(--text-secondary);
}
.check{color:rgba(196,132,252,.9);flex-shrink:0;margin-top:2px}

/* ─── FAQ DETAILS ────────────────────────────────────────── */
details{
  border:1px solid rgba(168,85,247,.3);border-radius:10px;
  overflow:hidden;margin-bottom:.75rem;
}
details summary{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.25rem;cursor:pointer;color:#fff;
  font-weight:500;font-size:.9375rem;user-select:none;
  transition:background .2s;list-style:none;
}
details summary::-webkit-details-marker{display:none}
details summary:hover{background:rgba(40,30,60,.8)}
details summary::after{
  content:'▾';color:var(--text-secondary);font-size:.75rem;
  transition:transform .3s;flex-shrink:0;margin-left:1rem;
}
details[open] summary::after{transform:rotate(180deg)}
details[open] summary{background:rgba(40,30,60,.8)}
.details-body{
  padding:.75rem 1.25rem 1rem;font-size:.9375rem;
  color:var(--text-secondary);line-height:1.7;
  border-top:1px solid rgba(168,85,247,.3);
}

/* ─── FORM ───────────────────────────────────────────────── */
.form-label{display:block;font-size:.875rem;font-weight:500;color:var(--text-secondary);margin-bottom:.5rem}
.form-req{color:#f87171}
.form-input,.form-textarea,.form-select{
  width:100%;padding:.75rem 1rem;
  background:rgba(30,20,50,.8);border:2px solid rgba(168,85,247,.3);
  border-radius:10px;color:#fff;font-size:.9375rem;font-family:inherit;
  transition:border-color .2s,box-shadow .2s;
}
.form-input:focus,.form-textarea:focus,.form-select:focus{
  outline:none;border-color:#38BDF8;box-shadow:0 0 0 3px rgba(56,189,248,.2);
}
.form-input::placeholder,.form-textarea::placeholder{color:rgba(196,132,252,.6)}
.form-textarea{resize:vertical;min-height:7rem}
.form-error{color:#f87171;font-size:.75rem;margin-top:.375rem;display:block}
.form-group{margin-bottom:1.25rem}

/* ─── FILTER BUTTONS ─────────────────────────────────────── */
.filter-bar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.filter-btn{
  padding:.5rem 1rem;border-radius:10px;font-size:.875rem;font-weight:500;
  cursor:pointer;border:1px solid rgba(168,85,247,.3);
  background:rgba(30,20,50,.95);color:var(--text-secondary);transition:all .2s;
}
.filter-btn:hover{color:#fff}
.filter-btn.active{background:#7c3aed;color:#fff;border-color:#8b5cf6}

/* ─── RESULTS GRID (case studies) ────────────────────────── */
.results-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid rgba(168,85,247,.3);
}
.results-grid>div{
  padding:1.25rem;text-align:center;
  border-right:1px solid rgba(168,85,247,.3);
}
.results-grid>div:last-child{border-right:none}
@media(max-width:600px){
  .results-grid{grid-template-columns:1fr}
  .results-grid>div{border-right:none;border-bottom:1px solid rgba(168,85,247,.3)}
}

/* ─── CASE CARD HEADER ───────────────────────────────────── */
.case-header{
  padding:1.5rem;border-bottom:1px solid rgba(168,85,247,.3);
  display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:1rem;
}
.case-body{padding:1.5rem;display:grid;gap:1.5rem}
@media(min-width:768px){.case-body{grid-template-columns:1fr 1fr}}
.case-quote{margin:0 1.5rem 1.5rem;border-radius:12px;padding:1.25rem}

/* ─── PARTNER LOGO BOX ───────────────────────────────────── */
.partner-logo-box{
  height:8rem;display:flex;align-items:center;justify-content:center;
  background:rgba(40,30,60,.8);border-radius:14px;
  border:1px solid rgba(168,85,247,.3);margin-bottom:1.5rem;
}
.partner-logo-box img{max-height:6rem;max-width:100%;object-fit:contain}

/* ─── ICON BOX ───────────────────────────────────────────── */
.icon-box{
  width:48px;height:48px;
  background:linear-gradient(135deg,#2563EB 0%,#60A5FA 100%);
  border-radius:14px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:1.25rem;
}

/* ─── STARS ──────────────────────────────────────────────── */
.stars{color:#38BDF8;font-size:1rem;letter-spacing:2px;margin-bottom:1rem}

/* ─── BADGE COLORS ───────────────────────────────────────── */
.badge-pill{
  display:inline-block;font-size:.75rem;font-weight:700;
  padding:.25rem .75rem;border-radius:9999px;
}
.badge-purple{background:rgba(88,28,135,.4);color:#c084fc}
.badge-amber{background:rgba(120,53,15,.4);color:#fbbf24}
.badge-blue{background:rgba(30,64,175,.4);color:#93c5fd}
.badge-green{background:rgba(6,78,59,.4);color:#4ade80}
.badge-orange{background:rgba(124,45,18,.4);color:#fb923c}

/* ─── UTILITY CLASSES ────────────────────────────────────── */
.text-sky{color:#38BDF8}
.text-muted{color:var(--text-secondary)}
.text-white{color:#fff}
.text-center{text-align:center}
.font-bold{font-weight:700}
.font-semibold{font-weight:600}
.italic{font-style:italic}
.uppercase{text-transform:uppercase}
.tracking-wide{letter-spacing:.1em}
.text-xs{font-size:.75rem}
.text-sm{font-size:.875rem}
.text-lg{font-size:1.125rem}
.text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem}
.opacity-50{opacity:.5}
.opacity-60{opacity:.6}
.line-through{text-decoration:line-through}
.border-t{border-top:1px solid rgba(168,85,247,.3)}
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.flex-col{flex-direction:column}
.items-start{align-items:flex-start}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.gap-1{gap:.25rem}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-12{margin-top:3rem}
.mt-16{margin-top:4rem}
.mb-1{margin-bottom:.25rem}
.mb-2{margin-bottom:.5rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-6{margin-bottom:1.5rem}
.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}
.mb-12{margin-bottom:3rem}
.mb-16{margin-bottom:4rem}
.pt-4{padding-top:1rem}
.pb-4{padding-bottom:1rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}
.w-full{width:100%}
.rounded-full{border-radius:9999px}
.shrink-0{flex-shrink:0}

/* ─── ROI CALCULATOR ─────────────────────────────────────── */
.roi-slider-row{display:flex;align-items:center;gap:.75rem}
.roi-slider-row input[type=range]{flex:1;accent-color:#38BDF8}
.roi-slider-val{font-weight:700;color:#fff;min-width:70px;text-align:right}
.roi-results{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:2rem}
@media(max-width:640px){.roi-results{grid-template-columns:repeat(2,1fr)}}

/* ─── ACCORDION (glossaire) ──────────────────────────────── */
.accordion-item{border:1px solid rgba(168,85,247,.3);border-radius:12px;overflow:hidden;margin-bottom:.5rem}
.accordion-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.25rem;background:none;border:none;cursor:pointer;
  color:#fff;font-weight:500;font-size:.9375rem;font-family:inherit;
  text-align:left;transition:background .2s;
}
.accordion-btn:hover{background:rgba(40,30,60,.8)}
.accordion-btn .arrow{transition:transform .3s;color:var(--text-secondary)}
.accordion-btn.open .arrow{transform:rotate(180deg)}
.accordion-content{
  display:none;padding:.75rem 1.25rem 1rem;
  font-size:.9375rem;color:var(--text-secondary);line-height:1.7;
  border-top:1px solid rgba(168,85,247,.3);
}
.accordion-content.open{display:block}

/* ─── SCROLL FADE ────────────────────────────────────────── */
.scroll-fade{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.scroll-fade.visible{opacity:1;transform:translateY(0)}

/* ─── ARTICLE CARD ───────────────────────────────────────── */
.article-card{
  display:block;background:rgba(30,20,50,.95);
  border:1px solid rgba(168,85,247,.3);border-radius:14px;
  padding:1.5rem;transition:border-color .2s;text-decoration:none;
}
.article-card:hover{border-color:rgba(168,85,247,.6)}
.article-card:hover .article-title{color:#38BDF8}
.article-card:hover .article-cta{opacity:1}
.article-title{color:#fff;font-weight:600;font-size:1.0625rem;line-height:1.4;margin-bottom:.5rem;transition:color .2s}
.article-desc{color:var(--text-secondary);font-size:.875rem;line-height:1.7}
.article-meta{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem;flex-shrink:0}
.article-cta{color:#38BDF8;font-size:.75rem;font-weight:600;opacity:0;transition:opacity .2s;margin-top:.75rem}

/* ─── SEARCH (articles) ──────────────────────────────────── */
.search-wrap{position:relative;margin-bottom:1.5rem}
.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--text-secondary);opacity:.6;pointer-events:none}
.search-input{
  width:100%;padding:.75rem 2.5rem;background:rgba(40,30,60,.8);
  border:1px solid rgba(168,85,247,.3);border-radius:12px;
  color:#fff;font-size:.875rem;font-family:inherit;
}
.search-input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 2px rgba(124,58,237,.3)}
.search-input::placeholder{color:rgba(196,132,252,.5)}
.search-clear{
  position:absolute;right:1rem;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--text-secondary);font-size:1rem;
  display:none;
}
.search-count{text-align:center;font-size:.75rem;color:var(--text-secondary);opacity:.6;margin-top:1rem}

/* ─── NO RESULTS ─────────────────────────────────────────── */
.no-results{background:rgba(30,20,50,.95);border:1px solid rgba(168,85,247,.3);border-radius:14px;padding:3rem;text-align:center;display:none}

/* ─── REACT APP OVERRIDES ────────────────────────────────── */
/* Corrige le double padding sur les pages agents embarquées :
   AgentsPage (pt-16 lg:pt-20) + CommunityManagerPage/CalendarEmailPage (pt-16 lg:pt-20)
   = 128-160px de gap → annule le padding interne quand le composant est embarqué
   (2 niveaux de .purple-gradient-bg imbriqués = contexte embarqué uniquement) */
.purple-gradient-bg .purple-gradient-bg .bg-transparent{padding-top:0!important}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:640px){
  .static-main{padding-top:3.25rem;padding-bottom:1.5rem}
  .hero-card{padding:1rem .875rem}
  .card-dark{padding:1rem .875rem}
  .btn{padding:.625rem 1.25rem;font-size:.9375rem}
  h1{font-size:1.875rem}
}