/* ==========================================================================
   HOMEPAGE SECTIONS — rebuilt to continue the hero's visual language.
   ==========================================================================
   Scoped like dc-hero.css: every selector is prefixed, because index.css is
   245 KB with 621 !important declarations and a generic class name here is a
   collision waiting to happen in both directions.

   The palette is inherited from the hero rather than redeclared, so there is
   one place to change it when the direction is settled.
   ========================================================================== */

.dc-metrics,
.dc-switch {
  --h-ground:   #07111F;
  --h-ground-2: #0D1B2A;
  --h-card:     #122338;
  --h-card-hi:  #172C45;
  --h-blue:     #28B6FF;
  --h-teal:     #36D6A5;
  --h-white:    #F8FAFC;
  --h-muted:    #94A3B8;
  --h-rule:     rgba(148, 163, 184, 0.16);
}

/* ==========================================================================
   METRICS BAR
   --------------------------------------------------------------------------
   Was a flex row with three empty <div>s acting as 1px dividers. When it
   wrapped on a narrow screen those dividers wrapped too, leaving stray
   vertical lines between rows. Grid with a border on the cell does the same
   job and cannot produce an orphan.
   ========================================================================== */

.dc-metrics {
  background: var(--h-ground);
  border-top: 1px solid var(--h-rule);
  border-bottom: 1px solid var(--h-rule);
  padding: clamp(26px, 4vw, 40px) 20px;
}

.dc-metrics-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 24px 0;
}

.dc-metric {
  text-align: center;
  padding: 0 22px;
  border-left: 1px solid var(--h-rule);
}

/* The first cell of every row, whatever the column count resolves to. */
.dc-metric:first-child { border-left: 0; }

@media (max-width: 700px) {
  .dc-metric { border-left: 0; }
}

.dc-metric-value {
  font-family: var(--font-header, 'Archivo', system-ui, sans-serif);
  font-size: clamp(1.9rem, 4.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  /* Tabular figures so the digits do not jitter sideways while counting up. */
  font-variant-numeric: tabular-nums;
  background: linear-gradient(96deg, var(--h-blue), var(--h-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dc-metric-label {
  margin-top: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--h-muted);
}

/* ==========================================================================
   ACQUISITION / DISPOSITION SWITCH
   --------------------------------------------------------------------------
   The two halves were shown side by side as static columns. Side by side asks
   the visitor to read both and work out which one they are; a switch asks one
   question and then commits the whole panel to that answer, which is also how
   the product itself works — you are acquiring or you are disposing.

   The process flow is the part that actually explains the platform. Nothing
   else on the page says what happens between "find a lead" and "close".
   ========================================================================== */

.dc-switch {
  background: var(--h-ground-2);
  padding: clamp(56px, 8vw, 88px) 20px;
}

.dc-switch-inner {
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.dc-switch-head { text-align: center; max-width: 680px; }

.dc-switch-head h2 {
  margin: 0 0 10px;
  font-family: var(--font-header, 'Archivo', system-ui, sans-serif);
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--h-white);
  text-wrap: balance;
}

.dc-switch-head p { margin: 0; color: var(--h-muted); line-height: 1.6; }

/* ---------------------------------------------------------------- the tabs */

.dc-switch-tabs {
  display: inline-flex;
  padding: 5px;
  gap: 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--h-rule);
}

.dc-switch-tab {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 11px 26px;
  border-radius: 8px;
  background: transparent;
  color: var(--h-muted);
  font-family: var(--font-header, 'Archivo', system-ui, sans-serif);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: color 200ms ease, background 200ms ease;
}

.dc-switch-tab:hover { color: var(--h-white); }

.dc-switch-tab[aria-selected="true"] {
  color: #07111F;
  background: linear-gradient(96deg, var(--h-blue), var(--h-teal));
}

.dc-switch-tab:focus-visible {
  outline: 3px solid var(--h-blue);
  outline-offset: 3px;
}

/* --------------------------------------------------------------- the panel */

.dc-switch-panel { width: 100%; }
.dc-switch-panel[hidden] { display: none; }

/* ---------------------------------------------------------- the flow steps */

.dc-flow {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  counter-reset: dc-flow;
}

.dc-flow li {
  position: relative;
  counter-increment: dc-flow;
  padding: 16px 14px;
  border-radius: 10px;
  background: var(--h-card);
  border: 1px solid var(--h-rule);
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--h-white);
}

.dc-flow li::before {
  content: counter(dc-flow, decimal-leading-zero);
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  color: var(--h-blue);
}

/* The connector. Drawn on the gap between cells rather than inside them, and
   hidden on the last item of a row by the grid itself wrapping — a chevron
   pointing at nothing is worse than no chevron. */
.dc-flow li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 12px;
  height: 1px;
  background: linear-gradient(90deg, var(--h-blue), transparent);
}

.dc-flow li:last-child::after { display: none; }

@media (max-width: 600px) {
  .dc-flow li::after { display: none; }
}

/* Staged reveal when a panel becomes visible. Each step lands 70ms after the
   one before it, so the eye follows the process in order rather than being
   shown a finished diagram all at once. */
@media (prefers-reduced-motion: no-preference) {
  .dc-switch-panel:not([hidden]) .dc-flow li {
    opacity: 0;
    animation: dc-flow-in 420ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
}

@keyframes dc-flow-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------- what you also get */

.dc-switch-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  align-items: start;
}

.dc-switch-detail ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.dc-switch-detail li {
  display: flex;
  gap: 10px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--h-muted);
}

.dc-switch-detail li::before {
  content: "";
  flex: 0 0 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--h-teal);
}

.dc-switch-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.dc-switch-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 10px;
  background: linear-gradient(96deg, var(--h-blue), var(--h-teal));
  color: #07111F;
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms ease;
}

.dc-switch-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -14px rgba(40, 182, 255, 0.7);
}

.dc-switch-cta:focus-visible {
  outline: 3px solid var(--h-white);
  outline-offset: 3px;
}

.dc-switch-link {
  color: var(--h-muted);
  font-size: 0.86rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dc-switch-link:hover { color: var(--h-white); }

/* ==========================================================================
   DEAL CARDS
   --------------------------------------------------------------------------
   These were three static placeholder cards carrying every rule as an inline
   style attribute — roughly 30 of them per card, so the three could and did
   drift apart, and none of them had a hover or focus state.

   Rebuilt as investment cards: the headline is the number, the metrics sit in
   a labelled grid rather than as prose, and the return gets a bar because a
   percentage is easier to compare as a length than as digits.

   Deliberately kept on the light ground. This section sits between two white
   sections, and an island of near-black in the middle of the page reads as a
   mistake rather than as emphasis. The dark palette belongs to the top of the
   page where it runs continuously.
   ========================================================================== */

.dc-deals {
  --d-ink:    #0B1120;
  --d-text:   #24312B;
  --d-muted:  #55635B;
  --d-faint:  #7C8A82;
  --d-rule:   #E7ECE7;
  --d-paper:  #FFFFFF;
  --d-accent: #374151;
  --d-signal: #E4622E;

  padding: clamp(56px, 8vw, 80px) 20px;
  background: var(--d-paper);
}

.dc-deals-inner { max-width: 1200px; margin: 0 auto; }

.dc-deals-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.dc-deals-head h2 {
  margin: 0 0 6px;
  font-family: var(--font-header, 'Archivo', system-ui, sans-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--d-ink);
}

.dc-deals-head p { margin: 0; color: var(--d-muted); font-size: 1.02rem; }

.dc-deals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 24px;
}

/* ------------------------------------------------------------------ card */

.dc-deal {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--d-paper);
  border: 1px solid var(--d-rule);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 240ms ease,
              border-color 240ms ease;
}

.dc-deal:hover,
.dc-deal:focus-within {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--d-accent) 40%, transparent);
  box-shadow: 0 20px 40px -22px rgba(14, 33, 25, 0.45);
}

.dc-deal-media {
  position: relative;
  height: 196px;
  overflow: hidden;
  background: #BEC9C0;
}

.dc-deal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dc-deal:hover .dc-deal-media img,
.dc-deal:focus-within .dc-deal-media img { transform: scale(1.06); }

.dc-deal-tag,
.dc-deal-age {
  position: absolute;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.dc-deal-tag {
  top: 12px; left: 12px;
  background: var(--d-accent);
  color: #fff;
  text-transform: uppercase;
}

.dc-deal-age {
  bottom: 12px; right: 12px;
  background: rgba(14, 33, 25, 0.78);
  color: #fff;
  font-weight: 600;
}

.dc-deal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 20px;
  flex: 1;
}

.dc-deal-price {
  font-family: var(--font-header, 'Archivo', system-ui, sans-serif);
  font-size: 1.72rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
}

.dc-deal-where { margin: 3px 0 0; font-size: 0.9rem; color: var(--d-muted); }

.dc-deal-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--d-rule);
  border-bottom: 1px solid var(--d-rule);
}

.dc-deal-metrics div { display: flex; flex-direction: column; gap: 2px; }

.dc-deal-metrics dt,
.dc-deal-metrics span:first-child {
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--d-faint);
  font-weight: 600;
}

.dc-deal-metrics strong {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--d-text);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ return bar */

.dc-deal-return { display: flex; flex-direction: column; gap: 6px; }

.dc-deal-return-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--d-faint);
  font-weight: 600;
}

.dc-deal-return-top b {
  font-size: 1rem;
  color: var(--d-accent);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.dc-deal-bar {
  height: 7px;
  border-radius: 99px;
  background: var(--d-rule);
  overflow: hidden;
}

/* Width is set inline per card from the real figure; the transition is what
   makes it read as a measurement filling rather than a static block. */
.dc-deal-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--d-accent), var(--d-signal));
  transition: width 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dc-deal.dc-in .dc-deal-bar i,
.dc-deal:hover .dc-deal-bar i { width: var(--pct, 0%); }

@media (prefers-reduced-motion: reduce) {
  .dc-deal-bar i { transition: none; width: var(--pct, 0%); }
}

/* ---------------------------------------------------------------- action */

.dc-deal-go {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--d-accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.dc-deal-go::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.dc-deal-go span { transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1); }
.dc-deal:hover .dc-deal-go span,
.dc-deal:focus-within .dc-deal-go span { transform: translateX(5px); }

.dc-deal:focus-within { outline: 3px solid var(--d-accent); outline-offset: 3px; }
.dc-deal-go:focus-visible { outline: none; }

/* ==========================================================================
   HOW IT WORKS
   --------------------------------------------------------------------------
   Four steps that were four unrelated boxes. Numbered here because this is a
   genuine sequence — you cannot export a list you have not filtered — and the
   connector makes the order visible rather than implied by reading direction
   alone.

   Same flow vocabulary as the Acquisition/Disposition switch, so the page
   reads as one system instead of two designers.
   ========================================================================== */

.dc-steps {
  --s-ink:    #0B1120;
  --s-text:   #24312B;
  --s-muted:  #55635B;
  --s-faint:  #7C8A82;
  --s-rule:   #E7ECE7;
  --s-paper:  #FFFFFF;
  --s-ground: #F1F4F1;
  --s-accent: #374151;

  padding: clamp(56px, 8vw, 84px) 20px;
  background: var(--s-ground);
}

.dc-steps-inner { max-width: 1120px; margin: 0 auto; }

.dc-steps-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }

.dc-steps-head h2 {
  margin: 0 0 8px;
  font-family: var(--font-header, 'Archivo', system-ui, sans-serif);
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--s-ink);
  text-wrap: balance;
}

.dc-steps-head p { margin: 0; color: var(--s-muted); font-size: 1.02rem; }

.dc-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.dc-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 22px;
  background: var(--s-paper);
  border: 1px solid var(--s-rule);
  border-radius: 12px;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 220ms ease;
}

.dc-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px -22px rgba(14, 33, 25, 0.4);
}

/* The connector between cards. Hidden on the last one and whenever the grid
   has wrapped to a single column, because an arrow pointing at the edge of
   the screen is worse than no arrow. */
.dc-step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -20px;
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, var(--s-accent), transparent);
}

.dc-step:last-child::after { display: none; }

@media (max-width: 620px) {
  .dc-step::after { display: none; }
}

.dc-step-n {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--s-accent);
}

.dc-step h3 {
  margin: 0;
  font-family: var(--font-header, 'Archivo', system-ui, sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--s-ink);
}

.dc-step p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--s-muted); }

/* ==========================================================================
   PRICING
   --------------------------------------------------------------------------
   dc-layout.css styles `.pricing-card.featured`, but the template in index.php
   emits `.pricing-card.popular`. The class it was styled against has never
   existed in the markup, so the "Most Popular" plan has been rendering with
   exactly the same weight as the other two and its badge unstyled.

   Styled against the class the markup actually ships.
   ========================================================================== */

.pricing-section {
  --p-ink:    #0B1120;
  --p-muted:  #55635B;
  --p-rule:   #E7ECE7;
  --p-accent: #374151;
  --p-signal: #E4622E;
}

.pricing-grid { align-items: center; }

.pricing-card {
  position: relative;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 220ms ease;
}

.pricing-card:hover { transform: scale(1.02); }

/* The featured plan is dominant by size, elevation and border — three quiet
   signals rather than one loud one. */
.pricing-card.popular {
  border: 1.5px solid var(--p-accent) !important;
  box-shadow: 0 26px 56px -28px rgba(14, 33, 25, 0.5);
  z-index: 1;
}

@media (min-width: 900px) {
  .pricing-card.popular { transform: scale(1.045); }
  .pricing-card.popular:hover { transform: scale(1.065); }
}

.popular-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 16px;
  border-radius: 99px;
  background: var(--p-accent);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 18px -8px rgba(30, 122, 85, 0.9);
}

.pricing-card .price {
  font-family: var(--font-header, 'Archivo', system-ui, sans-serif);
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.028em;
  color: var(--p-ink);
  font-variant-numeric: tabular-nums;
}

.trial-disclosure {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--p-muted);
}

/* ==========================================================================
   COVERAGE MAP
   --------------------------------------------------------------------------
   A tile grid rather than a geographic outline. Every state is one equal
   tile, which is what a coverage map actually wants: the interesting fact is
   that Rhode Island can carry as much inventory as Texas, and a true-area map
   hides precisely that. It also needs no boundary file, so it is honest about
   geography instead of approximating a country badly.
   ========================================================================== */

.dc-map {
  --h-ground:   #07111F;
  --h-ground-2: #0D1B2A;
  --h-blue:     #28B6FF;
  --h-teal:     #36D6A5;
  --h-white:    #F8FAFC;
  --h-muted:    #94A3B8;
  --h-rule:     rgba(148, 163, 184, 0.16);

  background: var(--h-ground);
  padding: clamp(52px, 7vw, 78px) 20px;
}

.dc-map-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.dc-map-head { text-align: center; max-width: 560px; }

.dc-map-head h2 {
  margin: 0 0 8px;
  font-family: var(--font-header, 'Archivo', system-ui, sans-serif);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.022em;
  color: var(--h-white);
}

.dc-map-head p { margin: 0; color: var(--h-muted); font-size: 0.98rem; line-height: 1.6; }

.dc-map-grid {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: clamp(3px, 0.7vw, 6px);
  width: 100%;
  max-width: 660px;
}

.dc-tile {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: clamp(0.5rem, 1.2vw, 0.66rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: default;
  transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms ease;
}

/* Four bands, not a continuous ramp: with one dominant state a linear scale
   renders every other market as the same dim grey, and which markets are live
   is the whole question the map answers. */
.dc-tile--0 { background: rgba(148, 163, 184, 0.10); color: rgba(148, 163, 184, 0.45); }
.dc-tile--1 { background: rgba(40, 182, 255, 0.22);  color: #CDE9FB; }
.dc-tile--2 { background: rgba(40, 182, 255, 0.55);  color: #04121D; }
.dc-tile--3 { background: linear-gradient(140deg, var(--h-blue), var(--h-teal)); color: #04121D; }

.dc-tile:hover {
  transform: scale(1.14);
  box-shadow: 0 6px 18px -6px rgba(40, 182, 255, 0.75);
  z-index: 1;
}

.dc-map-key {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.dc-map-key .dc-tile { width: 15px; aspect-ratio: 1; border-radius: 4px; }
.dc-map-key .dc-tile:hover { transform: none; box-shadow: none; }

.dc-map-key small {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--h-muted);
  margin-right: 10px;
}