/* ==========================================================================
   Dealer Network landing — css/dealer-network.css
   The Dealers tab's home: wall-of-honor first screen (tier bands + right
   rail), then the live locator map, the certified-installer band, and the
   join band. Extends css/dealer-locator.css, which keeps owning the MapLibre
   chrome (popups, controls, fallback); this file owns everything around it.

   Standing rules (2026-08-16, per Hamza): near-black ground everywhere — no
   blue theme — and NO network totals or per-type counts anywhere on the page.
   Type: Oswald condensed uppercase headlines + JetBrains Mono kickers, the
   same pairing as /upfit and the locator popups.
   ========================================================================== */

.dn-page {
  --dn-bg: #0f1114;
  --dn-tile: #0a0a0a;
  --dn-panel: #14161a;
  --dn-line: rgba(255, 255, 255, 0.08);
  --dn-line-2: #3a3f46;
  --dn-txt: #ffffff;
  --dn-txt-2: #c9cdd2;
  --dn-txt-3: #8a9097;
  background: var(--dn-bg);
  color: var(--dn-txt);
  font-family: "Inter", sans-serif;
}

/* ── Shared voice ─────────────────────────────────────────────────────── */
.dn-kicker {
  margin: 0 0 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
}
.dn-h1 {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dn-txt);
}
.dn-h2 {
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.04;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--dn-txt);
}
.dn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: "Oswald", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dn-btn--red { background: var(--accent); color: #fff; }
.dn-btn--red:hover { background: var(--accent-hover); color: #fff; }
.dn-btn--ghost {
  border-color: var(--dn-line-2);
  color: var(--dn-txt-2);
  background: rgba(255, 255, 255, 0.04);
}
.dn-btn--ghost:hover { border-color: var(--accent); color: #fff; }
.dn-page a { text-decoration: none; }

/* ── Screen one: the wall, full width (the sign-in rail was removed
   2026-08-17, per Hamza — the wall breathes and online fits four across) ── */
.dn-shell {
  max-width: 1500px;
  margin: 0 auto;
}
.dn-wall {
  position: relative;
  overflow: hidden;
  padding: 18px 30px 34px 34px;
}
.dn-ghost-x {
  position: absolute;
  top: -90px;
  right: -30px;
  font-family: "Oswald", sans-serif;
  font-weight: 700;
  font-size: 430px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.028);
  pointer-events: none;
  user-select: none;
}
.dn-mast { position: relative; margin-bottom: 14px; }
.dn-sub { margin: 9px 0 0; color: var(--dn-txt-3); font-size: 14px; }

.dn-tier { margin-bottom: 18px; position: relative; }
/* The ONLINE DEALERS footer row deep-links to #online-dealers — same 80px
   fragment-jump allowance as .dn-team and .dn-apply below. */
.dn-tier--online { scroll-margin-top: 80px; }
.dn-tier--last { margin-bottom: 0; }
.dn-tier-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-family: "Oswald", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dn-txt-2);
}
.dn-tier-label::before { content: ""; width: 20px; height: 3px; background: var(--accent); }
.dn-tier-tag {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--dn-txt-3);
}
.dn-tier-grid { display: grid; gap: 12px; }
/* Five per row (2026-08-17, per Hamza) so each dealer tile reads larger. */
.dn-tier-grid--std { grid-template-columns: repeat(5, 1fr); }
/* Online dealers are the lead tier: bigger cards than the standard wall,
   sized so both rows of four sit above the fold with the banner leading. */
.dn-tier-grid--online { grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* Tiles share the mega nav's dark-stage treatment: near-black tile, hairline
   edge, faint silvery glow. */
.dn-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 86px;
  padding: 14px 12px;
  position: relative;
  border: 1px solid var(--dn-line);
  border-radius: 7px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255, 255, 255, 0.05), transparent 75%),
    var(--dn-tile);
  transition: border-color 0.2s, transform 0.2s;
}
.dn-card:hover { border-color: rgba(255, 255, 255, 0.22); transform: translateY(-3px); }
.dn-card img { display: block; max-height: 58px; max-width: 88%; width: auto; object-fit: contain; }
.dn-card--online { min-height: 144px; padding: 16px 18px; border-color: rgba(234, 48, 0, 0.36); }
.dn-card--online img { max-height: 92px; max-width: 82%; }
.dn-card--online:hover { border-color: var(--accent); }

/* ── Section two: the live map ────────────────────────────────────────── */
.dn-map-sec { border-top: 1px solid var(--dn-line); }
.dn-strip {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  max-width: 1500px;
  margin: 0 auto;
  padding: 30px 34px 20px;
}
.dn-expand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--dn-line-2);
  border-radius: 4px;
  background: transparent;
  color: var(--dn-txt-2);
  font-family: "Oswald", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.dn-expand:hover { border-color: var(--accent); color: #fff; }
.dn-expand svg { width: 14px; height: 14px; }

/* The locator loses the old full-viewport sizing and becomes a stage. The
   map itself still fills it absolutely (see dealer-locator.css #dl-map). */
.dn-locator {
  height: clamp(480px, 62vh, 620px);
  min-height: 0;
  /* The DEALER LOCATOR footer row deep-links to #locator — same 80px
     fragment-jump allowance the other anchored sections carry. */
  scroll-margin-top: 80px;
}
/* Fullscreen overlay mode lives at the bottom of this file so it also beats
   the mobile overrides below. */

/* The floating type-filter card over the map was removed 2026-08-17, per
   Hamza — the map always shows the full network. */

/* ── Photo bands ──────────────────────────────────────────────────────── */
.dn-join {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 340px;
  overflow: hidden;
  border-top: 1px solid var(--dn-line);
}
.dn-band-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Frame the shot so the wall's Feniex flame mark rides the left half. */
  object-position: 50% 38%;
}
.dn-join::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(15, 17, 20, 0.2) 0%, rgba(15, 17, 20, 0.62) 52%, rgba(15, 17, 20, 0.96) 78%);
}
.dn-band-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 54px 34px;
}
.dn-band-inner--right { display: flex; justify-content: flex-end; }
.dn-join-box { max-width: 470px; }
.dn-band-copy {
  margin: 15px 0 24px;
  max-width: 430px;
  color: var(--dn-txt-2);
  font-size: 15px;
  line-height: 1.6;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .dn-tier-grid--std { grid-template-columns: repeat(3, 1fr); }
  .dn-tier-grid--online { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .dn-wall { padding: 20px 18px 26px; }
  .dn-strip { padding: 24px 18px 16px; flex-wrap: wrap; }
  .dn-band-inner { padding: 40px 18px; }
  .dn-tier-grid--std { grid-template-columns: repeat(2, 1fr); }
  .dn-tier-grid--online { grid-template-columns: 1fr; }
  .dn-card--online { min-height: 154px; }
  .dn-tier-tag { display: none; }
  .dn-locator { display: flex; flex-direction: column; height: auto; }
  .dn-locator #dl-map { position: relative; inset: auto; height: 420px; }
  .dn-band-inner--right { justify-content: flex-start; }
}

/* ── Fullscreen map overlay ───────────────────────────────────────────────
   dn-locator--full is set by dealer-network.js from the Expand Map button or
   the #map-full deep link in the dealers menu. Kept last so it overrides the
   mobile stage sizing above; dl-map's absolute fill is restored explicitly
   for the same reason. */
.dn-locator.dn-locator--full {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: block;
  height: auto;
  background: var(--dn-bg);
}
.dn-locator.dn-locator--full #dl-map {
  position: absolute;
  inset: 0;
  height: auto;
}
body.dn-map-lock { overflow: hidden; }

/* ── Finder panel placement per layout ────────────────────────────────────
   The panel component itself lives in dealer-locator.css (absolute left dock,
   which desktop uses as-is, inline and fullscreen). These rules re-seat it in
   the two mobile layouts, and stay below the overlay block so they can build
   on it. */
@media (max-width: 720px) {
  /* In-flow page layout: the panel dissolves into the locator's flex column —
     search and location button stack above the map, the results list below
     it. The collapse toggle only makes sense when the panel floats. */
  .dn-locator:not(.dn-locator--full) { gap: 10px; padding-bottom: 14px; }
  .dn-locator:not(.dn-locator--full) .dl-panel { display: contents; }
  .dn-locator:not(.dn-locator--full) .dl-search,
  .dn-locator:not(.dn-locator--full) .dl-near-btn,
  .dn-locator:not(.dn-locator--full) .dl-search-hint,
  .dn-locator:not(.dn-locator--full) .dl-results-status,
  .dn-locator:not(.dn-locator--full) .dl-results { margin: 0 14px; }
  .dn-locator:not(.dn-locator--full) .dl-search { margin-top: 14px; }
  .dn-locator:not(.dn-locator--full) .dl-results-status,
  .dn-locator:not(.dn-locator--full) .dl-results { order: 2; }
  .dn-locator:not(.dn-locator--full) .dl-results { overflow: visible; }
  .dn-locator:not(.dn-locator--full) .dl-panel-toggle { display: none; }

  /* Fullscreen overlay: the panel becomes a bottom sheet under the map. The
     existing Hide/Show toggle doubles as the sheet's collapse control. */
  .dn-locator.dn-locator--full .dl-panel {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-width: none;
    max-height: 45%;
  }
  .dn-locator.dn-locator--full .dl-panel--closed {
    width: auto;
    max-height: none;
  }
  .dn-locator.dn-locator--full .dl-panel .dl-panel-toggle {
    min-height: 44px;
    align-self: stretch;
    order: -1;
  }
}

.dn-map-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--dn-line-2);
  border-radius: 4px;
  background: rgba(10, 10, 10, 0.85);
  color: var(--dn-txt-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.dn-map-close:hover { border-color: var(--accent); color: #fff; }
.dn-map-close svg { width: 14px; height: 14px; }

/* ── The support desk: the Sales & Marketing roster wall closing the page
   (2026-08-17, Hamza's pick from the team section concepts). Same tile
   language as the dealer wall; fills one screen when scrolled to, with the
   roster centered in it. People keep their DB order — the dealer-wall
   shuffle rule is placement politics and does not apply to staff. ── */
/* 70px is the sticky header's scrolled height — this section is only ever
   reached by scrolling, so that's the chrome it actually competes with. */
.dn-team {
  display: flex;
  align-items: center;
  min-height: calc(100vh - 70px);
  border-top: 1px solid var(--dn-line);
  /* The SALES TEAM menu row deep-links here; without this the sticky header
     covers the top of the section. 80px, not the 70px used above: a fragment
     jump fires no scroll event, so the header never takes its shorter
     scrolled height and is still its full 80px when the visitor lands. */
  scroll-margin-top: 80px;
}
/* Wider than the dealer wall above it (1500px): the roster grew to 24 and has
   to stay two rows, so the extra width is what keeps twelve tiles per row from
   getting cramped. */
.dn-team-inner {
  width: 100%;
  max-width: 1660px;
  margin: 0 auto;
  padding: 44px 34px 48px;
}
.dn-team-mast {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.dn-team-contact {
  margin: 0;
  padding-bottom: 5px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dn-txt-3);
}
.dn-team-contact a {
  color: var(--dn-txt);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 1px;
}
.dn-team-contact a:hover { color: var(--accent); }
/* Twelve across, two rows — the roster is 24 and stays two rows.
   Row count drives how cropped a face looks, and not the way you would guess:
   every row spends a fixed ~90px on the name, title and contact lines, so each
   extra row takes that much away from the photos, and fewer columns make the
   cards wider — the same photo height across more width is a flatter letterbox
   still. Adding a third row here would cost the photos about a third of their
   height, which is why the group widened instead. */
.dn-team-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}
.dn-team-card {
  background: var(--dn-tile);
  border: 1px solid var(--dn-line);
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.dn-team-card:hover { border-color: var(--accent); transform: translateY(-3px); }
/* Portrait crop — a head and shoulders rather than a band across the eyes. */
.dn-team-ph { aspect-ratio: 1 / 1.45; overflow: hidden; }
.dn-team-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.03) saturate(0.9) brightness(0.95);
}
.dn-team-cap { padding: 7px 8px 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
/* Two lines are reserved because a long name ("Christopher Patterson") wraps
   at this tile width, and without the reservation that one card's title and
   phone number sit lower than everyone else's in the row. */
.dn-team-name {
  font-family: "Oswald", sans-serif;
  font-size: clamp(10px, 0.78vw, 13px);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  min-height: 2.4em;
  text-transform: uppercase;
  color: var(--dn-txt);
}
/* Titles run from one word to "Sales Development Representative", so the line
   is allowed to wrap to two and every caption reserves the taller of the two
   heights — otherwise the rows below it step up and down. */
.dn-team-title {
  margin-top: 3px;
  min-height: 2.2em;
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(7px, 0.52vw, 9px);
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dn-txt-3);
}
/* Phone and address stack under the title. Addresses run to 24 characters
   ("christopher.p@feniex.com"), so they set the type size here — small enough
   to fit the tile at its narrowest, and never truncated, since half an address
   is worse than none. */
.dn-team-reach {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: "JetBrains Mono", monospace;
  /* Sized so the longest address on the wall, christopher.i@feniex.com at 24
     characters, still sits on one line in a twelve-across tile. */
  font-size: clamp(6px, 0.42vw, 7.2px);
  line-height: 1.4;
}
.dn-team-reach a { color: var(--dn-txt-2); overflow-wrap: anywhere; }
.dn-team-tel { letter-spacing: 0.04em; }
.dn-team-reach a:hover { color: var(--accent); }
/* Short laptop viewports: the same three rows have ~80px less room, so the
   chrome tightens and the crop shortens rather than letting the last row get
   cut by the fold. */
/* Short laptop viewports have ~110px less to give, so the crop shortens a
   little rather than letting the second row fall past the fold. */
@media (min-width: 1101px) and (max-height: 820px) {
  .dn-team-inner { padding: 24px 34px 26px; }
  .dn-team-mast { margin-bottom: 12px; }
  .dn-team-mast .dn-h2 { font-size: 26px; }
  .dn-team-ph { aspect-ratio: 1 / 1.3; }
  .dn-team-grid { gap: 8px; }
  .dn-team-reach { margin-top: 4px; padding-top: 4px; gap: 1px; }
}
@media (max-width: 1100px) {
  .dn-team { min-height: 0; }
  .dn-team-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .dn-team-inner { padding: 28px 18px 32px; }
  .dn-team-mast { flex-wrap: wrap; margin-bottom: 14px; }
  .dn-team-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .dn-team-title { min-height: 0; }
}

/* ── APPLY: the dealer application, closing the page (2026-08-18, per Hamza).
   Two columns — the pitch on the left, the real form on the right — so the
   form reads as the point of the section rather than a wall of inputs. The
   fields are Yii's, restyled; nothing about what posts changes. ── */
/* Sized to its content rather than held to a full screen: forcing 100vh here
   left a large dead gap above and below the form (Hamza, 2026-08-18). */
.dn-apply {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--dn-line);
  scroll-margin-top: 80px;
  position: relative;
  overflow: hidden;
}
.dn-apply::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(720px 420px at 12% 42%, rgba(225, 29, 42, 0.07), transparent 62%);
  pointer-events: none;
}
/* 1440px with 24px of padding is the header's own container, so the pitch
   starts level with the logo and the form ends level with the language
   switcher instead of running wider than the nav above it. */
.dn-apply-inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 52px 24px 56px;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 52px;
  /* Stretch, not centre: the pitch column then runs the full height of the
     form card and can space itself against it. */
  align-items: stretch;
}
/* The two closing sections share a type scale — this heading and "Sign in to
   your account" are the same size, so they read as a matched pair. */
.dn-apply .dn-h2 { font-size: clamp(28px, 3vw, 40px); }
.dn-apply-pitch {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dn-apply-lede {
  margin: 14px 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--dn-txt-2);
  max-width: 46ch;
}
/* Numbered rather than bulleted: these are the terms of the offer, and the
   numerals give the column a spine the form's field grid can sit against. */
/* Margins removed — the column's space-between now sets the gaps between the
   intro, this list and the agreement button. */
/* Set larger and further apart than the first pass: the list is the middle of
   three blocks spaced down the column, so giving it more height of its own is
   what closes the gaps around it. */
.dn-apply-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 19px;
}
.dn-apply-points li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: "Oswald", sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--dn-txt);
}
.dn-apply-points span {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.dn-apply-agreement {
  /* flex-start, or the button would stretch the full width of the column. */
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--dn-line-2);
  border-radius: 4px;
  font-family: "Oswald", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dn-txt);
  transition: border-color 0.15s, color 0.15s;
}
.dn-apply-agreement:hover { border-color: var(--accent); color: var(--accent); }
.dn-apply-agreement svg { width: 16px; height: 16px; }

.dn-apply-card {
  background: var(--dn-panel);
  border: 1px solid var(--dn-line);
  border-radius: 6px;
  padding: 26px 26px 24px;
}
.dn-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}
.dn-field--wide { grid-column: 1 / -1; }
/* Yii wraps each control in .form-group and prints a help block even when
   empty; both are flattened so the grid controls the rhythm. */
.dn-apply-card .form-group { margin: 0; }
.dn-apply-card .help-block { margin: 4px 0 0; font-size: 11px; color: #ff8a8a; }
.dn-apply-card .help-block:empty { display: none; }
.dn-apply-card input[type="text"],
.dn-apply-card input[type="email"],
.dn-apply-card input[type="tel"],
.dn-apply-card select {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  background: var(--dn-tile);
  border: 1px solid var(--dn-line-2);
  border-radius: 4px;
  color: var(--dn-txt);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13.5px;
  transition: border-color 0.15s, background 0.15s;
}
.dn-apply-card select {
  /* Arrow drawn here because a dark native select keeps the platform's light
     arrow on some browsers. */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9097' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
  padding-right: 34px;
}
.dn-apply-card select option { background: #14161a; color: var(--dn-txt); }
.dn-apply-card input::placeholder { color: var(--dn-txt-3); }
.dn-apply-card input:focus,
.dn-apply-card select:focus {
  outline: none;
  border-color: var(--accent);
  background: #101216;
}
.dn-apply-card .has-error input,
.dn-apply-card .has-error select { border-color: #ff5c5c; }

.dn-apply-foot {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
/* The widget is a fixed 304px iframe; scaling it keeps it from dictating the
   card's width on narrow screens. */
.dn-apply-foot .g-recaptcha { transform: scale(0.86); transform-origin: left center; }
.dn-apply-submit {
  flex: 1 1 200px;
  min-width: 180px;
  justify-content: center;
  padding: 14px 26px;
  border: 0;
  border-radius: 4px;
  font-family: "Oswald", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

@media (min-width: 1101px) and (max-height: 820px) {
  .dn-apply-inner { padding: 34px 24px 36px; gap: 40px; }
  .dn-apply-points { gap: 9px; }
  .dn-apply-card { padding: 20px 20px 18px; }
  .dn-apply-card input, .dn-apply-card select { height: 40px; }
}
@media (max-width: 1100px) {
  .dn-apply-inner { grid-template-columns: 1fr; gap: 30px; padding: 34px 18px 38px; }
}
@media (max-width: 720px) {
  .dn-form-grid { grid-template-columns: 1fr; }
  .dn-apply-foot { justify-content: center; }
  .dn-apply-foot .g-recaptcha { transform: scale(0.78); transform-origin: center; }
}

/* ── THREE REASONS: the thin plate that closes the page under the application
   (2026-08-18 — Hamza approved "the marquee" of three concepts).
   Raised charcoal, one step LIGHTER than the page's #0f1114 ground. It shipped
   pure black first and read as a hole punched through the page: every other
   surface here — the form card, the dealer tiles, the team cards — is lighter
   than the ground, so going darker was the one panel fighting that logic. ── */
.dn-reasons {
  background: #17191e;
  border-top: 1px solid var(--dn-line);
  border-bottom: 1px solid var(--dn-line);
}
.dn-reasons-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 34px 24px 36px;
  text-align: center;
}
.dn-reasons-h {
  margin: 9px 0 26px;
  font-family: "Oswald", sans-serif;
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--dn-txt);
}
.dn-reasons-h em { font-style: normal; color: var(--accent); }
.dn-reasons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.dn-reason { position: relative; padding: 2px 16px 0; }
/* The numeral sits behind its reason at 4.5% white — present enough to count
   the three at a glance, faint enough that the claim stays the loudest thing
   in the plate. */
.dn-reason-ghost {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Oswald", sans-serif;
  font-size: 74px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
  user-select: none;
}
.dn-reason-t {
  position: relative;
  margin: 0;
  font-family: "Oswald", sans-serif;
  font-size: clamp(15px, 1.15vw, 17.5px);
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--dn-txt);
}
.dn-reason-rule {
  position: relative;
  display: block;
  width: 26px;
  height: 2px;
  margin: 10px auto 9px;
  background: var(--accent);
}
.dn-reason-s {
  position: relative;
  margin: 0 auto;
  max-width: 30ch;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--dn-txt-3);
}

@media (min-width: 1101px) and (max-height: 820px) {
  .dn-reasons-inner { padding: 26px 24px 28px; }
  .dn-reasons-h { margin-bottom: 22px; }
}
@media (max-width: 720px) {
  .dn-reasons-inner { padding: 30px 18px 32px; }
  .dn-reasons-grid { grid-template-columns: 1fr; gap: 26px; }
  /* Stacked, each numeral would collide with the reason above it, so it drops
     back to sitting behind its own line. */
  .dn-reason-ghost { top: -14px; font-size: 56px; }
  .dn-reason { padding-top: 6px; }
}