/* ===== ZCS Contract Pages — Global CSS ===== */
/* Variables */
:root{
  --zcs-blue:#0b3154; --zcs-blue-700:#082a47; --zcs-blue-50:#eaf1fb; --zcs-red:#c83737;
  --zcs-text:#304b63; --zcs-border:#e4ecf7; --wrap-max:1600px;

  --space-xxl: 88px; --space-xl: 72px; --space-lg: 56px; --space-md: 32px; --space-sm: 18px;
  --radius-lg: 20px; --radius-md: 16px; --radius-sm: 12px;

  --content-pad: 22px;
}

/* Base */
.zcs-page *{box-sizing:border-box}
.zcs-page{background:#fff;color:var(--zcs-text);-webkit-font-smoothing:antialiased}
.zcs-wrap{width:92%;max-width:var(--wrap-max);margin:0 auto}
@media (min-width: 768px){ .zcs-wrap{width:84%} :root{ --content-pad: 24px; } }
@media (min-width:1200px){ .zcs-wrap{width:80%} :root{ --content-pad: 28px; } }

/* Type */
.zcs-title{font-weight:600;color:var(--zcs-blue);line-height:1.15;margin:0 0 var(--space-sm)}
h2.zcs-title{font-size:30px;padding:0!important}
@media (min-width:768px){ h2.zcs-title{font-size:36px} }
@media (min-width:1200px){ h2.zcs-title{font-size:40px} }
h1.zcs-hero__title{font-size:40px}
@media (min-width:768px){ h1.zcs-hero__title{font-size:52px} }
@media (min-width:1200px){ h1.zcs-hero__title{font-size:56px} }

/* Breadcrumb */
.zcs-breadcrumb{padding-top:var(--space-md);padding-bottom:var(--space-sm)}
.zcs-breadcrumb ol{display:flex;gap:8px;list-style:none;padding:0;margin:0;font-size:14px;flex-wrap:wrap}
.zcs-breadcrumb a{color:var(--zcs-blue);text-decoration:none}
.zcs-breadcrumb li{opacity:.85}
.zcs-breadcrumb li+li::before{content:"›";margin:0 6px;color:var(--zcs-blue)}

/* Sections */
.zcs-section{padding:var(--space-xl) 0;border-top:1px solid var(--zcs-border)}
.zcs-section:first-of-type{border-top:none}

/* Blue variant */
.zcs-section--blue{ background:var(--zcs-blue); color:#eaf3ff; border-top:none; }
.zcs-section--blue .zcs-title{ color:#fff; }
.zcs-section--blue a{ color:#fff; text-decoration:underline; }
.zcs-section--blue a:hover{ opacity:.9; }

/* Optional red CTA band */
.zcs-cta{ background:var(--zcs-red); color:#fff; padding:var(--space-lg) 0; }
.zcs-cta .zcs-title{ color:#fff; }

/* Hero */
.zcs-hero{background:var(--zcs-blue-50);padding:var(--space-xxl) 0}
.zcs-hero__layout{display:grid;gap:var(--space-md);align-items:center}
.zcs-hero__text{max-width:900px;margin:0}
.zcs-hero__media img{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--zcs-border);background:#fff;object-fit:cover}
@media (min-width:992px){ .zcs-hero__layout{grid-template-columns:1.2fr .8fr} }
.zcs-badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--space-md)}
.zcs-badge{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--zcs-border);color:var(--zcs-blue);padding:10px 14px;border-radius:999px;font-weight:700;font-size:13px}

/* Grid */
.zcs-grid{display:grid;gap:var(--space-md)}
.zcs-2{grid-template-columns:1fr}
.zcs-3{grid-template-columns:1fr}
@media (min-width:768px){ .zcs-2{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .zcs-3{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* Cards */
.zcs-card{background:#fff;border:1px solid var(--zcs-border);border-radius:18px;padding:22px}
@media (min-width:768px){ .zcs-card{padding:24px} }
@media (min-width:1200px){ .zcs-card{padding:28px} }
.zcs-card h3{margin:0 0 8px;font-size:20px;color:var(--zcs-blue)}
.zcs-card p{margin:0}

/* Cards in blue section (centered) */
.zcs-section--blue .zcs-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:#eaf3ff; padding:50px; text-align:center;
}
.zcs-section--blue .zcs-card h3{color:#fff}
.zcs-section--blue .zcs-card p{color:#e1ecff}

/* Icon box (10px inner gap) */
.zcs-iconwrap{
  width:54px;height:54px;padding:10px;border-radius:14px;display:grid;place-items:center;margin-bottom:12px;
  background:var(--zcs-blue-50);border:1px solid var(--zcs-border)
}
.zcs-iconwrap i{font-size:22px;color:var(--zcs-blue)}
.zcs-section--blue .zcs-iconwrap{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22)}
.zcs-section--blue .zcs-iconwrap i{color:#fff}
.zcs-section--blue .zcs-card .zcs-iconwrap{margin:0 auto 12px}

/* Pills (if used) */
.zcs-pill{display:inline-block;background:var(--zcs-blue);color:#fff;font-size:12px;padding:6px 10px;border-radius:999px;margin-bottom:10px}
.zcs-section--blue .zcs-pill{background:#fff;color:var(--zcs-blue)}

/* Accent block */
.zcs-accent{background:var(--zcs-blue);color:#eaf3ff;border:1px solid var(--zcs-blue-700);border-radius:var(--radius-lg);padding:28px}
@media (min-width:768px){ .zcs-accent{padding:36px} }

/* Steps */
.zcs-steps{counter-reset:step;display:grid;gap:var(--space-sm)}
.zcs-step{position:relative;padding-left:58px;min-height:42px}
.zcs-step:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:42px;height:42px;display:grid;place-items:center;background:var(--zcs-red);color:#fff;border-radius:12px;font-weight:800}

/* Downloads */
.zcs-dl a{display:flex;align-items:center;gap:12px;text-decoration:none;border:1px solid var(--zcs-border);padding:16px 18px;border-radius:14px;color:var(--zcs-blue);background:#fff;min-height:64px}
.zcs-dl small{opacity:.75}

/* Contacts */
.zcs-contacts .zcs-card p{margin:8px 0}
.zcs-contacts a{color:var(--zcs-blue);text-decoration:none}
.zcs-section--blue .zcs-contacts a{color:#fff;text-decoration:underline}

/* FAQ (robust) */
.zcs-faq{margin-top:var(--space-md)}
.zcs-faq details{border:1px solid var(--zcs-border)!important;border-radius:14px!important;background:#fff!important;overflow:hidden}
.zcs-faq details+details{margin-top:var(--space-sm)}
.zcs-faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;cursor:pointer;color:var(--zcs-blue);font-weight:800;list-style:none}
.zcs-faq summary::-webkit-details-marker{display:none}
.zcs-faq summary::marker{display:none}
.zcs-faq .answer{padding:14px 18px 18px;border-top:1px solid var(--zcs-border);color:var(--zcs-text)}
.zcs-faq summary::after{content:"";width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .25s ease;opacity:.8}
.zcs-faq details[open] summary::after{transform:rotate(45deg)}

/* Buttons */
.zcs-btn{display:inline-block;background:var(--zcs-red);border:1px solid #b03030;color:#fff;font-weight:700;border-radius:14px;padding:14px 20px;text-decoration:none}
.zcs-btn--ghost{background:#fff;color:var(--zcs-blue);border-color:var(--zcs-border)}

/* Sticky bar (mobile) */
.zcs-stickybar{position:sticky;bottom:0;z-index:30;background:#fff;border-top:1px solid var(--zcs-border);padding:10px 12px;display:flex;gap:10px}
.zcs-stickybar a{flex:1;text-align:center}
@media (min-width:768px){ .zcs-stickybar{display:none} }
