/* =====================================================================
   FastDriver Plugin 1363 - Text With Checklist Panel
   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 .fdcp-sec.
   ===================================================================== */

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

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

.fdcp-title{
  margin:0;
  max-width:70ch;
  font-weight:600;
  color:var(--fdcp-head);
}

.fdcp-grid{margin-top:26px;display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:start}
.fdcp-grid--solo{grid-template-columns:1fr}

.fdcp-body{display:flex;flex-direction:column;gap:18px;max-width:70ch;min-width:0}
.fdcp-p p{margin:0 0 12px;color:var(--fdcp-body)}
.fdcp-p p:last-child{margin-bottom:0}
.fdcp-p a{color:var(--fdcp-head);text-decoration:underline}

/* Panel */
.fdcp-panel{
  background:var(--fdcp-tint);
  border:1px solid var(--fdcp-line);
  border-radius:14px;
  padding:26px 24px;
  min-width:0;
}
.fdcp-panel__t{
  margin:0;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fdcp-mute);
}
.fdcp-list{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:11px 18px}
.fdcp-list--1{grid-template-columns:1fr}
.fdcp-list--2{grid-template-columns:1fr 1fr}
.fdcp-li{display:flex;gap:10px;align-items:flex-start;color:var(--fdcp-head)}
.fdcp-li__ic{flex:none;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;margin-top:2px;color:var(--fdcp-acc)}
.fdcp-li__ic svg{width:16px;height:16px;fill:currentColor;display:block}

/* ---------------------------------------------------------------------
   theme-css.css adds a FontAwesome tick and 25px of padding to every
   `section ul li`. This list draws its own icon, so switch the theme's
   pseudo-element off inside the panel.
   --------------------------------------------------------------------- */
.fdcp-sec .fdcp-list li{padding-left:0;list-style:none}
.fdcp-sec .fdcp-list li::before,.fdcp-sec .fdcp-list li::after{content:none;display:none}

@media(max-width:1000px){
  .fdcp-grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:760px){
  .fdcp-sec{padding:56px 0}
  .fdcp-wrap{padding:0 20px}
  .fdcp-list--2{grid-template-columns:1fr}
}
@media(max-width:400px){
  .fdcp-wrap{padding:0 16px}
}