@import url("citopat-tokens.css");

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--cp-font);
  color:var(--cp-text);
  background:var(--cp-background);
  line-height:1.72
}
img{max-width:100%;height:auto}
a{color:#557d32;text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1120px,92%);margin:auto}

/* Header CITOPAT */
.site-header{
  position:sticky;top:0;z-index:20;
  background:var(--cp-header);
  box-shadow:0 1px 0 rgba(255,255,255,.06)
}
.nav{
  height:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px
}
.brand{display:flex;align-items:center;height:62px}
.brand img{width:155px;display:block}
.navlinks{display:flex;align-items:center;gap:26px;height:62px}
.navlinks a{
  color:#e9eef0;
  font-size:.93rem;
  font-weight:600;
  line-height:62px
}
.navlinks a:hover{color:var(--cp-accent);text-decoration:none}
.menu-toggle{
  display:none;color:#fff;background:transparent;border:0;
  font-size:1.45rem;cursor:pointer
}

/* Buttons */
.btn{
  display:inline-block;
  background:var(--cp-accent);
  color:#172018!important;
  padding:10px 17px;
  border-radius:3px;
  font-weight:700;
  border:0
}
.btn:hover{
  background:var(--cp-accent-hover);
  color:#172018!important;
  text-decoration:none
}

/* Hero */
.hero{
  padding:58px 0 48px;
  background:#fff;
  border-bottom:1px solid var(--cp-line)
}
.hero-grid{
  display:grid;
  grid-template-columns:1.03fr .97fr;
  gap:42px;
  align-items:center
}
.hero-image{
  border:1px solid #cfd6da;
  border-top:5px solid var(--cp-frame);
  border-radius:4px;
  padding:8px;
  background:#fff;
  box-shadow:var(--cp-shadow-md)
}
.hero-image img{display:block;border-radius:2px}
.eyebrow{
  color:#5a8d32;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.76rem
}
.tag{
  display:inline-block;
  background:var(--cp-frame);
  color:#fff;
  border-radius:2px;
  padding:4px 8px;
  margin:0 5px 5px 0;
  font-size:.75rem;
  font-weight:700
}
h1,h2,h3{color:var(--cp-frame)}
h1{
  font-size:clamp(2.2rem,4.8vw,3.9rem);
  line-height:1.07;
  letter-spacing:-.025em;
  margin:.45rem 0 1rem
}
h2{
  font-size:clamp(1.6rem,2.8vw,2.2rem);
  line-height:1.2;
  margin:2.45rem 0 .8rem;
  scroll-margin-top:82px
}
h3{font-size:1.18rem}
.lead{font-size:1.1rem;color:var(--cp-muted)}
.meta{color:var(--cp-muted);font-size:.9rem}

/* Article body */
.section{padding:55px 0}
.article{max-width:850px;margin:auto}
.article>p{font-size:1.045rem}
.article ul,.article ol{padding-left:1.3rem}
.article li{margin:.35rem 0}

.toc{
  background:var(--cp-soft);
  border:1px solid var(--cp-line);
  border-left:5px solid var(--cp-frame);
  border-radius:3px;
  padding:22px;
  margin:32px 0
}
.toc strong{color:var(--cp-frame)}
.toc ol{columns:2}
.toc a{color:#536d38}
.toc a:hover{color:#36531f}

.callout{
  padding:21px;
  border-radius:3px;
  background:#f5f7f2;
  border-left:5px solid var(--cp-accent);
  margin:28px 0
}
.warning{
  background:#fff7eb;
  border-left-color:#d79b31
}

.steps{margin:25px 0}
.step{
  padding:19px;
  background:#fff;
  border:1px solid #cfd6da;
  border-top:4px solid var(--cp-frame);
  border-radius:4px;
  margin:14px 0
}
.step h3{margin-top:0}

.comparison{
  border-collapse:collapse;
  width:100%;
  margin:25px 0
}
.comparison th,.comparison td{
  border:1px solid var(--cp-line);
  padding:13px;
  text-align:left
}
.comparison th{
  background:var(--cp-frame);
  color:#fff
}
.comparison tr:nth-child(even) td{background:#fafbfb}

.faq details{
  border:1px solid #cfd6da;
  border-radius:3px;
  padding:15px 17px;
  margin:10px 0;
  background:#fff
}
.faq details[open]{border-left:5px solid var(--cp-accent)}
.faq summary{
  font-weight:700;
  color:var(--cp-frame);
  cursor:pointer
}

.references{
  font-size:.9rem;
  color:var(--cp-muted);
  border-top:1px solid var(--cp-line);
  margin-top:42px
}

.cta{
  background:var(--cp-frame);
  color:#fff;
  border-radius:4px;
  padding:32px;
  margin-top:42px
}
.cta h2,.cta p{color:#fff}
.cta .btn{margin-top:5px}

/* Footer */
.site-footer{
  background:var(--cp-header);
  color:#cfd8dc;
  padding:36px 0 18px;
  margin-top:55px
}
.footer-grid{
  display:grid;
  grid-template-columns:1.35fr .8fr .8fr;
  gap:38px
}
.footer-logo{width:150px;display:block;margin-bottom:12px}
.site-footer h3,.site-footer strong{color:#fff}
.site-footer p{color:#cfd8dc;font-size:.9rem}
.site-footer a{color:#e2e8eb;font-size:.9rem}
.site-footer a:hover{color:var(--cp-accent);text-decoration:none}
.footer-links{display:grid;gap:7px}
.copy{
  margin-top:26px;
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.12);
  color:#9eacb3;
  font-size:.82rem
}
.back-top{
  position:fixed;
  right:17px;bottom:17px;
  width:38px;height:38px;
  border:0;border-radius:3px;
  background:var(--cp-accent);
  color:#172018;
  font-weight:800;
  cursor:pointer
}
:focus-visible{outline:3px solid var(--cp-accent);outline-offset:3px}

@media(max-width:850px){
  .hero-grid{grid-template-columns:1fr}
  .toc ol{columns:1}
  .footer-grid{grid-template-columns:1fr}
  .menu-toggle{display:block}
  .navlinks{
    display:none;
    position:absolute;
    left:0;right:0;top:62px;
    height:auto;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    padding:12px 4%;
    background:var(--cp-header)
  }
  .navlinks.open{display:flex}
  .navlinks a{line-height:42px}
  .comparison{display:block;overflow-x:auto}
}
@media(max-width:520px){
  .hero{padding:44px 0 38px}
  .section{padding:45px 0}
}