/* ══════════════════════════════════════════════
   Premium Tools — upsell & premium page styles
   ══════════════════════════════════════════════ */

/* ── Premium accent ── */
:root {
  --premium-gradient: linear-gradient(135deg, #2563eb, #7c3aed);
  --premium-blue: #2563eb;
  --premium-purple: #7c3aed;
  --premium-glow: rgba(124, 58, 237, .12);
}

/* ── Upsell card ── */
.tool-upsell {
  position: relative;
  border: 1px solid var(--w-border, #e2e8f0);
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
  background: var(--w-card-bg, var(--w-surface, #fff));
  color: var(--w-text, #1e293b);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
  transition: box-shadow .3s, border-color .3s;
  overflow: hidden;
}
.tool-upsell::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--premium-gradient);
  border-radius: 12px 12px 0 0;
}
.tool-upsell:hover {
  box-shadow: 0 8px 24px rgba(124, 58, 237, .1);
  border-color: var(--premium-purple);
}

/* ── Premium badge (pill) ── */
.tool-upsell__badge {
  display: inline-block;
  padding: .3rem 1rem;
  border-radius: 999px;
  background: var(--premium-gradient);
  color: #fff;
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* ── Title ── */
.tool-upsell__title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 .5rem;
  color: var(--w-heading, #1e293b);
}

/* ── Description ── */
.tool-upsell__desc {
  font-size: .95rem;
  color: var(--w-text, #334155);
  margin: 0 0 .75rem;
  line-height: 1.5;
}

.tool-upsell p {
  font-size: .9rem;
  color: var(--w-muted, #475569);
  margin: 0 0 .75rem;
}

/* ── Feature list ── */
.tool-upsell__features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .4rem .75rem;
}
.tool-upsell__features li {
  font-size: .9rem;
  color: var(--w-text, #1e293b);
  padding-left: 1.4rem;
  position: relative;
  line-height: 1.6;
}
.tool-upsell__features li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  font-weight: 700;
  color: #2563eb;
}

/* ── Price display ── */
.tool-upsell__price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--w-heading, #1e293b);
  margin-bottom: 1.25rem;
  line-height: 1.2;
}
.tool-upsell__price-note {
  font-size: .85rem;
  font-weight: 400;
  color: var(--w-muted, #64748b);
}

/* ── Purchase form ── */
.tool-upsell__form {
  margin: 0;
}
.tool-upsell__form-row {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}
.tool-upsell__form-row .tool-lead__input {
  flex: 1;
  min-width: 160px;
}

/* ── Purchase button ── */
.tool-upsell__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem 1.75rem;
  border-radius: 8px;
  border: none;
  background: var(--premium-gradient);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: opacity .2s, box-shadow .2s;
  white-space: nowrap;
}
.tool-upsell__btn:hover {
  opacity: .9;
  box-shadow: 0 4px 12px rgba(124, 58, 237, .25);
}
.tool-upsell__btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

/* ── Message feedback ── */
.tool-upsell__msg {
  font-size: .85rem;
  margin-top: .5rem;
  min-height: 1.2em;
}
.tool-upsell__msg--error {
  color: #dc2626;
}
.tool-upsell__msg--ok {
  color: #16a34a;
}

/* ── Honeypot field ── */
.tool-upsell .hidden-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* ══════════════════════════════════════════════
   Premium tool page styles
   ══════════════════════════════════════════════ */

/* ── Payment status (pending / success) ── */
.premium-status {
  text-align: center;
  padding: 1.5rem;
  border-radius: 12px;
  margin: 1.5rem 0;
  border: 1px solid var(--w-border, #e2e8f0);
  background: var(--w-card-bg, var(--w-surface, #f8fafc));
}
.premium-status--pending {
  border-color: #d97706;
  background: rgba(217, 119, 6, .06);
}
.premium-status--success {
  border-color: #16a34a;
  background: rgba(22, 163, 74, .06);
}

/* ── Premium badge on wizard ── */
.premium-badge {
  display: inline-block;
  padding: .25rem .75rem;
  border-radius: 999px;
  background: var(--premium-gradient);
  color: #fff;
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: .5rem;
}

/* ── Premium step overrides ── */
.premium-step .tool-step__title {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* ── Enhanced result section ── */
.premium-result {
  border: 2px solid transparent;
  border-image: var(--premium-gradient) 1;
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
  background: var(--w-card-bg, var(--w-surface, #f8fafc));
}

/* ── Download report button ── */
.premium-download {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 2rem;
  border-radius: 8px;
  border: none;
  background: var(--premium-gradient);
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: opacity .2s, box-shadow .2s;
  text-decoration: none;
}
.premium-download:hover {
  opacity: .9;
  box-shadow: 0 4px 12px rgba(124, 58, 237, .25);
}

/* ── Larger radar chart area ── */
.premium-radar {
  display: flex;
  justify-content: center;
  margin: 2.5rem 0;
}
.premium-radar svg {
  max-width: 480px;
  width: 100%;
  height: auto;
}

/* ══════════════════════════════════════════════
   Utility classes for premium JS output (CSP-safe)
   ══════════════════════════════════════════════ */
.p-center       { text-align: center; margin: 1.5rem 0; }
.p-flex-center   { display: flex; gap: 1rem; flex-wrap: wrap; margin: 2rem 0; }
.p-sector-grid   { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.p-muted         { font-size: .85rem; color: var(--w-muted, #64748b); margin-top: .5rem; }
.p-legend        { display: flex; gap: 1.5rem; justify-content: center; margin-top: .5rem; font-size: .85rem; }
.p-legend__swatch {
  display: inline-block;
  width: 16px;
  height: 3px;
  vertical-align: middle;
  margin-right: .25rem;
}
.p-legend__swatch--dashed {
  height: 0;
  border-top: 2px dashed currentColor;
}
.p-detail-header { margin-top: 1.25rem; margin-bottom: .5rem; font-size: .95rem; color: var(--w-muted, #64748b); }
.p-func-card {
  margin-bottom: 1.5rem;
  border: 1px solid var(--w-border, #e2e8f0);
  border-radius: 12px;
  padding: 1rem;
}
.p-func-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
}
.p-func-title    { font-size: 1.1rem; font-weight: 700; }
.p-func-score    { font-weight: 700; }
.p-bar-mb        { margin-bottom: .75rem; }
.p-sub-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: .85rem;
}
.p-sub-icon      { flex-shrink: 0; }
.p-sub-icon--ok  { color: #16a34a; }
.p-sub-icon--gap { color: #dc2626; }
.p-emphasis      { font-weight: 700; }

/* ── Additional CSP-safe utility classes ── */

/* Totals row (border-top separator) */
.p-total-row {
  border-top: 2px solid var(--w-border, #e2e8f0);
  margin-top: .5rem;
  padding-top: .75rem;
  font-weight: 700;
}

/* Cost amount size variant */
.p-cost-sm { font-size: 1.5rem; }

/* Monte Carlo / percentile grid */
.p-mc-grid {
  display: flex;
  gap: 1.5rem;
  margin-top: .75rem;
  flex-wrap: wrap;
}
.p-mc-item { text-align: center; }
.p-mc-label {
  font-size: .75rem;
  color: var(--w-muted, #64748b);
}
.p-mc-value {
  font-size: 1.1rem;
  font-weight: 700;
}

/* LEF / Stats grid */
.p-stats-grid {
  margin-top: .75rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.p-stats-label {
  font-size: .85rem;
  color: var(--w-muted, #64748b);
}

/* Description paragraph (muted, smaller) */
.p-desc {
  color: var(--w-muted, #64748b);
  font-size: .875rem;
}

/* Inline bar with flex gap */
.p-bar-inline {
  flex: 1;
  margin: 0 .75rem;
}

/* Card with border-left accent (color set via JS DOM) */
.p-accent-card {
  padding: .75rem;
  border: 1px solid var(--w-border, #e2e8f0);
  border-radius: 8px;
}
.p-accent-card--left {
  border-left-width: 4px;
}
.p-accent-card--3 {
  border-left-width: 3px;
}

/* Scenario / risk card desc */
.p-card-desc {
  font-size: .85rem;
  color: var(--w-muted, #64748b);
  margin: .25rem 0;
}

/* Dot indicators (risk dots row) */
.p-dots { display: flex; gap: 2px; }
.p-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--w-border, #e2e8f0);
}

/* Priority badge (inline) */
.p-prio-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .75rem;
  color: #fff;
  font-weight: 600;
  margin-right: .5rem;
}

/* Dealbreaker badge */
.p-db-badge {
  display: inline-block;
  padding: .1rem .4rem;
  border-radius: 3px;
  background: #dc2626;
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  margin-left: .5rem;
}

/* Budget: overview bars */
.p-budget-section   { margin: 1.5rem 0; }
.p-budget-row       { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.p-budget-row:last-child { margin-bottom: 0; }
.p-budget-label     { min-width: 110px; font-size: .9rem; font-weight: 600; }
.p-budget-bar-track { flex: 1; height: 28px; background: var(--w-border, #e2e8f0); border-radius: 6px; overflow: hidden; }
.p-budget-bar-fill  { height: 100%; border-radius: 6px; transition: width .6s ease; }
.p-budget-amount    { min-width: 130px; text-align: right; font-weight: 700; }

/* Budget: gap status box */
.p-gap-box {
  text-align: center;
  margin-top: 1rem;
  padding: .75rem;
  border-radius: 8px;
}
.p-gap-box--deficit  { background: rgba(220, 38, 38, .06); }
.p-gap-box--surplus  { background: rgba(22, 163, 74, .06); }
.p-gap-box--unknown  { background: rgba(217, 119, 6, .06); }
.p-gap-box--info     { border: 1px solid var(--w-border, #e2e8f0); }
.p-gap-text  { font-size: .85rem; color: var(--w-muted, #64748b); margin-top: .25rem; }

/* Budget: stacked bar */
.p-stacked-bar  { display: flex; height: 32px; border-radius: 8px; overflow: hidden; margin: 1rem 0 .5rem; }
.p-stacked-seg  { transition: width .6s ease; }

/* Budget: allocation legend grid */
.p-alloc-grid    { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .5rem; margin-top: 1rem; }
.p-alloc-item    { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.p-alloc-swatch  { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.p-alloc-value   { margin-left: auto; font-weight: 700; }
.p-alloc-pct     { font-weight: 400; color: var(--w-muted, #64748b); }

/* Budget: ROI card */
.p-roi-card {
  background: var(--w-card-bg, var(--w-surface, #f8fafc));
  border: 1px solid var(--w-border, #e2e8f0);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.p-roi-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  text-align: center;
}
.p-roi-num    { font-size: 1.8rem; font-weight: 800; }
.p-roi-num--primary { color: var(--w-primary, #2563eb); }
.p-roi-num--green   { color: #16a34a; }
.p-roi-label  { font-size: .85rem; color: var(--w-muted, #64748b); }
.p-roi-arrow  { display: flex; align-items: center; font-size: 1.5rem; color: var(--w-muted, #64748b); }
.p-roi-note   { text-align: center; font-size: .85rem; color: var(--w-muted, #64748b); margin: 1rem 0 0; }
.p-roi-note--p0 { margin: 0; text-align: center; }

/* ROI detail grid */
.p-roi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .75rem;
}
.p-roi-detail {
  padding: .75rem;
  border: 1px solid var(--w-border, #e2e8f0);
  border-radius: 8px;
}
.p-roi-detail-title { font-weight: 600; font-size: .9rem; }
.p-roi-detail-text  { font-size: .8rem; color: var(--w-muted, #64748b); margin-top: .25rem; }

/* Sector comparison rows */
.p-sector-row   { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.p-sector-label { min-width: 80px; font-size: .85rem; }
.p-sector-bar   { flex: 1; height: 20px; background: var(--w-border, #e2e8f0); border-radius: 4px; overflow: hidden; }
.p-sector-fill  { height: 100%; border-radius: 4px; transition: width .6s ease; }
.p-sector-pct   { min-width: 50px; text-align: right; font-size: .85rem; }
.p-sector-amt   { min-width: 90px; text-align: right; font-size: .8rem; color: var(--w-muted, #64748b); }
.p-sector-note  { font-size: .85rem; color: var(--w-muted, #64748b); }
.p-active       { font-weight: 700; }

/* Gap analysis rows */
.p-gap-row      { margin-bottom: 1rem; }
.p-gap-header   { display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem; }
.p-gap-name     { font-size: .9rem; font-weight: 600; }
.p-gap-badge    { font-size: .8rem; font-weight: 600; }
.p-gap-bar      { position: relative; height: 20px; background: var(--w-border, #e2e8f0); border-radius: 4px; overflow: hidden; }
.p-gap-fill     { position: absolute; height: 100%; border-radius: 4px; transition: width .6s ease; }
.p-gap-fill--bg { opacity: .2; }
.p-gap-meta     { display: flex; justify-content: space-between; font-size: .75rem; color: var(--w-muted, #64748b); margin-top: .15rem; }

/* Premium meta display (flex wrap) */
.p-meta-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
  font-size: .85rem;
  color: var(--w-muted, #64748b);
}

/* Table wrappers (RACI, gaps, etc.) */
.p-table-wrap { overflow-x: auto; }
.p-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.p-table th {
  padding: .5rem;
  border-bottom: 2px solid var(--w-border, #e2e8f0);
  text-align: left;
}
.p-table th.p-table--center { text-align: center; }
.p-table td {
  padding: .5rem;
  border-bottom: 1px solid var(--w-border, #e2e8f0);
}
.p-table td.p-table--center { text-align: center; }
.p-table .p-table--min60 { min-width: 60px; }

/* RACI cell badge */
.p-raci-badge {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
  color: #fff;
  font-weight: 700;
  font-size: .75rem;
  text-align: center;
}

/* RACI legend row */
.p-raci-legend {
  display: flex;
  gap: 1rem;
  margin-top: .75rem;
  font-size: .8rem;
  color: var(--w-muted, #64748b);
}

/* IR Timeline bars */
.p-tl-block     { margin-bottom: 1.5rem; }
.p-tl-title     { font-weight: 600; margin-bottom: .5rem; }
.p-tl-title-sub { font-weight: 400; color: var(--w-muted, #64748b); }
.p-tl-bar       { display: flex; height: 24px; border-radius: 6px; overflow: hidden; }
.p-tl-seg       { /* width set by JS DOM */ }
.p-tl-legend    { display: flex; gap: 1rem; margin-top: .25rem; font-size: .75rem; color: var(--w-muted, #64748b); }

/* IR Playbook inline elements */
.p-pb-trigger   { font-weight: 600; margin-bottom: .5rem; }
.p-pb-heading   { margin: .75rem 0 .25rem; }

/* Maturity: subcategory bar row */
.p-mat-row      { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font-size: .85rem; }
.p-mat-label    { min-width: 180px; }
.p-mat-bar      { flex: 1; position: relative; height: 16px; background: var(--w-border, #e2e8f0); border-radius: 3px; overflow: hidden; }
.p-mat-fill     { position: absolute; height: 100%; border-radius: 3px; transition: width .6s ease; }
.p-mat-fill--bg { opacity: .1; }
.p-mat-val      { min-width: 30px; text-align: center; font-weight: 600; }
.p-mat-gap      { min-width: 60px; font-size: .8rem; }

/* Maturity: gap table coloring (dynamic via JS DOM) */
.p-gap-prio-badge {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 4px;
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
}

/* Maturity: roadmap phase */
.p-roadmap-phase {
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  background: var(--w-card-bg, var(--w-surface, #f8fafc));
  border-radius: 0 8px 8px 0;
}
.p-roadmap-title { font-weight: 700; margin-bottom: .25rem; }
.p-roadmap-desc  { font-size: .85rem; color: var(--w-muted, #64748b); margin-bottom: .5rem; }
.p-roadmap-list  { margin: 0; padding-left: 1.25rem; font-size: .85rem; }

/* Phishing: click rate display */
.p-click-row {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .5rem;
}
.p-click-num { font-size: 2rem; font-weight: 800; }
.p-click-text { color: var(--w-muted, #64748b); }
.p-click-note { font-size: .9rem; }

/* Dealbreaker boxes */
.p-db-box {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.p-db-box--ok {
  background: rgba(22, 163, 74, .06);
  border: 1px solid rgba(22, 163, 74, .2);
}
.p-db-box--warn {
  background: rgba(220, 38, 38, .06);
  border: 1px solid rgba(220, 38, 38, .2);
}
.p-db-strong--ok   { color: #16a34a; }
.p-db-strong--warn { color: #dc2626; }

/* Maturity score muted label */
.p-score-muted {
  font-size: .85rem;
  color: var(--w-muted, #64748b);
  margin-top: .5rem;
}

/* Savings green highlight */
.p-savings-box {
  text-align: center;
  margin-top: 1rem;
  padding: .5rem;
  background: rgba(22, 163, 74, .06);
  border-radius: 6px;
}

/* NIS2 obligation muted small */
.p-obligation-cat {
  color: var(--w-text-muted, #64748b);
}

/* Risk card integration grid */
.p-int-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
}
.p-int-card {
  padding: .75rem;
  border: 1px solid var(--w-border, #e2e8f0);
  border-radius: 8px;
}
.p-int-name { font-weight: 600; font-size: .9rem; }
.p-int-risk { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; }
.p-int-risk-label { font-size: .8rem; font-weight: 600; }

/* Scenario grid */
.p-scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .75rem;
}

/* Radar legend row */
.p-radar-legend {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: .5rem;
  font-size: .85rem;
}
.p-radar-swatch {
  display: inline-block;
  width: 16px;
  height: 3px;
  vertical-align: middle;
  margin-right: .25rem;
}
.p-radar-swatch--dashed {
  height: 0;
  border-top: 2px dashed currentColor;
}

/* Maturity function detail card */
.p-func-card {
  margin-bottom: 1.5rem;
  border: 1px solid var(--w-border, #e2e8f0);
  border-radius: 12px;
  padding: 1rem;
}
.p-func-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
}
.p-func-title {
  font-size: 1.1rem;
  font-weight: 700;
}
.p-func-val {
  font-weight: 700;
}

/* Riskcard inline bold */
.p-bold { font-weight: 600; }
.p-bold-700 { font-weight: 700; }

/* Cyberverzekering premium ROI num large variant */
.p-roi-num--lg { font-size: 2rem; }

/* Centered note paragraph */
.p-note-center {
  text-align: center;
  font-size: .8rem;
  color: var(--w-muted, #64748b);
  margin: 1rem 0 0;
}

/* Overwogen tag */
.p-tag-overwogen {
  font-size: .75rem;
  color: var(--w-primary, #2563eb);
}

/* Bar margin-bottom for gap section */
.p-bar-mb    { margin-bottom: 1rem; }
.p-bar-mb-lg { margin-bottom: 1.5rem; }

/* Sector multiplier span */
.p-sector-mul { min-width: 40px; text-align: right; font-size: .85rem; }

/* Free-tool: maturity score inline style replacement */
.p-score-mb { margin-bottom: 1.5rem; }

/* ══════════════════════════════════════════════
   Runs counter & trend comparison
   ══════════════════════════════════════════════ */

/* Runs counter badge */
.runs-counter {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1rem;
  border-radius: 8px;
  background: var(--w-card-bg, var(--w-surface, #f0f4ff));
  border: 1px solid var(--w-border, #e2e8f0);
  margin-bottom: 1rem;
  font-size: .9rem;
}
.runs-counter--exhausted {
  border-color: #dc2626;
  background: rgba(220, 38, 38, .06);
}
.runs-counter__label {
  font-weight: 600;
  color: var(--w-text, #1e293b);
}
.runs-counter__dots {
  display: flex;
  gap: 4px;
}
.runs-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--w-border, #e2e8f0);
}
.runs-dot--used {
  background: var(--premium-blue, #2563eb);
}
.runs-counter--exhausted .runs-dot--used {
  background: #dc2626;
}

/* Trend comparison table */
.trend-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  margin-top: .5rem;
}
.trend-table th {
  padding: .5rem .75rem;
  border-bottom: 2px solid var(--w-border, #e2e8f0);
  text-align: left;
  font-weight: 600;
  font-size: .8rem;
  color: var(--w-muted, #64748b);
  text-transform: uppercase;
  letter-spacing: .03em;
}
.trend-table td {
  padding: .5rem .75rem;
  border-bottom: 1px solid var(--w-border, #e2e8f0);
}
.trend-up   { color: #16a34a; font-weight: 600; }
.trend-down { color: #dc2626; font-weight: 600; }
.trend-neutral { color: var(--w-muted, #64748b); }

/* Extra beurten CTA */
.extra-runs-cta {
  text-align: center;
  padding: 1.25rem;
  margin-top: 1rem;
  border-radius: 8px;
  background: rgba(220, 38, 38, .04);
  border: 1px solid rgba(220, 38, 38, .15);
}
.extra-runs-cta p {
  margin: 0 0 .75rem;
  font-size: .9rem;
  color: var(--w-text, #334155);
}

/* ══════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════ */
@media (max-width: 600px) {
  .tool-upsell {
    padding: 1.5rem 1.2rem;
  }
  .tool-upsell__features {
    grid-template-columns: 1fr;
  }
  .tool-upsell__form-row {
    flex-direction: column;
  }
  .tool-upsell__btn {
    width: 100%;
  }
  .tool-upsell__price {
    font-size: 1.6rem;
  }
  .premium-result {
    padding: 1.2rem;
  }
  .premium-radar svg {
    max-width: 100%;
  }
}

/* ══════════════════════════════════════════════
   Dark mode — uses [data-theme="dark"] to match site
   ══════════════════════════════════════════════ */
[data-theme="dark"] .tool-upsell {
  background: var(--w-card-bg, #1e293b);
  border-color: var(--w-border, #334155);
  color: var(--w-text, #e2e8f0);
}
[data-theme="dark"] .tool-upsell:hover {
  box-shadow: 0 8px 24px rgba(124, 58, 237, .2);
  border-color: var(--premium-purple);
}
[data-theme="dark"] .tool-upsell__title {
  color: var(--w-heading, #f1f5f9);
}
[data-theme="dark"] .tool-upsell__desc {
  color: var(--w-text, #cbd5e1);
}
[data-theme="dark"] .tool-upsell p {
  color: var(--w-muted, #94a3b8);
}
[data-theme="dark"] .tool-upsell__features li {
  color: var(--w-text, #e2e8f0);
}
[data-theme="dark"] .tool-upsell__features li::before {
  color: #60a5fa;
}
[data-theme="dark"] .tool-upsell__price {
  color: var(--w-heading, #f1f5f9);
}
[data-theme="dark"] .tool-upsell__form-row .tool-lead__input {
  background: var(--w-bg, #0f172a);
  border-color: var(--w-border, #334155);
  color: var(--w-text, #e2e8f0);
}
[data-theme="dark"] .premium-status {
  background: var(--w-card-bg, #1e293b);
  border-color: var(--w-border, #334155);
}
[data-theme="dark"] .premium-status--pending {
  border-color: #d97706;
  background: rgba(217, 119, 6, .1);
}
[data-theme="dark"] .premium-status--success {
  border-color: #16a34a;
  background: rgba(22, 163, 74, .1);
}
[data-theme="dark"] .premium-result {
  background: var(--w-card-bg, #1e293b);
}
[data-theme="dark"] .p-muted {
  color: var(--w-muted, #94a3b8);
}
[data-theme="dark"] .p-detail-header {
  color: var(--w-muted, #94a3b8);
}
[data-theme="dark"] .p-func-card {
  border-color: var(--w-border, #334155);
}
[data-theme="dark"] .runs-counter {
  background: var(--w-card-bg, #1e293b);
  border-color: var(--w-border, #334155);
}
[data-theme="dark"] .runs-counter__label {
  color: var(--w-text, #e2e8f0);
}
[data-theme="dark"] .trend-table th {
  border-color: var(--w-border, #334155);
  color: var(--w-muted, #94a3b8);
}
[data-theme="dark"] .trend-table td {
  border-color: var(--w-border, #334155);
}
[data-theme="dark"] .extra-runs-cta {
  background: rgba(220, 38, 38, .08);
  border-color: rgba(220, 38, 38, .25);
}
[data-theme="dark"] .extra-runs-cta p {
  color: var(--w-text, #e2e8f0);
}