/* =====================================================================
   FastDriver Plugin 1370 - Text With Feature 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 .fdfp-sec.
   ===================================================================== */

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

.fdfp-sec{
  --fdfp-lime:var(--primary-color-one,#C1F11D);
  --fdfp-ink:var(--primary-color-two,#141414);
  --fdfp-head:var(--heading-dark,#141414);
  --fdfp-body:var(--text-color-dark,#4a4e56);
  --fdfp-mute:var(--text-color-dark-two,#888888);
  --fdfp-line:var(--border-color-dark,#e4e7ee);
  --fdfp-acc:var(--menu-active-color,#4cae08);
  --fdfp-tint:#f8fde8;
  --fdfp-tint:color-mix(in srgb, var(--fdfp-lime) 13%, #ffffff);
  background:#ffffff;
  padding:80px 0;
  color:var(--fdfp-body);
  -webkit-font-smoothing:antialiased;
}
.fdfp-wrap{max-width:1280px;margin:0 auto;padding:0 40px}
.fdfp-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;align-items:start}
.fdfp-grid--solo{grid-template-columns:1fr}
.fdfp-col{min-width:0}

.fdfp-title{
  margin:0;
  font-weight:600;
  color:var(--fdfp-head);
}
.fdfp-body{margin-top:20px;display:flex;flex-direction:column;gap:16px;max-width:60ch}
.fdfp-p p{margin:0 0 12px;color:var(--fdfp-body)}
.fdfp-p p:last-child{margin-bottom:0}
.fdfp-p a{color:var(--fdfp-head);text-decoration:underline}

/* Panel */
.fdfp-panel{
  background:var(--fdfp-tint);
  border:1px solid var(--fdfp-line);
  border-radius:16px;
  padding:30px 28px;
  min-width:0;
}
.fdfp-panel__t{
  margin:0;
  font-weight:600;
  color:var(--fdfp-head);
}
.fdfp-panel__s{margin-top:10px;color:var(--fdfp-body)}
.fdfp-panel__s p{margin:0 0 10px;color:var(--fdfp-body)}
.fdfp-panel__s p:last-child{margin-bottom:0}

.fdfp-checks{margin:20px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.fdfp-check{display:flex;gap:12px;align-items:flex-start;color:var(--fdfp-body)}
.fdfp-check__ic{flex:none;width:15px;height:15px;margin-top:3px;display:inline-flex;color:var(--fdfp-acc)}
.fdfp-check__ic svg{width:15px;height:15px;fill:currentColor;display:block}

.fdfp-sub{margin-top:22px;padding-top:20px;border-top:1px solid var(--fdfp-line)}
.fdfp-sub__t{
  margin:0;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fdfp-mute);
}
.fdfp-notes{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.fdfp-note{color:var(--fdfp-body)}

/* ---------------------------------------------------------------------
   theme-css.css adds a FontAwesome tick and 25px of padding to every
   `section ul li`. Both panel lists supply their own markers, so switch
   the theme's pseudo-element off.
   --------------------------------------------------------------------- */
.fdfp-sec .fdfp-checks li,.fdfp-sec .fdfp-notes li{padding-left:0;list-style:none}
.fdfp-sec .fdfp-checks li::before,.fdfp-sec .fdfp-checks li::after,
.fdfp-sec .fdfp-notes li::before,.fdfp-sec .fdfp-notes li::after{content:none;display:none}

/* Buttons */
.fdfp-btns{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}
.fdfp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:17px 30px;
  border-radius:100px;
  font-weight:600;
  line-height:1;
  text-decoration:none;
  transition:filter .18s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.fdfp-btn--solid{background:var(--fdfp-ink);color:var(--fdfp-lime)}
.fdfp-btn--solid:hover{filter:brightness(1.25);color:var(--fdfp-lime)}
.fdfp-btn--lime{background:var(--fdfp-lime);color:var(--fdfp-ink)}
.fdfp-btn--lime:hover{filter:brightness(.94);color:var(--fdfp-ink)}
.fdfp-btn--ghost{background:#fff;border:1px solid var(--fdfp-line);color:var(--fdfp-head);font-weight:500;padding:17px 28px}
.fdfp-btn--ghost:hover{border-color:var(--fdfp-head)}
.fdfp-btn--light{background:transparent;border:1px solid rgba(255,255,255,.3);color:#fff;font-weight:500;padding:17px 28px}
.fdfp-btn--light:hover{background:#fff;color:var(--fdfp-ink)}

@media(max-width:1000px){
  .fdfp-grid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:760px){
  .fdfp-sec{padding:56px 0}
  .fdfp-wrap{padding:0 20px}
  .fdfp-panel{padding:24px 20px}
  .fdfp-btns .fdfp-btn{width:100%}
}
@media(max-width:400px){
  .fdfp-wrap{padding:0 16px}
}