/* ==========================================================================
   AAREAS Dealer Portal — App overrides (design-system adoption)
   --------------------------------------------------------------------------
   Loaded LAST (after the legacy inline <style> block) so these rules win.

   Everything here is scoped under `.dp-new` — a class added to a `.page`
   once it has been migrated onto the AAREAS design system. It re-points the
   legacy component classes (cards, notices, badges, inputs, buttons, tables)
   onto the design-system tokens from aareas-portal-tokens.css, so a migrated
   page gets correct light/dark, the new type scale, and the new look WITHOUT
   restyling any page that does not carry the `.dp-new` class.

   The one rule: never hard-code a color — always a --token. (The only literal
   is #fff on primary-button text, matching aareas-portal-components.css.)

   As pages are migrated, add `dp-new` to their `.page` wrapper. When every
   page is migrated, the legacy inline block + the --l-* shim can be deleted
   and these overrides folded back into the base component classes.
   ========================================================================== */

.dp-new { font-family: var(--font-body); color: var(--ink); }

/* ---- App-local tokens ---------------------------------------------------
   Colours drawn over photos/video (play icon, lightbox letterbox) — the same
   in light and dark, since they sit on media, not on the page surface. */
:root { --on-media: #fff; --media-bg: #000; }

/* ---- Page header -------------------------------------------------------- */
.dp-new .page-header { margin-bottom: var(--sp-5); }
.dp-new .page-title,
.dp-new .pagehead h2 { font-family: var(--font-display); font-size: var(--fs-display-lg); font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.dp-new .page-sub,
.dp-new .pagehead p { color: var(--ink-2); font-size: var(--fs-body); margin-top: var(--sp-1); }

/* ---- Cards -------------------------------------------------------------- */
.dp-new .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}
/* Flush variant for cards that wrap a table (head + .table-wrap, no padding) */
.dp-new .card.card-flush { padding: 0; overflow: hidden; }
.dp-new .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.dp-new .card-title { font-family: var(--font-display); font-size: var(--fs-display-md); font-weight: 700; color: var(--ink); }
.dp-new .card-sub { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }

/* ---- Tables ------------------------------------------------------------- */
/* Default: table inside a PADDED card — cells align to the card's inner edge
   (left cell flush-left, spacing on the right + vertically). */
.dp-new table { font-size: var(--fs-body); }
.dp-new thead th { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; padding: 0 var(--sp-3) 10px 0; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dp-new tbody td { padding: 12px var(--sp-3) 12px 0; border-bottom: 1px solid var(--border); color: var(--ink); vertical-align: middle; }
.dp-new thead th:first-child, .dp-new tbody td:first-child { padding-left: 0; }
.dp-new tbody tr:last-child td { border-bottom: 0; }
.dp-new tbody tr:hover td { background: var(--surface-2); }
/* Flush variant: table spans a .card-flush edge-to-edge — cells get inset. */
.dp-new .card-flush thead th, .dp-new .card-flush tbody td { padding-left: var(--sp-5); padding-right: var(--sp-5); }

/* ---- Buttons ------------------------------------------------------------ */
.dp-new .btn { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; border-radius: var(--radius-sm); padding: 9px 15px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); gap: var(--sp-2); }
.dp-new .btn i { font-size: 15px; }
.dp-new .btn:hover { border-color: var(--border-strong); color: var(--ink); background: var(--surface); }
.dp-new .btn-sm { padding: 6px 11px; font-size: var(--fs-xs); border-radius: 8px; }
.dp-new .btn-primary { background: var(--brand); color: var(--on-brand); border-color: transparent; box-shadow: var(--shadow-sm); }
.dp-new .btn-primary:hover { background: var(--brand-strong); border-color: transparent; }

/* ---- Notices → info-banner / callout ------------------------------------ */
.dp-new .notice { border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--ink); border: 1px solid transparent; }
.dp-new .notice i { color: var(--brand); }
.dp-new .notice-info { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 22%, transparent); }
.dp-new .notice-info i { color: var(--brand); }
.dp-new .notice-success { background: var(--success-tint); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.dp-new .notice-success i { color: var(--success); }
.dp-new .notice-warn { background: var(--warn-tint); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.dp-new .notice-warn i { color: var(--warn); }

/* ---- Badges → pills ----------------------------------------------------- */
.dp-new .badge { font-family: var(--font-body); border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; padding: 3px 10px; line-height: 1.6; color: var(--ink-2); background: var(--surface-2); }
.dp-new .badge-active { color: var(--success); background: var(--success-tint); }
.dp-new .badge-inactive { color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--border); }

/* ---- Embed code boxes / rows -------------------------------------------- */
.dp-new .embed-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink-2); font-family: var(--font-mono); }
.dp-new .embed-model { border-top: 1px solid var(--border); }
.dp-new .embed-model-head strong { font-family: var(--font-body); color: var(--ink); font-weight: 600; }

/* ---- Form rows (markup-item pattern) + inputs --------------------------- */
.dp-new .markup-item { border-bottom: 1px solid var(--border); }
.dp-new .markup-label { color: var(--ink); font-size: var(--fs-sm); }
.dp-new .markup-label-sub { color: var(--ink-3); font-size: var(--fs-xs); }
.dp-new .markup-input,
.dp-new .portal-form-input,
.dp-new .portal-form-select {
  font-family: var(--font-body); color: var(--ink); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.dp-new .markup-input:focus-visible,
.dp-new .portal-form-input:focus-visible,
.dp-new .portal-form-select:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
/* Unified dropdown chevron: every .dp-new select AND the beds/baths buttons
   (they share .portal-form-select) render one identical arrow. Replaces the
   native <select> arrow and the old ::after triangle. Colour = --ink-3, baked
   per theme because a data-URI can't read a CSS var. */
.dp-new .portal-form-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23606D7D' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 12px;
  padding-right: 30px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dp-new .portal-form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23818FA0' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] .dp-new .portal-form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23818FA0' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.dp-new .markup-unit { color: var(--ink-2); }
.dp-new .portal-form-label { font-family: var(--font-body); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 500; }

/* ---- Form action row ---------------------------------------------------- */
.dp-new .form-actions { border-top: 1px solid var(--border); }

/* ---- Pricing page: model rows, price inputs, status pill ---------------- */
.dp-new .badge-custom { color: var(--brand); background: var(--brand-tint); }
.dp-new .pricing-thumb, .dp-new .pricing-thumb-img { border: 1px solid var(--border); }
.dp-new .pricing-thumb { background: var(--surface-2); }
.dp-new .pricing-price-wrap .cur { color: var(--ink-3); }
.dp-new .pricing-price-input {
  font-family: var(--font-mono); color: var(--ink); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.dp-new .pricing-price-input:focus-visible { border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 1px; }
.dp-new .pricing-price-input.custom { border-color: var(--brand); background: var(--brand-tint); }

/* ==========================================================================
   Browse page — filter toolbar, model cards, compare bar/modal, region panel
   Only color/theme-bearing properties are re-pointed; layout stays from the
   legacy rules. The D3 region-map SVG paints with hard-coded hex in JS, so the
   map graphic itself is not dark-tuned (decorative) — tracked as a follow-up.
   ========================================================================== */

/* ---- Filter toolbar ----------------------------------------------------- */
.dp-new .beds-dd-btn::after { color: var(--ink-3); }
.dp-new .beds-dd-btn.has-sel { border-color: var(--brand); color: var(--brand); }
.dp-new .beds-dd-panel { background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.dp-new .beds-dd-panel label { color: var(--ink); }
.dp-new .beds-dd-panel label:hover { background: var(--surface-2); }
.dp-new .beds-dd-panel input[type="checkbox"] { accent-color: var(--brand); }
.dp-new .sort-ctl .sort-lbl { color: var(--ink-2); }
.dp-new .browse-count { color: var(--ink-3); }
.dp-new .region-toggle-btn { background: var(--surface); border-color: var(--border); color: var(--ink-2); }
.dp-new .region-toggle-btn:hover { background: var(--surface-2); color: var(--ink); }
.dp-new .region-toggle-btn.active { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

/* ---- Model grid / card -------------------------------------------------- */
.dp-new .model-card { background: var(--surface); border-color: var(--border); }
.dp-new .model-card.subscribed { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.dp-new .model-img { background: var(--surface-2); }
.dp-new .model-sub-tag { background: var(--success); color: #fff; }
.dp-new .model-fp-section { background: var(--surface-2); border-top-color: var(--border); }
.dp-new .model-fp-lbl { color: var(--ink-3); }
.dp-new .model-name { color: var(--ink); font-family: var(--font-display); }
.dp-new .model-specs { color: var(--ink-2); }
.dp-new .model-price { color: var(--ink); font-family: var(--font-mono); }
.dp-new .model-sub-btn { background: var(--brand); color: var(--on-brand); border-radius: var(--radius-sm); }
.dp-new .model-sub-btn:hover { background: var(--brand-strong); }
.dp-new .model-sub-btn.subbed { background: var(--success-tint); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); }
.dp-new .model-sub-btn.subbed:hover { background: color-mix(in srgb, var(--success) 16%, var(--surface)); }
/* Manufacturer tags — design-system tints (readable on both themes via color-mix) */
.dp-new .model-mfr-tag { color: var(--ink); }
.dp-new .tag-clayton  { color: #8a5a24; background: color-mix(in srgb, #b9803b 22%, var(--surface)); }
.dp-new .tag-champion { color: #1f6cc4; background: color-mix(in srgb, #2f7fd6 22%, var(--surface)); }
.dp-new .tag-cavco    { color: #2f88a8; background: color-mix(in srgb, #38a0c4 22%, var(--surface)); }
.dp-new .tag-schult   { color: #5a6672; background: color-mix(in srgb, #6b7787 24%, var(--surface)); }
.dp-new .tag-jessup   { color: #4a8a3c; background: color-mix(in srgb, #5aa347 22%, var(--surface)); }

/* browse-picks */
/* Picks counter row, above the filter toolbar. Fixed min-height: no layout shift while loading. */
.dp-new .picks-counter { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; min-height: 44px; margin-bottom: var(--sp-3); }
.dp-new .picks-counter-text { color: var(--ink); font-weight: 600; font-size: var(--fs-sm); }
/* "Starter plan": larger than the count; a link back to the plans. Underlined, so not color alone. */
.dp-new .picks-plan-link { font-family: var(--font-display); font-size: var(--fs-display-md); font-weight: 700; color: var(--brand-deep); text-decoration: underline; text-underline-offset: 3px; }
.dp-new .picks-plan-link:hover { color: var(--brand); }
.dp-new .picks-plan-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dp-new .picks-limit-note { color: var(--ink-2); font-size: var(--fs-sm); }
.dp-new .picks-limit-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* My Plans toggle. Pressed: brand-deep on brand-tint (10.2:1 light / 9.0:1 dark) + check icon, never color alone. */
.dp-new .my-plans-btn[aria-pressed="true"] { background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand); }
.dp-new .my-plans-btn[aria-pressed="true"]:hover { background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand); }
.dp-new .my-plans-btn[aria-pressed="false"] i { display: none; }
.dp-new .my-plans-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dp-new #my-plans-status .notice { margin-bottom: var(--sp-4); }
/* Ready build badge (card body, next to the name; never on the image). Reuses .pill .dot.
   Text is --ink on --success-tint (14.5:1 light / 13.6:1 dark). --success on --success-tint
   is only 3.04:1 in light, so the state color lives on the dot and border, not the text. */
.dp-new .model-name-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: 3px; }
.dp-new .model-name-row .model-name { margin-bottom: 0; }
.dp-new .model-ready-tag { color: var(--ink); background: var(--success-tint); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); padding: 1px 8px; line-height: 1.5; }
.dp-new .model-ready-tag.dot::before { background: var(--success); }
@media (max-width: 640px) {
  .dp-new .my-plans-btn, .dp-new .picks-limit-btn { min-height: 44px; }
  .dp-new .picks-plan-link { display: inline-flex; align-items: center; min-height: 44px; }
}
/* /browse-picks */

/* ---- "Request a plan" empty-state card ---------------------------------- */
.dp-new .model-card-request { border: 2px dashed color-mix(in srgb, var(--brand) 55%, var(--border)); }
.dp-new .model-card-request .model-img,
.dp-new .model-card-request .model-fp-section { color: var(--ink-3); background: var(--surface); }
.dp-new .model-card-request .rq-title { color: var(--ink); font-family: var(--font-display); }
.dp-new .model-card-request .rq-sub { color: var(--ink-2); }

/* ---- Compare checkbox / bar / modal ------------------------------------- */
.dp-new .model-compare { background: var(--surface-2); border-color: var(--border); color: var(--ink-2); }
.dp-new .compare-bar { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-md); }
.dp-new .compare-bar-hint { color: var(--ink-2); }
.dp-new .compare-bar .btn-primary { padding: 9px 15px; border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 600; box-shadow: var(--shadow-sm); }
.dp-new .compare-modal-inner { background: var(--surface); box-shadow: var(--shadow-md); }
.dp-new .compare-modal-head { background: var(--surface); border-bottom-color: var(--border); }
.dp-new .compare-modal-title { color: var(--ink); font-family: var(--font-display); }
.dp-new .compare-modal-close { color: var(--ink-2); }
.dp-new .compare-modal-close:hover { background: var(--surface-2); color: var(--ink); }
.dp-new .cmp-cell { border-bottom-color: var(--border); color: var(--ink); }
.dp-new .cmp-rowlabel { color: var(--ink-2); background: var(--surface-2); border-right-color: var(--border); }
.dp-new .cmp-band { background: var(--surface-2); }
.dp-new .cmp-name { color: var(--ink); }
.dp-new .cmp-img { background: var(--surface-2); }
.dp-new .cmp-low-cell { background: var(--success-tint); }
.dp-new .cmp-low { color: var(--success); background: var(--surface); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); }
.dp-new .cmp-remove { color: var(--ink-2); }
.dp-new .cmp-remove:hover { background: var(--surface-2); color: var(--ink); }
.dp-new .cmp-link { background: var(--surface); border-color: var(--border); color: var(--brand); }
.dp-new .cmp-link:hover { background: var(--brand-tint); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }

/* ---- Region / manufacturing-map panel ----------------------------------- */
.dp-new .region-panel { background: var(--surface); border-color: var(--border); }
.dp-new .region-panel-title { color: var(--ink); }
.dp-new .region-panel-hint { color: var(--ink-2); }
.dp-new .region-map-wrap { background: var(--surface); border-color: var(--border); }
.dp-new .map-zoom-btn,
.dp-new .map-back-btn { background: var(--surface); border-color: var(--border-strong); color: var(--ink-2); box-shadow: var(--shadow-sm); }
.dp-new .map-zoom-btn:hover,
.dp-new .map-back-btn:hover { background: var(--surface-2); color: var(--ink); }
.dp-new .plant-panel-label { color: var(--ink-2); }
.dp-new .plant-chip { background: var(--surface); border-color: var(--border); color: var(--ink); }
.dp-new .plant-chip:hover { background: var(--surface-2); }
.dp-new .plant-chip i { color: var(--ink-3); }
.dp-new .plant-chip.selected { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-deep); }
.dp-new .plant-chip.selected i { color: var(--brand); }
.dp-new .plant-empty { color: var(--ink-2); }
.dp-new .region-active-chip { border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); background: var(--brand-tint); color: var(--brand-deep); }
.dp-new .region-active-chip button { color: var(--brand); }

/* ---- Billing page: stat tiles ------------------------------------------- */
/* Reflow the fixed 3-up row so tiles wrap instead of cramping on mobile
   (desktop keeps 3 across; scoped to migrated pages only). */
.dp-new .stats-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dp-new .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.dp-new .stat-label { color: var(--ink-2); }
.dp-new .stat-label i { color: var(--brand); }
.dp-new .stat-val { color: var(--ink); font-family: var(--font-display); }
.dp-new .stat-detail { color: var(--ink-3); }

/* ==========================================================================
   Public marketing landing page (#landing) — full design-system reskin with
   dark-mode support. Scoped under #landing (id) so it wins over the legacy
   inline rules and touches nothing else. Every color resolves through a
   theme-aware token, so the page follows the visitor's OS / data-theme.
   ========================================================================== */
#landing { background: var(--ground); color: var(--ink); font-family: var(--font-body); }

/* Nav */
#landing .nav { background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom: 1px solid var(--border); }
#landing .nav-logo { color: var(--brand-deep); font-family: var(--font-display); }
#landing .nav-logo span { color: var(--ink-2); }
#landing .nav-link { color: var(--ink-2); }
#landing .nav-link:hover { color: var(--ink); }
#landing .nav-signin { background: var(--surface); color: var(--ink); border-color: var(--border-strong); border-radius: var(--radius-sm); }
#landing .nav-signin:hover { background: var(--surface-2); }
#landing .nav-cta { background: var(--brand); color: var(--on-brand); border-radius: var(--radius-sm); }
#landing .nav-cta:hover { background: var(--brand-strong); }

/* Hero */
#landing .hero { background: var(--surface); border-bottom: 1px solid var(--border); }
#landing .hero-eyebrow { color: var(--brand); background: var(--brand-tint); font-family: var(--font-mono); letter-spacing: .12em; }
#landing .hero h1 { color: var(--ink); font-family: var(--font-display); }
#landing .hero h1 em { color: var(--brand); }
#landing .hero-sub { color: var(--ink-2); }
#landing .hero-note { color: var(--ink-3); }
#landing .btn-hero { background: var(--brand); color: var(--on-brand); border-radius: var(--radius); }
#landing .btn-hero:hover { background: var(--brand-strong); }
#landing .btn-hero-outline { color: var(--ink); border-color: var(--border-strong); border-radius: var(--radius); background: var(--surface); }
#landing .btn-hero-outline:hover { background: var(--surface-2); }

/* Manufacturer bar */
#landing .mfr-bar { background: var(--surface-2); border-bottom: 1px solid var(--border); }
#landing .mfr-label { color: var(--ink-3); font-family: var(--font-mono); letter-spacing: .12em; }
#landing .mfr-name { color: var(--ink-2); }

/* Sections */
#landing .section-eyebrow { color: var(--brand); font-family: var(--font-mono); letter-spacing: .12em; }
#landing .section h2 { color: var(--ink); font-family: var(--font-display); }
#landing .section-sub { color: var(--ink-2); }

/* Feature cards */
#landing .feature-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
#landing .feature-icon { background: var(--brand-tint); border-radius: var(--radius); }
#landing .feature-icon i { color: var(--brand); }
#landing .feature-card h3 { color: var(--ink); font-family: var(--font-display); }
#landing .feature-card p { color: var(--ink-2); }

/* How it works / steps */
#landing .steps::before { background: var(--border); }
#landing .step-num { background: var(--brand); color: var(--on-brand); font-family: var(--font-display); }
#landing .step h3 { color: var(--ink); font-family: var(--font-display); }
#landing .step p { color: var(--ink-2); }

/* Pricing */
#landing .pricing-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
#landing .pricing-card.featured { border: 2px solid var(--brand); }
#landing .pricing-badge { background: var(--brand); color: var(--on-brand); }
#landing .pricing-name { color: var(--ink); font-family: var(--font-display); }
#landing .pricing-desc { color: var(--ink-2); }
#landing .pricing-amount { color: var(--ink); font-family: var(--font-display); }
#landing .pricing-per { color: var(--ink-2); }
#landing .pricing-note { color: var(--ink-3); }
#landing .pricing-list li { color: var(--ink-2); }
#landing .pricing-list li i { color: var(--success); }
#landing .pricing-list li.muted, #landing .pricing-list li.muted i { color: var(--ink-3); }
#landing .pricing-btn { background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: var(--radius); }
#landing .pricing-btn:hover { background: var(--surface); border-color: var(--border-strong); }
#landing .pricing-btn.primary { background: var(--brand); color: var(--on-brand); border-color: transparent; }
#landing .pricing-btn.primary:hover { background: var(--brand-strong); }

/* Testimonials */
#landing .testimonial { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
#landing .testimonial-stars { color: var(--warn); }
#landing .testimonial-text { color: var(--ink-2); }
#landing .testimonial-author { color: var(--ink); }
#landing .testimonial-role { color: var(--ink-3); }

/* CTA band — brand-filled; white text/button read on brand in both themes */
#landing .cta-band { background: var(--brand); }
#landing .btn-cta-white { background: #fff; color: var(--brand); border-radius: var(--radius); }
#landing .btn-cta-white:hover { background: color-mix(in srgb, #fff 90%, var(--brand)); }

/* Footer */
#landing .footer { background: var(--surface); border-top: 1px solid var(--border); }
#landing .footer-logo { color: var(--brand-deep); font-family: var(--font-display); }
#landing .footer-note { color: var(--ink-3); }

/* ==========================================================================
   Dealer sub-pages: Request-a-plan, Plans Requested, Model detail
   ========================================================================== */

/* ---- Request-a-plan form ------------------------------------------------ */
.dp-new .form-section { color: var(--ink-2); border-bottom: 1px solid var(--border); }
.dp-new .form-hint { color: var(--ink-3); }

/* ---- Plans Requested: request cards + progress stepper ------------------ */
.dp-new .pr-card-meta { color: var(--ink-2); }
.dp-new .stepper-step { color: var(--ink-2); }
.dp-new .stepper-step:not(:last-child)::after { background: var(--border); }
.dp-new .stepper-step.done:not(:last-child)::after { background: var(--success); }
.dp-new .stepper-dot { background: var(--surface-2); border-color: var(--border); color: var(--ink-2); }
.dp-new .stepper-step.done .stepper-dot { background: var(--success); border-color: var(--success); color: #fff; }
.dp-new .stepper-step.current .stepper-dot { border-color: var(--success); box-shadow: 0 0 0 3px var(--success-tint); }
.dp-new .stepper-step.current .stepper-label { color: var(--ink); }
.dp-new .badge-denied { color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, var(--surface)); }
.dp-new .badge-published { color: var(--success); background: var(--success-tint); }

/* ---- Model detail ------------------------------------------------------- */
.dp-new .detail-back { color: var(--ink-2); }
.dp-new .detail-back:hover { color: var(--ink); }
.dp-new .detail-img-wrap { background: var(--surface-2); border-color: var(--border); }
.dp-new .detail-addl-thumb { border-color: var(--border); background: var(--surface-2); }
.dp-new .detail-addl-thumb:focus-visible { outline: 2px solid var(--brand); }
.dp-new .detail-addl-nav { border-color: var(--border); background: var(--surface); color: var(--ink); }
.dp-new .detail-addl-nav:hover { background: var(--surface-2); }
.dp-new .detail-addl-nav:focus-visible { outline: 2px solid var(--brand); }
.dp-new .detail-info-card { background: var(--surface); border-color: var(--border); }
.dp-new .detail-name { color: var(--ink); font-family: var(--font-display); }
.dp-new .detail-price { color: var(--brand); font-family: var(--font-mono); }
.dp-new .detail-spec-val { color: var(--ink); }
.dp-new .detail-spec-lbl { color: var(--ink-3); }
.dp-new .detail-desc { color: var(--ink-2); }
.dp-new .detail-vdc-btn { background: var(--brand); color: var(--on-brand); border-radius: var(--radius); }
.dp-new .detail-vdc-btn:hover { background: var(--brand-strong); }
.dp-new .detail-fp-card { background: var(--surface); border-color: var(--border); }
.dp-new .detail-fp-title, .dp-new .detail-fp-hint { color: var(--ink-3); }
.dp-new .detail-sub-btn { border-color: var(--border); background: var(--surface-2); color: var(--ink); }
.dp-new .detail-sub-btn:hover { background: var(--surface); border-color: var(--border-strong); }
.dp-new .detail-sub-btn.subbed { background: var(--success-tint); color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.dp-new .detail-sub-btn.subbed:hover { background: color-mix(in srgb, var(--success) 16%, var(--surface)); }
/* Manufacturer badge tints (detail page uses .badge-* set) */
.dp-new .detail-mfr-badge.badge-clayton  { color: #8a5a24; background: color-mix(in srgb, #b9803b 22%, var(--surface)); }
.dp-new .detail-mfr-badge.badge-champion { color: #1f6cc4; background: color-mix(in srgb, #2f7fd6 22%, var(--surface)); }
.dp-new .detail-mfr-badge.badge-cavco    { color: #2f88a8; background: color-mix(in srgb, #38a0c4 22%, var(--surface)); }
.dp-new .detail-mfr-badge.badge-jessup   { color: #4a8a3c; background: color-mix(in srgb, #5aa347 22%, var(--surface)); }
.dp-new .detail-mfr-badge.badge-schult   { color: #5a6672; background: color-mix(in srgb, #6b7787 24%, var(--surface)); }

/* ==========================================================================
   Admin console — uncovered classes shared across the admin pages.
   (Most admin content reuses classes already covered above; these are the
   remaining modal-form, sortable-header, check-table and email-template bits.)
   ========================================================================== */

/* Modal-style form fields (distinct from .portal-form-*) */
.dp-new .form-label { color: var(--ink-2); }
.dp-new .form-input {
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.dp-new .form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }

/* Model-select checkbox table (Add dealer) */
.dp-new .check-table input[type="checkbox"] { accent-color: var(--brand); }

/* Sortable table headers */
.dp-new thead th.th-sort:hover { color: var(--ink); }
.dp-new thead th.th-sort:focus-visible { outline: 2px solid var(--brand); }
.dp-new thead th.th-sort[aria-sort="ascending"]::after,
.dp-new thead th.th-sort[aria-sort="descending"]::after { color: var(--brand); }

/* Email templates page */
.dp-new .et-frame { border-color: var(--border); }           /* iframe canvas stays white (email content) */
.dp-new .et-card-selected { outline: 2px solid var(--brand); }
.dp-new .et-group-title { color: var(--ink-2); border-bottom-color: var(--border); }

/* ==========================================================================
   Theme toggle button (light/dark) — lives in the portal top bar and the
   public landing nav. Unscoped (both bars); themes via tokens.
   ========================================================================== */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-2); cursor: pointer;
  font-family: var(--font-body);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--ink); border-color: var(--border-strong); }
.theme-toggle i { font-size: 16px; line-height: 1; }

/* ==========================================================================
   Modals & dialogs — login/register, alert, unsubscribe, media manager.
   These overlays live outside .page so they never got .dp-new; re-point them
   onto themed tokens here (loaded last) so they follow light/dark too.
   Dark scrims (rgba black) and on-brand white text are intentionally kept.
   ========================================================================== */

/* Panels (set themed text so bare <h3>/<p> inside inherit ink, not legacy dark) */
.login-modal, .alert-modal { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-md); color: var(--ink); }
.unsub-dialog, .media-dialog { background: var(--surface); border-color: var(--border); color: var(--ink); }
/* Muted subtitle used in modal panels (and elsewhere) */
.section-sub { color: var(--ink-2); }

/* Headings / body text */
.alert-modal-title, .modal-title, .unsub-dialog-title, .media-dialog-title { color: var(--ink); font-family: var(--font-display); }
.alert-modal-msg, .modal-sub, .unsub-dialog-body, .media-dialog-sub, .modal-switch { color: var(--ink-2); }
.alert-modal-icon { color: var(--warn); }

/* Tabs */
.modal-tabs { border-color: var(--border-strong); }
.modal-tab { color: var(--ink-2); background: var(--surface-2); }
.modal-tab.active { background: var(--brand); color: var(--on-brand); }
.modal-tab:not(.active):hover { background: var(--border); }

/* Form fields (modal variant) */
.form-label { color: var(--ink-2); }
.form-input { color: var(--ink); background: var(--surface); border-color: var(--border-strong); }
.form-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }

/* Buttons + links */
.modal-btn { background: var(--brand); color: var(--on-brand); }
.modal-btn:hover { background: var(--brand-strong); }
.modal-switch a { color: var(--brand); }
.demo-btn { background: var(--surface-2); color: var(--ink-2); border-color: var(--border-strong); }
.demo-btn:hover { background: var(--border); }
.demo-btn strong { color: var(--ink); }
.modal-close { color: var(--ink-3); }
.modal-close:hover { color: var(--ink); }

/* Dividers */
.modal-divider span { color: var(--ink-3); }
.modal-divider::before, .modal-divider::after { background: var(--border); }

/* Unsubscribe dialog */
.unsub-dialog-icon { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.unsub-btn-cancel { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.unsub-btn-cancel:hover { background: var(--surface-2); }
.unsub-btn-confirm { background: var(--danger); color: #fff; }
.unsub-btn-confirm:hover { background: color-mix(in srgb, var(--danger) 85%, #000); }

/* Media manager rows */
.media-empty, .media-thumb-icon { color: var(--ink-3); }
.media-row { border-color: var(--border); }
.media-thumb { background: var(--surface-2); }
.media-batch-name, .media-sub { color: var(--ink-2); }
.media-name { color: var(--ink); }

/* Admin → AI Provider: thinking-level slider */
.dp-new .llm-effort { padding: 12px 16px 16px; border-top: 1px solid var(--border); }
.dp-new .llm-effort input[type="range"] { display: block; width: min(320px, 100%); min-height: 44px; accent-color: var(--brand); }