/* =========================================================
   THOMPSON SORTED — FREE HOMEPAGE DESIGN OFFER (index.html)
   Left: the offer in words. Right: a gradient promo card with a
   browser-framed example homepage and a call to action.
   ========================================================= */

.free-design { background-color: var(--white); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

.free-design .container {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}

.free-design h2 { margin-bottom: 16px; }
.free-design-lead { color: var(--charcoal-500); font-size: 1.1rem; max-width: 520px; margin-bottom: 26px; }
.free-design-points { display: grid; gap: 12px; margin-bottom: 0; }
.free-design-points li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--charcoal-700); }
.free-design-points svg { flex-shrink: 0; color: var(--teal); }

/* The promo card */
.fd-card {
  max-width: 400px;
  justify-self: center;
  width: 100%;
  padding: 18px 18px 28px;
  border-radius: 22px;
  color: var(--white);
  background:
    radial-gradient(420px circle at 100% 100%, rgba(92, 196, 186, .35), transparent 60%),
    linear-gradient(160deg, #1f2422 0%, #185e58 100%);
  box-shadow: 0 22px 50px rgba(31, 36, 34, .25);
}

.fd-browser {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}
.fd-bar { display: flex; gap: 6px; padding: 9px 12px; background: #ecebe6; }
.fd-bar i { width: 9px; height: 9px; border-radius: 50%; background: #c9c6bd; }
.fd-browser img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 11;
  object-fit: cover;
  object-position: top;
}

.fd-caption { margin: 14px 4px 18px; font-size: .88rem; color: rgba(255, 255, 255, .72); }
.fd-card h3 { color: var(--white); font-size: 1.55rem; margin: 0 4px 8px; }
.fd-card p { margin: 0 4px 22px; color: rgba(255, 255, 255, .85); font-size: 1.02rem; }
.fd-card .btn { margin-left: 4px; background: var(--white); color: var(--teal-dark); }
.fd-card .btn:hover { background: var(--teal-light); }

@media (max-width: 768px) {
  .free-design .container { grid-template-columns: 1fr; gap: 40px; }
}