/* docs.es.solutions home page: the look of the company website (es.solutions:
   Open Sans, Montserrat and Poppins; navy headings, blue accent, white cards
   with soft shadows).  Only the home page uses this; the manuals keep
   xsl/pli.css. */

:root{
  --default-font:"Open Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --heading-font:"Montserrat",sans-serif;
  --nav-font:"Poppins",sans-serif;
  --background-color:#ffffff;
  --default-color:#212529;
  --heading-color:rgb(30,63,129);
  --accent-color:rgb(47,164,231);
  --surface-color:#ffffff;
  --contrast-color:#ffffff;
  --nav-color:#3a3939;
  --muted:color-mix(in srgb, var(--default-color), transparent 40%);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; color:var(--default-color); background:var(--background-color);
  font-family:var(--default-font); font-size:16px; line-height:1.5}
a{color:var(--accent-color); text-decoration:none; transition:.3s}
a:hover{color:color-mix(in srgb, var(--accent-color), transparent 25%)}
h1,h2,h3,h4{color:var(--heading-color); font-family:var(--heading-font); line-height:1.2; margin:0}
.container{width:100%; max-width:1140px; margin:0 auto; padding:0 12px}

/* ---- header ---- */
.header{background:var(--background-color); padding:20px 0; position:sticky; top:0; z-index:10;
  transition:box-shadow .5s}
.header .bar{max-width:none; padding:0 12px; display:flex; align-items:center;
  justify-content:space-between; gap:12px}
.header .logo img{display:block; height:36px; width:auto}
.btn-getstarted{color:var(--contrast-color); background:var(--accent-color); font-size:14px;
  padding:8px 26px; border-radius:4px}
.btn-getstarted:hover{color:var(--contrast-color); background:color-mix(in srgb, var(--accent-color), transparent 15%)}

/* ---- sections ---- */
.section{padding:60px 0}
.section-title{text-align:center; padding-bottom:40px}
.section-title h2{font-size:32px; font-weight:700}
.section-title h2::before,.section-title h2::after{content:""; width:50px; height:2px;
  background:var(--accent-color); display:inline-block; vertical-align:middle}
.section-title h2::before{margin:0 15px 4px 0}
.section-title h2::after{margin:0 0 4px 15px}
.section-title p{margin:12px auto 0; max-width:640px}

.product{padding:0 0 48px}
.product-head{margin:0 0 24px}
.product-head h3{font-size:26px; font-weight:700; margin:0 0 6px}
.product-head p{margin:0; color:var(--muted)}

.manuals{list-style:none; margin:0; padding:0; display:grid; gap:24px;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr))}
.manuals article{background:var(--surface-color); box-shadow:0 4px 16px rgba(0,0,0,.1);
  border-radius:10px; padding:30px; height:100%; display:flex; flex-direction:column}
.manuals .meta{font-size:14px; color:var(--muted); margin:0 0 10px}
.manuals h4{font-size:20px; font-weight:700; margin:0 0 14px}
.manuals .about{margin:0 0 22px}
.manuals .actions{margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px}
.btn{display:inline-block; font-family:var(--nav-font); font-size:15px; padding:8px 22px;
  border-radius:4px; border:1px solid var(--accent-color)}
.btn-primary{background:var(--accent-color); color:var(--contrast-color)}
.btn-primary:hover{color:var(--contrast-color); background:color-mix(in srgb, var(--accent-color), transparent 15%)}
.btn-outline{color:var(--accent-color); background:transparent}
.btn-outline:hover{color:var(--contrast-color); background:var(--accent-color)}
.btn .size{font-size:12px; opacity:.8; margin-left:4px}
.text-link{font-size:14px}

/* ---- footer ---- */
.footer{background:#f9f9f9; font-size:14px; padding-bottom:50px}
.footer .footer-top{padding-top:50px; display:grid; gap:24px;
  grid-template-columns:5fr 2fr 2fr 3fr}
.footer .footer-about .sitename{display:block; color:var(--heading-color); font-family:var(--heading-font);
  font-size:30px; font-weight:700; letter-spacing:1px; margin:0 0 25px}
.footer .footer-about p{font-family:var(--heading-font); margin:0}
.footer h4{font-size:16px; font-weight:700; padding-bottom:12px}
.footer ul{list-style:none; margin:0; padding:0}
.footer li{padding:10px 0}
.footer li:first-child{padding-top:0}
.footer-links a{color:color-mix(in srgb, var(--default-color), transparent 20%)}
.footer-links a:hover{color:var(--accent-color)}
.footer-contact p{margin:0 0 5px}
.footer-contact .gap{margin-top:24px}
.footer .copyright{margin-top:24px; padding:25px 12px; text-align:center;
  background:color-mix(in srgb, var(--default-color), transparent 95%)}
.footer .copyright p{margin:0}
@media (max-width:991px){
  .footer .footer-top{grid-template-columns:1fr 1fr}
  .footer .footer-about,.footer .footer-contact{grid-column:1 / -1}
}
@media (max-width:480px){
  .section-title h2::before,.section-title h2::after{display:none}
}