/* ============================================================
   Sports.Cars — Concept #3 marketing pages
   Shared reskin for sell.html, dealers.html, resources.html,
   company.html. Loaded after concept3.css (shares its tokens,
   reset, nav, footer, .c3-frame corner marks, .c3-cars/.c3-car,
   .c3-cta, buttons). Fully static pages — no JS hooks to
   preserve beyond main.js's .reveal scroll-fade, which is kept.
   ============================================================ */

/* ---------- buttons ---------- */

/* ---------- closing CTA actions (reuses .c3-cta band) ---------- */
.c3-cta__inner--close { grid-template-columns: 1fr auto; }
.close-cta__actions { display: flex; gap: 14px; }

/* ---------- 3-up variant of the shared .c3-cars grid ---------- */
.c3-cars--3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- subhero (single-photo hero, shorter than the homepage carousel) ---------- */
.c3-subhero { position: relative; min-height: 420px; height: 46vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--c3-ink); }
.c3-subhero--tall { min-height: 520px; height: 56vh; }
.c3-subhero__media { position: absolute; inset: 0; }
.c3-subhero__media img { width: 100%; height: 100%; object-fit: cover; }
.c3-subhero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,14,21,.92) 0%, rgba(13,14,21,.6) 40%, rgba(13,14,21,.15) 75%, rgba(13,14,21,0) 100%); }
.c3-subhero__inner { position: relative; padding: 0 0 56px; }
.c3-subhero__title { max-width: 20ch; margin: 0 0 16px; font-family: var(--c3-display); font-variation-settings: "wdth" 116; font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -.025em; color: #fff; }
.c3-subhero__sub { max-width: 56ch; margin: 0; font-family: var(--c3-display); font-variation-settings: "wdth" 110; font-size: 17px; font-weight: 400; line-height: 1.55; letter-spacing: -.005em; color: rgba(233,233,237,.78); }
.c3-subhero__actions { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.c3-subhero__search { display: flex; gap: 10px; margin-top: 30px; max-width: 620px; }
.c3-subhero__search input { flex: 1; background: rgba(13,14,21,.65); backdrop-filter: blur(12px); border: 1px solid rgba(233,233,237,.22); color: #fff; font-size: 15px; padding: 14px 16px; font-family: inherit; }
.c3-subhero__search input::placeholder { color: rgba(233,233,237,.5); }

/* ---------- section head ---------- */
.c3-section-head { margin-bottom: 52px; }
.c3-section-head--center { text-align: center; }
.c3-section-head--center .c3-kicker { justify-content: center; }
.c3-section-head .c3-h2 { color: #fff; }

/* ---------- numbered feature grid (benefits / values / integration) ---------- */
.c3-feature-grid { display: grid; gap: 0; }
.c3-feature-grid--3 { grid-template-columns: repeat(3, 1fr); }
.c3-feature-grid--4 { grid-template-columns: repeat(4, 1fr); }
.c3-feature-grid--5 { grid-template-columns: repeat(5, 1fr); }
.c3-feature { padding: 24px 22px 4px 0; border-top: 1px solid var(--c3-line); }
.c3-feature-grid--3 .c3-feature:not(:nth-child(3n+1)),
.c3-feature-grid--4 .c3-feature:not(:nth-child(4n+1)),
.c3-feature-grid--5 .c3-feature:not(:nth-child(5n+1)) { padding-left: 22px; border-left: 1px solid var(--c3-line); }
.c3-feature__num { font-family: var(--c3-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--c3-red); }
.c3-feature__title { margin-top: 14px; font-family: var(--c3-display); font-variation-settings: "wdth" 112; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.c3-feature__text { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--c3-dim); }

/* ---------- process steps (sell.html) ---------- */
.c3-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.c3-step { padding: 24px 22px 4px 0; border-top: 1px solid var(--c3-line); }
.c3-steps .c3-step:not(:nth-child(4n+1)) { padding-left: 22px; border-left: 1px solid var(--c3-line); }
.c3-step__num { font-family: var(--c3-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--c3-red); }
.c3-step__title { margin-top: 14px; font-family: var(--c3-display); font-variation-settings: "wdth" 112; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: #fff; }
.c3-step__text { margin-top: 10px; font-size: 14px; line-height: 1.65; color: var(--c3-dim); }

/* ---------- split: text + image ---------- */
.c3-split2 { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.c3-split2 .c3-h2 { color: #fff; max-width: 16ch; }
.c3-split2__media { position: relative; aspect-ratio: 4 / 3; }
.c3-split2__media img { width: 100%; height: 100%; object-fit: cover; }
.c3-split2__caption { position: absolute; left: 20px; bottom: 18px; font-family: var(--c3-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #fff; z-index: 2; }
.c3-split2__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,14,21,.6), transparent 45%); }

/* ---------- pricing tiers ---------- */
.c3-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.c3-tier { position: relative; padding: 40px 32px; border: 1px solid var(--c3-line); border-left-width: 0; }
.c3-tier:first-child { border-left-width: 1px; }
.c3-tier--featured { background: var(--c3-charcoal); border-color: var(--c3-red); }
.c3-tier--featured + .c3-tier { border-left-width: 0; }
.c3-tier[data-badge]::before { content: attr(data-badge); position: absolute; top: -1px; right: -1px; font-family: var(--c3-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--c3-red); padding: 6px 12px; }
.c3-tier__name { font-family: var(--c3-display); font-variation-settings: "wdth" 114; font-size: 22px; font-weight: 600; color: #fff; }
.c3-tier__tagline { margin-top: 8px; font-size: 13.5px; color: var(--c3-dim); min-height: 34px; }
.c3-tier__price { margin-top: 24px; font-family: var(--c3-display); font-variation-settings: "wdth" 116; font-size: 36px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.c3-tier__price span { font-size: 15px; font-weight: 400; color: var(--c3-dim); }
.c3-tier__note { margin-top: 4px; font-size: 12px; color: var(--c3-faint); }
.c3-tier__list { list-style: none; margin: 26px 0 28px; padding: 22px 0 0; border-top: 1px solid var(--c3-line); display: flex; flex-direction: column; gap: 12px; }
.c3-tier__list li { position: relative; padding-left: 16px; font-size: 14px; color: var(--c3-dim); }
.c3-tier__list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 1px; background: var(--c3-red); }
.c3-tier__disclaimer { margin-top: 28px; text-align: center; font-size: 13px; color: var(--c3-faint); }

/* ---------- logo wall ---------- */
.c3-logo-wall { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px; }
.c3-logo-wall__item { font-family: var(--c3-display); font-variation-settings: "wdth" 112; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--c3-faint); }
.c3-logo-wall__item small { display: block; margin-top: 3px; font-family: var(--c3-mono); font-size: 9px; font-weight: 400; letter-spacing: .16em; }

/* ---------- stats bar ---------- */
.c3-stats { display: grid; grid-template-columns: repeat(4, 1fr); }
.c3-stat { padding: 0 28px; text-align: center; border-left: 1px solid var(--c3-line); }
.c3-stat:first-child { border-left: 0; }
.c3-stat__num { font-family: var(--c3-display); font-variation-settings: "wdth" 116; font-size: 38px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.c3-stat__label { margin-top: 8px; font-family: var(--c3-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c3-faint); }

/* ---------- leadership ---------- */
.c3-leaders { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.c3-leader__photo { aspect-ratio: 1 / 1; }
.c3-leader__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.c3-leader__name { margin-top: 18px; font-family: var(--c3-display); font-variation-settings: "wdth" 112; font-size: 17px; font-weight: 600; color: #fff; }
.c3-leader__role { margin-top: 3px; font-family: var(--c3-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c3-faint); }
.c3-leader__bio { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--c3-dim); }

/* ---------- topics (resources) ---------- */
.c3-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.c3-topic { display: block; padding: 26px 24px; border: 1px solid var(--c3-line); border-left-width: 0; border-top-width: 0; color: var(--c3-text); transition: background .2s ease; }
.c3-topic:hover { background: rgba(233,233,237,.03); color: #fff; }
.c3-topics .c3-topic:nth-child(3n+1) { border-left-width: 1px; }
.c3-topics .c3-topic:nth-child(-n+3) { border-top-width: 1px; }
.c3-topic__num { font-family: var(--c3-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--c3-red); }
.c3-topic__title { margin-top: 14px; font-family: var(--c3-display); font-variation-settings: "wdth" 112; font-size: 19px; font-weight: 600; color: #fff; }
.c3-topic__text { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--c3-dim); }

/* ---------- featured articles (reuses .c3-posts/.c3-post from concept3.css) ---------- */
.c3-posts--feature { grid-template-columns: repeat(2, 1fr); gap: 40px; }

/* ---------- two-column layout (guides + market snapshot) ---------- */
.c3-res-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; }
.c3-res-cols .c3-section__bar { margin-bottom: 20px; }
.c3-res-cols .c3-h3 { font-size: 24px; color: #fff; }

.c3-guide-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--c3-line); color: var(--c3-text); }
.c3-guide-row:last-child { border-bottom: 1px solid var(--c3-line); }
.c3-guide-row:hover { color: #fff; }
.c3-guide-row:hover .c3-guide-row__title { color: #fff; }
.c3-guide-row__thumb { flex-shrink: 0; width: 68px; aspect-ratio: 1 / 1; overflow: hidden; background: var(--c3-charcoal); }
.c3-guide-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.c3-guide-row__body { flex: 1; min-width: 0; }
.c3-guide-row__title { font-size: 14.5px; font-weight: 600; color: var(--c3-text); }
.c3-guide-row__meta { margin-top: 4px; font-size: 12.5px; color: var(--c3-faint); }
.c3-guide-row__arrow { flex-shrink: 0; font-family: var(--c3-mono); font-size: 16px; color: var(--c3-faint); }

.c3-market-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--c3-line); }
.c3-market-row:last-child { border-bottom: 1px solid var(--c3-line); }
.c3-market-row__car { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.c3-market-row__thumb { flex-shrink: 0; width: 48px; aspect-ratio: 1 / 1; overflow: hidden; background: var(--c3-charcoal); }
.c3-market-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.c3-market-row__name { font-size: 14px; font-weight: 600; color: #fff; }
.c3-market-row__yr { margin-top: 2px; font-size: 12px; color: var(--c3-faint); }
.c3-market-row__price { font-family: var(--c3-display); font-variation-settings: "wdth" 114; font-size: 15px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.c3-market-row__trend { font-family: var(--c3-mono); font-size: 11px; min-width: 62px; text-align: right; }
.c3-market-row__trend--up { color: #4fae74; }
.c3-market-row__trend--down { color: #c76a5a; }
.c3-market-foot { margin-top: 16px; font-size: 13px; color: var(--c3-faint); }
.c3-market-foot a { color: var(--c3-text); border-bottom: 1px solid var(--c3-line); padding-bottom: 2px; }
.c3-market-foot a:hover { color: #fff; border-color: var(--c3-red); }

/* ---------- prose links used on this page set ---------- */
.c3-link-arrow { font-family: var(--c3-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c3-text); border-bottom: 1px solid var(--c3-line); padding-bottom: 4px; white-space: nowrap; }

/* ============================================================
   RESPONSIVE — company / dealers / sell / resources
   Reflows this page set's multi-column grids for tablet + phone.
   ============================================================ */
@media (max-width: 900px) {
  .c3-cta__inner--close { grid-template-columns: 1fr; gap: 28px; }
  .c3-cars--3 { grid-template-columns: repeat(2, 1fr); }
  .c3-subhero { min-height: 360px; }
  .c3-subhero__search { flex-direction: column; max-width: 480px; }
  .c3-feature-grid--3, .c3-feature-grid--4, .c3-feature-grid--5 { grid-template-columns: repeat(2, 1fr); }
  .c3-steps { grid-template-columns: repeat(2, 1fr); }
  .c3-split2 { grid-template-columns: 1fr; gap: 40px; }
  .c3-tiers { grid-template-columns: 1fr; }
  .c3-stats { grid-template-columns: repeat(2, 1fr); }
  .c3-leaders { grid-template-columns: repeat(2, 1fr); }
  .c3-topics { grid-template-columns: 1fr; }
  .c3-posts--feature { grid-template-columns: 1fr; }
  .c3-res-cols { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 600px) {
  .c3-cars--3 { grid-template-columns: 1fr; }
  .c3-feature-grid--3, .c3-feature-grid--4, .c3-feature-grid--5 { grid-template-columns: 1fr; }
  .c3-steps { grid-template-columns: 1fr; }
  .c3-stats { grid-template-columns: 1fr; }
  .c3-leaders { grid-template-columns: repeat(2, 1fr); }
}
.c3-link-arrow:hover { color: #fff; border-color: var(--c3-red); }

/* ============================================================
   Article (long-form / Journal post) — concept3 language
   ============================================================ */
.c3-article__hero { position: relative; min-height: 460px; height: 52vh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--c3-ink); }
.c3-article__hero-media, .c3-article__hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.c3-article__hero-media img { object-fit: cover; mix-blend-mode: lighten; }
.c3-article__hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,14,21,.92) 0%, rgba(13,14,21,.55) 45%, rgba(13,14,21,.15) 80%); }
.c3-article__hero-inner { position: relative; padding-bottom: 48px; }
.c3-article__title { max-width: 22ch; margin: 16px 0 20px; font-family: var(--c3-display); font-variation-settings: "wdth" 114; font-size: 52px; font-weight: 600; line-height: 1.02; letter-spacing: -.025em; color: #fff; text-wrap: pretty; }
.c3-article__meta { display: flex; align-items: center; gap: 12px; font-family: var(--c3-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(233,233,237,.72); }
.c3-article__layout { display: grid; grid-template-columns: 1fr 300px; gap: 72px; align-items: start; }
.c3-article__body h2 { margin: 40px 0 16px; font-family: var(--c3-display); font-variation-settings: "wdth" 112; font-size: 28px; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.c3-article__body p { font-size: 16px; line-height: 1.75; color: rgba(233,233,237,.78); margin-bottom: 18px; }
.c3-article__body sup a { color: var(--c3-lift); text-decoration: none; font-size: .7em; }
.c3-article__body ul { margin: 0 0 18px; padding-left: 0; list-style: none; }
.c3-article__body ul li { position: relative; padding-left: 18px; margin-bottom: 10px; font-size: 15.5px; line-height: 1.7; color: rgba(233,233,237,.78); }
.c3-article__body ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 1px; background: var(--c3-red); }
.c3-pullquote { margin: 32px 0; padding: 24px 0 24px 28px; border-left: 2px solid var(--c3-red); font-family: var(--c3-display); font-variation-settings: "wdth" 110; font-size: 22px; line-height: 1.4; color: #fff; }
.c3-citations { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--c3-line); }
.c3-citations h3 { font-family: var(--c3-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--c3-faint); margin-bottom: 16px; }
.c3-citations ol { margin: 0; padding-left: 20px; }
.c3-citations li { font-size: 13.5px; line-height: 1.6; color: var(--c3-dim); margin-bottom: 10px; }
.c3-citations .c3-verified { margin-left: 8px; font-family: var(--c3-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--c3-lift); border: 1px solid var(--c3-line); padding: 2px 6px; }
.c3-article__side { position: sticky; top: calc(var(--c3-navh) + 24px); display: flex; flex-direction: column; gap: 28px; }
.c3-toc h3, .c3-factbox h3 { font-family: var(--c3-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--c3-faint); margin-bottom: 14px; }
.c3-toc a { display: block; padding: 8px 0; font-size: 14px; color: var(--c3-dim); border-bottom: 1px solid var(--c3-line); }
.c3-toc a:hover { color: #fff; }
.c3-factbox { background: var(--c3-charcoal); border: 1px solid var(--c3-line); padding: 24px; }
.c3-factbox__row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--c3-line); font-size: 13.5px; }
.c3-factbox__row:last-child { border-bottom: 0; }
.c3-factbox__row span:first-child { color: var(--c3-faint); font-family: var(--c3-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.c3-factbox__row span:last-child { color: var(--c3-text); }
.c3-factbox__verified { margin-top: 14px; font-family: var(--c3-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--c3-faint); }

@media (max-width: 900px) {
  .c3-article__layout { grid-template-columns: 1fr; gap: 40px; }
  .c3-article__side { position: static; }
  .c3-article__title { font-size: 38px; }
}

/* ---------- dealer signup form ---------- */
.sc-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sc-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sc-field { display: flex; flex-direction: column; gap: 7px; }
.sc-field--full { margin-top: 18px; }
.sc-field span { font-family: var(--c3-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--c3-dim); }
.sc-field input, .sc-field textarea { background: var(--c3-charcoal); border: 1px solid var(--c3-line); color: var(--c3-text); font: inherit; font-size: 14.5px; padding: 12px 14px; border-radius: var(--radius-btn, 4px); }
.sc-field input:focus, .sc-field textarea:focus { outline: none; border-color: var(--c3-red); }
.sc-form .btn { margin-top: 24px; }
@media (max-width: 600px) { .sc-form__grid { grid-template-columns: 1fr; } }

/* ---------- HTML sitemap ---------- */
.sc-sitemap { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; }
.sc-sitemap__list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sc-sitemap__list a { font-size: 14px; color: var(--c3-dim); }
.sc-sitemap__list a:hover { color: #fff; }
.sc-sitemap__makes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 24px; margin-top: 12px; }
.sc-sitemap__makename { display: block; font-family: var(--c3-display); font-variation-settings: "wdth" 112; font-size: 17px; font-weight: 600; color: #fff; border-bottom: 1px solid var(--c3-line); padding-bottom: 8px; }
@media (max-width: 900px) { .sc-sitemap { grid-template-columns: 1fr; gap: 40px; } .sc-sitemap__makes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sc-sitemap__makes { grid-template-columns: 1fr; } }