/* ════════════════════════════════════════════════════════════════════
   DIFT product pages — light design override
   Load after dift-product.css + dift-v2.css.
   All dark surfaces, radial glows, and pill eyebrows are overridden here.
   Per-product palette (--pa, --pa-rgb, --page-bg*) is set per-page.
   ════════════════════════════════════════════════════════════════════ */

/* ── Override --cream so inline var(--cream) refs render dark ── */
:root { --cream: #0F0F0E; }

/* ── Remove all radial gradient overlays ── */
.dp-bg { display: none; }
.dp-info-card::before { display: none; }
.dp-form::before { display: none; }
.dp-modal-head { background: none; }

/* ── Eyebrow: no pill ── */
.dp-eyebrow {
  background: none; border: none; border-radius: 0; padding: 0;
  color: var(--pa); font-weight: 600;
}
.dp-eyebrow .dot { background: var(--pa); box-shadow: none; }

/* ── Typography ── */
.dp-h1 { color: var(--dift-text); font-weight: 600; letter-spacing: -0.022em; }
.dp-h1 em { color: var(--pa); -webkit-text-fill-color: var(--pa); }
.dp-h2 { color: var(--dift-text); font-weight: 600; letter-spacing: -0.018em; }
.dp-h2 em { color: var(--pa); }
.dp-sub { color: var(--dift-text-2); font-weight: 400; }

/* ── Buttons ── */
.dp-btn-p { background: var(--pa); color: #FFFFFF; }
.dp-btn-p:hover { opacity: 0.86; }
.dp-btn-o { color: var(--dift-text); border-color: rgba(0,0,0,0.13); background: transparent; }
.dp-btn-o:hover { border-color: rgba(0,0,0,0.24); background: rgba(0,0,0,0.04); }

/* ── Hero stats ── */
.dp-hero-stats { border-top-color: var(--dift-border); }
.dp-stat .v { color: var(--dift-text); }
.dp-stat .v sub { color: var(--dift-text-3); }
.dp-stat .l { color: var(--dift-text-3); letter-spacing: 0.14em; }

/* ── Hero visual frame ── */
.dp-visual-frame {
  background: var(--page-bg-3);
  border: 1px solid var(--dift-border);
  border-top: 3px solid var(--pa);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.dp-visual-head { background: none; }
.dp-visual-label { color: var(--pa); }
.dp-visual-label .dot { background: var(--pa); box-shadow: none; }
.dp-visual-tick { color: var(--dift-text-3); border-color: var(--dift-border); background: none; }

/* ── Info cards ── */
.dp-info-card {
  background: var(--page-bg-3);
  border: 1px solid var(--dift-border);
  border-top: 3px solid var(--pa);
}
.dp-info-card h3 { color: var(--dift-text); }
.dp-info-card h3 em { color: var(--pa); }
.dp-info-card p { color: var(--dift-text-2); }
.dp-info-list li { color: var(--dift-text-2); }
.dp-info-list li::before { background: var(--pa); }
.dp-info-tag { color: var(--pa); }
.dp-info-num { color: rgb(var(--pa-rgb) / 0.45); }

/* ── Pricing tiers ── */
.dp-tier {
  background: var(--page-bg-3);
  border-color: var(--dift-border);
  border-top: 3px solid transparent;
  box-shadow: none;
}
.dp-tier.is-feature {
  background: var(--page-bg-3);
  border-color: var(--pa-line);
  border-top-color: var(--pa);
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.dp-tier-name { color: var(--dift-text); }
.dp-tier-launch { color: var(--dift-text); }
.dp-tier-unit { color: var(--dift-text-3); }
.dp-tier-list { color: var(--dift-text-3); }
.dp-tier-promo { color: var(--pa); }
.dp-tier-sku { color: rgb(var(--pa-rgb) / 0.55); }
.dp-tier-aud { color: var(--dift-text-3); }
.dp-tier-feats li { color: var(--dift-text-2); }
.dp-tier-price { border-color: var(--pa-line); }
.dp-pricing-foot { color: var(--dift-text-3); }
.dp-tier-cta { color: var(--pa); border-color: var(--pa-line); background: none; }
.dp-tier-cta:hover { background: var(--pa); color: #FFFFFF; border-color: var(--pa); }
.dp-tier.is-feature .dp-tier-cta { background: var(--pa); color: #FFFFFF; }
.dp-tier.is-feature .dp-tier-cta:hover { opacity: 0.86; }

/* Checkmarks */
.dp-tier-feats .ck,
.dp-signup-checks .ck {
  background: var(--pa-dim);
  border-color: var(--pa-line);
}
.dp-tier-feats .ck::after,
.dp-signup-checks .ck::after { border-color: var(--pa); }

/* ── Compare button ── */
.dp-compare-btn { background: none; border-color: var(--pa-line); color: var(--pa); }
.dp-compare-btn:hover { background: var(--pa-dim); border-color: var(--pa-line-strong); }

/* ── Sign-up ── */
.dp-signup-checks li { color: var(--dift-text-2); }
.dp-signup-checks li[style*="border-bottom"] { border-bottom-color: var(--dift-border) !important; }

/* ── Form ── */
.dp-form {
  background: var(--page-bg-3);
  border-color: var(--dift-border);
  box-shadow: 0 2px 16px rgba(0,0,0,0.05);
}
.dp-form-head { border-bottom-color: var(--dift-border); background: none; }
.dp-form-label { color: var(--pa); }
.dp-form-step { color: var(--dift-text-3); }
.dp-field label { color: var(--dift-text-3); }
.dp-field input,
.dp-field select {
  background: var(--dift-bg);
  border-color: var(--dift-border);
  color: var(--dift-text);
}
.dp-field input::placeholder { color: var(--dift-text-3); }
.dp-field input:focus,
.dp-field select:focus {
  border-color: var(--pa);
  background: var(--dift-surface);
}
.dp-form-fine { color: var(--dift-text-3); }
.dp-form-fine a { color: var(--pa) !important; }

/* ── Screen meta ── */
.dp-screen-meta { color: rgba(15,15,14,0.30); }
.dp-screen-meta .dp-screen-num { color: var(--pa); opacity: 0.8; }

/* ── Inline style overrides for form content with hardcoded cream colors ── */
.dp-form strong[style*="color:var(--cream)"] { color: var(--dift-text) !important; }
.dp-form span[style*="color:rgba(250"] { color: var(--dift-text-3) !important; }

/* ════════════════════════════════════════════════════════════════════
   Compare Modal — light-theme text overrides
   All rgba(250,240,230,…) values from the dark theme need to flip
   to the light design-system tokens when this sheet is loaded.
   ════════════════════════════════════════════════════════════════════ */
.dp-modal-frame {
  background: var(--page-bg-3);
  border-color: var(--dift-border-md);
  box-shadow: 0 40px 100px rgba(0,0,0,0.14);
}
.dp-modal-head {
  background: linear-gradient(180deg, var(--pa-dim) 0%, transparent 100%);
  border-bottom-color: var(--dift-border);
}
.dp-modal-title { color: var(--dift-text); }
.dp-modal-title em { color: var(--pa); }
.dp-modal-sub { color: var(--dift-text-3); }
.dp-modal-close {
  background: rgba(0,0,0,0.03);
  border-color: var(--dift-border);
  color: var(--dift-text-3);
}
.dp-modal-close:hover {
  background: rgba(0,0,0,0.07);
  border-color: var(--dift-border-md);
  color: var(--dift-text);
}
.dp-modal-body { background: var(--page-bg-2); }

/* Anchor block */
.dp-cmp-anchor-price { color: var(--dift-text); }

/* Competitor rows */
.dp-cmp-row {
  background: var(--page-bg-3);
  border-color: var(--dift-border);
}
.dp-cmp-row:hover {
  border-color: var(--pa-line);
  background: var(--pa-dim);
}
.dp-cmp-rank { color: rgb(var(--pa-rgb) / 0.40); }
.dp-cmp-top h4 { color: var(--dift-text); }
.dp-cmp-model { color: var(--dift-text-3); }
.dp-cmp-grid .cl { color: var(--dift-text-3); }
.dp-cmp-grid .cv { color: var(--dift-text-2); }

/* DIFT advantage cell */
.dp-cmp-gap {
  background: var(--pa-dim);
  border-color: var(--pa-line);
}
.dp-cmp-gap p { color: var(--dift-text-2); }