/* =====================================================================
   FastDriver Plugin 1369 - Icon Checklist Card Grid
   Colour, spacing and layout only. No font-size and no font-family are
   declared anywhere in this file, so headings and body copy inherit the
   site defaults from theme-css.css (body -> --creote-family-two /
   --font-size-base, h1..h6 -> --creote-family-one at the theme's own
   sizes and line heights, p -> 16px / 26px). Change the theme type scale
   and this section follows it.
   Scoped under .fdck-sec.
   ===================================================================== */

.fdck-sec,.fdck-sec *,.fdck-sec *::before,.fdck-sec *::after{box-sizing:border-box}

.fdck-sec{
  --fdck-lime:var(--primary-color-one,#C1F11D);
  --fdck-ink:var(--primary-color-two,#141414);
  --fdck-head:var(--heading-dark,#141414);
  --fdck-body:var(--text-color-dark,#4a4e56);
  --fdck-mute:var(--text-color-dark-two,#888888);
  --fdck-line:var(--border-color-dark,#e4e7ee);
  --fdck-acc:var(--menu-active-color,#4cae08);
  --fdck-tint:#f8fde8;
  --fdck-tint:color-mix(in srgb, var(--fdck-lime) 13%, #ffffff);
  background:var(--fdck-tint);
  border-top:1px solid var(--fdck-line);
  padding:80px 0;
  color:var(--fdck-body);
  -webkit-font-smoothing:antialiased;
}
.fdck-wrap{max-width:1280px;margin:0 auto;padding:0 40px}

.fdck-title{
  margin:0;
  max-width:70ch;
  font-weight:600;
  color:var(--fdck-head);
}
.fdck-intro{margin-top:16px;max-width:76ch}
.fdck-intro p{margin:0 0 12px;color:var(--fdck-body)}
.fdck-intro p:last-child{margin-bottom:0}

.fdck-grid{margin-top:16px;display:grid;gap:16px;align-items:stretch}
.fdck-title + .fdck-grid,.fdck-intro + .fdck-grid{margin-top:26px}
.fdck-grid--2{grid-template-columns:repeat(2,1fr)}
.fdck-grid--3{grid-template-columns:repeat(3,1fr)}
.fdck-grid--4{grid-template-columns:repeat(4,1fr)}

.fdck-card{
  background:#ffffff;
  border:1px solid var(--fdck-line);
  border-radius:14px;
  padding:24px 22px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:transform .2s ease,border-color .2s ease;
}
.fdck-card:hover{transform:translateY(-3px);border-color:var(--fdck-head)}

.fdck-card__hd{display:flex;align-items:center;gap:13px}
.fdck-card__ic{
  flex:none;
  width:40px;
  height:40px;
  border-radius:100px;
  background:var(--fdck-lime);
  color:var(--fdck-ink);
  display:grid;
  place-items:center;
}
.fdck-card__ic svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fdck-card__ic svg [fill]:not([fill="none"]){fill:currentColor}
.fdck-card__t{
  margin:0;
  font-weight:600;
  color:var(--fdck-head);
}

.fdck-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.fdck-li{display:flex;gap:11px;align-items:flex-start;color:var(--fdck-body)}
.fdck-li__ic{flex:none;width:15px;height:15px;margin-top:3px;display:inline-flex;color:var(--fdck-acc)}
.fdck-li__ic svg{width:15px;height:15px;fill:currentColor;display:block}

/* ---------------------------------------------------------------------
   theme-css.css adds a FontAwesome tick and 25px of padding to every
   `section ul li`. These cards draw their own tick, so switch the
   theme's pseudo-element off.
   --------------------------------------------------------------------- */
.fdck-sec .fdck-list li{padding-left:0;list-style:none}
.fdck-sec .fdck-list li::before,.fdck-sec .fdck-list li::after{content:none;display:none}

.fdck-foot{margin-top:20px;max-width:78ch;color:var(--fdck-mute)}
.fdck-foot p{margin:0 0 10px;color:var(--fdck-mute)}
.fdck-foot p:last-child{margin-bottom:0}

@media(max-width:1000px){
  .fdck-grid--3,.fdck-grid--4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .fdck-sec{padding:56px 0}
  .fdck-wrap{padding:0 20px}
  .fdck-grid--2,.fdck-grid--3,.fdck-grid--4{grid-template-columns:1fr}
}
@media(max-width:400px){
  .fdck-wrap{padding:0 16px}
}