/* American Dream Homes — Sell page + ad landing pages.
   Loads after team.css (tokens, nav, rail, form, dock) and listings.css (the Potential compare component). */

/* ── Film ── */
.film { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #000; box-shadow: 0 40px 120px -40px rgba(0,0,0,.7); }
.film video { width: 100%; height: 100%; object-fit: cover; }
.film-play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; color: #fff; background: radial-gradient(closest-side, rgba(15,25,36,.55), rgba(15,25,36,.1)); transition: opacity .5s var(--ease-out); cursor: pointer; }
.film-ring { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--blue); transition: transform .6s var(--ease-out); }
.film-ring svg { transform: translateX(2px); }
.film-play:hover .film-ring { transform: scale(1.08); }
.film.playing .film-play { opacity: 0; pointer-events: none; }
@media (max-width: 767px) { .film { aspect-ratio: 9 / 16; max-height: 76vh; margin-inline: auto; } }

/* ── Comparison table ── */
.cmp-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.cmp-table th, .cmp-table td { padding: 22px 20px; text-align: left; border-bottom: 1px solid rgba(24,37,52,.14); vertical-align: middle; }
.cmp-table thead th { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--mid, #4b5968); border-bottom-color: rgba(24,37,52,.35); }
.cmp-table tbody th { font-family: 'Barlow Condensed', sans-serif; font-weight: 500; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
.cmp-table td { font-size: 16px; color: #4b5968; }
.cmp-table .adh { background: rgba(32,152,209,.07); color: var(--navy); }
.cmp-table thead .adh { color: var(--ink); box-shadow: inset 0 3px 0 var(--blue); }
.cmp-table td.adh { font-weight: 600; }
.cmp-table td.adh svg { display: inline-block; vertical-align: -3px; margin-right: 10px; color: var(--blue); }

/* ── Media Package ── */
.mp-list { list-style: none; margin: 0; padding: 0; }
.mp-item { display: grid; grid-template-columns: 72px 1fr; gap: 16px; padding: 30px 0; border-top: 1px solid rgba(255,255,255,.14); }
.mp-item:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.mp-n { font-family: 'Barlow Condensed', sans-serif; font-weight: 300; font-size: 44px; line-height: .9; color: var(--blue); }

/* ── Steps ── */
.st-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 768px) { .st-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .st-list { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.st { border-top: 2px solid var(--navy); padding-top: 22px; }
.st-n { font-family: 'Barlow Condensed', sans-serif; font-weight: 300; font-size: 72px; line-height: .8; color: var(--blue); }
