/* ============================================================
   SkyCore Host — Page-Specific Component Styles
   All page-specific CSS consolidated here after header/footer
   extraction removed per-page <style> blocks.
   ============================================================ */

/* ── BANNER PADDING MODIFIERS ──────────────────────────────── */
.banner.one.pb-increase { padding-bottom: 120px !important; }
.banner.one.pb-decrease { padding-bottom: 40px  !important; }

/* ── SHARED BUTTON: plan-select-btn ───────────────────────── */
.plan-select-btn {
  display: block;
  text-align: center;
  padding: 12px 24px;
  background: var(--sc-primary);
  color: #fff;
  border-radius: var(--sc-radius-sm);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  margin: 16px 0;
  transition: background 0.2s, transform 0.15s;
  font-family: var(--sc-font);
  cursor: pointer;
  border: none;
}
.plan-select-btn:hover {
  background: var(--sc-primary-dark);
  color: #fff;
  transform: translateY(-1px);
}

/* ── HERO PRICE CHIPS ───────────────────────────────────────── */
.sc-cloud-hero-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  padding: 10px 18px;
  margin-bottom: 18px;
  color: #fff;
}
.sc-cloud-hero-price span { font-size: 15px; opacity: 0.85; }
.sc-cloud-hero-price strong { font-size: 28px; font-weight: 800; color: #fff; }

.sc-hero-price {
  margin: 16px 0;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 12px 20px;
  display: inline-block;
  color: #fff;
}
.sc-hero-price strong { font-size: 22px; font-weight: 800; display: block; }
.sc-hero-price span   { font-size: 13px; opacity: 0.75; display: block; margin-top: 2px; }

/* ── HERO PAGE INTRO CHIP / MINI PILL ─────────────────────── */
.page-intro-chip, .sc-mini-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(85,51,255,0.12);
  border: 1px solid rgba(85,51,255,0.25);
  color: #a78bfa;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 20px;
  margin-bottom: 14px;
}

/* ════════════════════════════════════════════════════════════
   1. SHARED / SITELOCK PRICING CARDS
   ════════════════════════════════════════════════════════════ */
.sc-pricing-card {
  background: #fff;
  border: 1.5px solid var(--sc-gray-100);
  border-radius: var(--sc-radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow 0.2s, transform 0.2s;
}
.sc-pricing-card:hover {
  box-shadow: var(--sc-shadow-lg);
  transform: translateY(-3px);
}
.sc-pricing-card.featured {
  border-color: var(--sc-primary);
  box-shadow: 0 0 0 2px var(--sc-primary);
}
.sc-pricing-header {
  background: linear-gradient(135deg, #5533ff, #7c3aed);
  color: #fff;
  padding: 28px 28px 24px;
  text-align: center;
}
.sc-pricing-header h4 { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.sc-price-label { font-size: 12px; opacity: 0.75; margin-bottom: 4px; }
.sc-price { font-size: 36px; font-weight: 800; color: #fff; }
.sc-price span { font-size: 16px; font-weight: 500; opacity: 0.8; }
.sc-pricing-header p { font-size: 13px; opacity: 0.8; margin: 8px 0 0; }
.sc-pricing-body { padding: 24px 28px; flex: 1; }
.sc-pricing-body ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.sc-pricing-body ul li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #374151; }
.sc-pricing-body ul li i { font-size: 16px; color: var(--sc-primary); flex-shrink: 0; }
.sc-pricing-footer { padding: 20px 28px; border-top: 1px solid var(--sc-gray-100); text-align: center; }
.sc-pricing-footer .btns { display: block; width: 100%; text-align: center; border-radius: var(--sc-radius-sm) !important; }

/* ════════════════════════════════════════════════════════════
   2. VPS SERVER CARDS
   ════════════════════════════════════════════════════════════ */
.sc-vps-card {
  background: #fff;
  border: 1.5px solid var(--sc-gray-100);
  border-radius: var(--sc-radius-md);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: box-shadow 0.2s, transform 0.2s;
}
.sc-vps-card:hover { box-shadow: var(--sc-shadow-lg); transform: translateY(-3px); }
.sc-vps-card.featured { border-color: var(--sc-primary); box-shadow: 0 0 0 2px var(--sc-primary); }
.sc-vps-badge {
  position: absolute;
  top: -1px; left: 50%; transform: translateX(-50%);
  background: var(--sc-primary); color: #fff;
  font-size: 12px; font-weight: 700; padding: 4px 18px;
  border-radius: 0 0 10px 10px; letter-spacing: 0.5px; white-space: nowrap;
}
.sc-vps-name { font-size: 18px; font-weight: 800; color: #111827; text-align: center; margin-bottom: 10px; }
.sc-vps-price { font-size: 40px; font-weight: 900; color: var(--sc-primary); text-align: center; line-height: 1; }
.sc-vps-price span { font-size: 16px; font-weight: 500; color: var(--sc-gray-400); }
.sc-vps-period { font-size: 12px; color: var(--sc-gray-400); text-align: center; margin-bottom: 24px; }
.sc-vps-features {
  list-style: none; padding: 0; margin: 0 0 24px; flex: 1;
  border-top: 1px solid var(--sc-gray-100);
}
.sc-vps-features li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--sc-gray-100); font-size: 14px;
}
.sc-vps-features li span { color: var(--sc-gray-400); }
.sc-vps-features li strong { font-weight: 700; color: #111827; }
.sc-vps-btn {
  display: block; text-align: center; padding: 13px;
  background: var(--sc-primary); color: #fff;
  border-radius: var(--sc-radius-sm); font-weight: 700; font-size: 15px;
  text-decoration: none; transition: background 0.2s; font-family: var(--sc-font);
}
.sc-vps-btn:hover { background: var(--sc-primary-dark); color: #fff; }

/* ════════════════════════════════════════════════════════════
   3. CLOUD HOSTING PLANS  (also used by Plesk)
   ════════════════════════════════════════════════════════════ */
.sc-cloud-plan {
  background: #fff;
  border: 1.5px solid var(--sc-gray-100);
  border-radius: var(--sc-radius-md);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  transition: box-shadow 0.2s, transform 0.2s;
}
.sc-cloud-plan:hover { box-shadow: var(--sc-shadow-lg); transform: translateY(-3px); }
.sc-cloud-plan.popular { border-color: var(--sc-primary); box-shadow: 0 0 0 2px var(--sc-primary); }
.sc-cloud-badge {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  background: var(--sc-primary); color: #fff;
  font-size: 12px; font-weight: 700; padding: 4px 18px;
  border-radius: 0 0 10px 10px; white-space: nowrap;
}
.sc-cloud-plan h4 { font-size: 20px; font-weight: 800; color: #111827; margin-bottom: 8px; }
.sc-plan-subtitle { font-size: 12px; color: var(--sc-gray-400); margin-bottom: 8px; }
.sc-plan-desc { font-size: 13px; color: var(--sc-gray-600); margin-bottom: 16px; line-height: 1.6; }
.sc-cloud-price-wrap { margin-bottom: 8px; }
.sc-cloud-starting { font-size: 12px; color: var(--sc-gray-400); display: block; }
.sc-cloud-price { display: flex; align-items: baseline; gap: 3px; margin: 4px 0; }
.sc-cloud-price .amount { font-size: 38px; font-weight: 900; color: var(--sc-primary); line-height: 1; }
.sc-cloud-price .period { font-size: 15px; color: var(--sc-gray-400); font-weight: 500; }
.sc-cloud-monthly { font-size: 12px; color: var(--sc-gray-400); }
.sc-cloud-save-tag { font-size: 11px; color: var(--sc-success); font-weight: 600; margin-top: 4px; }
.sc-cloud-domain-line {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: #374151; margin-bottom: 8px;
}
.sc-cloud-domain-line i { color: var(--sc-primary); font-size: 14px; }
.sc-cloud-list {
  list-style: none; padding: 0; margin: 16px 0 0;
  flex: 1; display: flex; flex-direction: column; gap: 8px;
}
.sc-cloud-list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; color: #374151;
}
.sc-cloud-list li i { color: var(--sc-primary); font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.sc-cloud-list li.sc-list-divider { border-top: 1px solid var(--sc-gray-100); margin: 6px 0; padding: 0; }
.sc-cloud-list li.sc-list-heading {
  font-weight: 700; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--sc-gray-400);
}
.sc-cloud-foot {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--sc-gray-100);
  font-size: 12px; color: var(--sc-gray-400); display: flex; align-items: center; gap: 6px;
}
.sc-cloud-foot i { color: var(--sc-success); }

/* ════════════════════════════════════════════════════════════
   4. DNS CHECKER & DNS ALL RECORDS
   ════════════════════════════════════════════════════════════ */
.sc-dns-form {
  display: flex;
  background: #fff; border-radius: 10px; overflow: hidden;
  max-width: 680px; margin: 0 auto 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}
.sc-dns-form input[type="text"] {
  flex: 1; padding: 14px 18px; border: none; outline: none;
  font-size: 15px; color: #111827; font-family: var(--sc-font);
}
.sc-dns-select {
  padding: 14px 12px;
  border: none; border-left: 1px solid var(--sc-gray-100); border-right: 1px solid var(--sc-gray-100);
  outline: none; font-size: 14px; font-weight: 600;
  background: var(--sc-gray-50); color: #374151; cursor: pointer;
}
.sc-dns-form button[type="submit"], #dnsBtn {
  padding: 14px 24px; background: var(--sc-primary); color: #fff; border: none;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background 0.2s; font-family: var(--sc-font);
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.sc-dns-form button[type="submit"]:hover, #dnsBtn:hover { background: var(--sc-primary-dark); }
.sc-refresh-opt {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  color: rgba(255,255,255,0.7); font-size: 13px; margin-top: 12px; flex-wrap: wrap;
}
.sc-refresh-opt input[type="number"] {
  width: 60px; padding: 4px 8px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1); color: #fff; text-align: center; font-size: 13px;
}
.sc-dns-results { display: none; padding: 40px 0; background: var(--sc-gray-50); }
.sc-dns-stats { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; }
.sc-stat-box {
  background: #fff; border: 1px solid var(--sc-gray-100); border-radius: 10px;
  padding: 16px 24px; text-align: center; min-width: 120px;
}
.sc-stat-value { font-size: 28px; font-weight: 800; color: #111827; }
.sc-stat-label { font-size: 12px; color: var(--sc-gray-400); margin-top: 4px; }
.sc-dns-grid { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: start; }
.sc-server-list { background: #fff; border: 1px solid var(--sc-gray-100); border-radius: var(--sc-radius-md); overflow: hidden; }
.sc-server-header {
  padding: 16px 20px; border-bottom: 1px solid var(--sc-gray-100);
  display: flex; align-items: center; gap: 10px;
}
.sc-server-header h3 { flex: 1; font-size: 15px; font-weight: 700; margin: 0; color: #111827; }
.sc-server-count {
  font-size: 12px; color: var(--sc-gray-400); background: var(--sc-gray-50);
  padding: 3px 10px; border-radius: 20px;
}
.sc-server-items { max-height: 420px; overflow-y: auto; }
.sc-add-dns-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 12px; background: var(--sc-gray-50);
  border: none; border-top: 1px solid var(--sc-gray-100);
  color: var(--sc-primary); font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.2s; font-family: var(--sc-font);
}
.sc-add-dns-btn:hover { background: var(--sc-gray-100); }
.sc-dns-main { display: flex; flex-direction: column; gap: 20px; }
.sc-map-card, .sc-records-card, .sc-dns-lists {
  background: #fff; border: 1px solid var(--sc-gray-100); border-radius: var(--sc-radius-md); overflow: hidden;
}
.sc-map-header, .sc-records-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px; border-bottom: 1px solid var(--sc-gray-100); flex-wrap: wrap; gap: 10px;
}
.sc-map-header h3, .sc-records-header h3 { font-size: 15px; font-weight: 700; margin: 0; color: #111827; }
.sc-filter-btn {
  padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--sc-gray-100); background: #fff; color: var(--sc-gray-600);
  cursor: pointer; transition: all 0.2s; font-family: var(--sc-font);
}
.sc-filter-btn:hover, .sc-filter-btn.active {
  background: var(--sc-primary); border-color: var(--sc-primary); color: #fff;
}
.sc-record-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.sc-map-container { position: relative; height: 340px; background: #f0f4ff; overflow: hidden; }
.sc-map-container svg { width: 100%; height: 100%; }
.sc-map-tooltip {
  position: absolute; background: rgba(0,0,0,0.85); color: #fff;
  padding: 8px 12px; border-radius: 8px; font-size: 12px;
  pointer-events: none; display: none; z-index: 10; white-space: nowrap;
}
.sc-map-legend {
  position: absolute; bottom: 12px; left: 12px;
  display: flex; gap: 12px; background: rgba(255,255,255,0.92);
  padding: 6px 12px; border-radius: 8px; font-size: 11px; color: #374151;
}
.sc-legend-item { display: flex; align-items: center; gap: 5px; }
.sc-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.sc-legend-dot.success { background: var(--sc-success); }
.sc-legend-dot.error   { background: var(--sc-danger); }
.sc-legend-dot.pending { background: var(--sc-warning); }
.sc-dns-lists { padding: 20px; }
.sc-dns-lists h3 { font-size: 15px; font-weight: 700; color: #111827; margin-bottom: 16px; }
.sc-list-section { margin-bottom: 16px; }
.sc-list-section h4 { font-size: 13px; font-weight: 700; color: var(--sc-gray-600); margin-bottom: 10px; }
.sc-list-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sc-list-item {
  display: flex; align-items: center; gap: 7px;
  padding: 8px 12px; background: var(--sc-gray-50); border-radius: 8px;
  font-size: 13px; color: #374151;
}
.sc-list-item img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; }
.sc-type-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.sc-chip {
  padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
  background: var(--sc-gray-50); color: var(--sc-gray-600);
  border: 1px solid var(--sc-gray-100); cursor: pointer; transition: all 0.2s; font-family: var(--sc-font);
}
.sc-chip.active, .sc-chip:hover { background: var(--sc-primary); border-color: var(--sc-primary); color: #fff; }
/* DNS Modal */
.sc-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 9999;
  align-items: center; justify-content: center;
}
.sc-modal.open, .sc-modal.active { display: flex; }
.sc-modal-content {
  background: #fff; border-radius: var(--sc-radius-md);
  max-width: 540px; width: 95%; max-height: 90vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.sc-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px; border-bottom: 1px solid var(--sc-gray-100);
}
.sc-modal-header h3 { font-size: 16px; font-weight: 700; margin: 0; color: #111827; }
.sc-modal-close {
  background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--sc-gray-400); padding: 4px; display: flex; align-items: center;
}
.sc-modal-close:hover { color: #111827; }
.sc-form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.sc-form-group label { font-size: 13px; font-weight: 600; color: #374151; }
.sc-form-group input[type="text"],
.sc-form-group input[type="number"] {
  padding: 10px 14px; border: 1px solid var(--sc-gray-100); border-radius: 8px;
  font-size: 14px; outline: none; transition: border-color 0.2s; font-family: var(--sc-font);
}
.sc-form-group input:focus { border-color: var(--sc-primary); }
.sc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sc-form-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: #374151; }
.required { color: var(--sc-danger); }
.sc-btn {
  padding: 10px 20px; border-radius: var(--sc-radius-sm); font-size: 14px; font-weight: 600;
  border: none; cursor: pointer; transition: all 0.2s; font-family: var(--sc-font);
}
.sc-btn-secondary { background: var(--sc-gray-50); color: var(--sc-gray-600); border: 1px solid var(--sc-gray-100); }
.sc-btn-secondary:hover { background: var(--sc-gray-100); }
.sc-btn-success { background: var(--sc-success); color: #fff; }
.sc-btn-success:hover { opacity: 0.9; }
/* Map loading */
.map-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 12px; color: var(--sc-gray-400); font-size: 13px;
}
.map-loading-spinner {
  width: 32px; height: 32px; border: 3px solid var(--sc-gray-100);
  border-top-color: var(--sc-primary); border-radius: 50%;
  animation: sc-pages-spin 0.8s linear infinite;
}
@keyframes sc-pages-spin { to { transform: rotate(360deg); } }

.sc-server-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-bottom: 1px solid #edf1f6;
}
.sc-server-item:hover { background: #f8fafc; }
.sc-server-flag {
  width: 24px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.sc-server-info { flex: 1; min-width: 0; }
.sc-server-location {
  color: #111827;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-server-provider {
  color: #718096;
  font-size: 11.5px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sc-server-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 13px;
  flex-shrink: 0;
}
.sc-server-status.pending { background: #eef2f7; color: #64748b; }
.sc-server-status.success { background: #ecfdf5; color: #047857; }
.sc-server-status.error { background: #fff1f2; color: #be123c; }

.sc-map-container {
  background: #0f1d35;
}
.sc-map-marker {
  position: absolute;
  width: 12px;
  height: 12px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.sc-map-marker.success { background: #10b981; }
.sc-map-marker.error { background: #ef4444; }
.sc-map-marker.pending { background: #94a3b8; }
.sc-map-marker:hover {
  transform: translate(-50%, -50%) scale(1.35);
  z-index: 10;
}
.sc-map-tooltip span {
  color: rgba(255,255,255,0.75);
  font-family: 'Courier New', monospace;
}

.sc-record-row {
  display: grid;
  grid-template-columns: 30px minmax(120px, 180px) minmax(0, 1fr) 80px;
  gap: 14px;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid #edf1f6;
}
.sc-record-row:last-child { border-bottom: 0; }
.sc-record-row:hover { background: #f8fafc; }
.sc-record-dot {
  display: inline-flex;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  justify-self: center;
}
.sc-record-dot.success { background: #10b981; }
.sc-record-dot.error { background: #ef4444; }
.sc-record-location {
  color: #111827;
  font-size: 13px;
  font-weight: 700;
}
.sc-record-value {
  color: #1f2a44;
  background: #f8fafc;
  border: 1px solid #edf1f6;
  border-radius: 6px;
  padding: 7px 10px;
  font-family: 'Courier New', monospace;
  font-size: 12.5px;
  word-break: break-all;
}
.sc-record-time {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}
.sc-dns-loading,
.sc-dns-empty {
  padding: 34px 20px;
  text-align: center;
  color: #64748b;
}
.sc-dns-empty {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.sc-dns-empty i { color: var(--sc-danger); font-size: 28px; }
.sc-dns-empty strong { color: #111827; }

@media (max-width: 991px) { .sc-dns-grid { grid-template-columns: 1fr; } }
@media (max-width: 767px) {
  .sc-dns-form { flex-direction: column; }
  .sc-dns-form input[type="text"],
  .sc-dns-select,
  .sc-dns-form button[type="submit"], #dnsBtn {
    width: 100%; border-radius: 0; border: none; border-bottom: 1px solid var(--sc-gray-100);
  }
  .sc-dns-form button[type="submit"], #dnsBtn { border-bottom: none; border-radius: 0 0 10px 10px; justify-content: center; }
  .sc-form-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   5. CONTACT PAGE
   ════════════════════════════════════════════════════════════ */
.sc-contact-hero-note {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 600;
  padding: 6px 16px; border-radius: 20px; margin-bottom: 18px;
}
.sc-contact-cards { padding: 48px 0 0; background: var(--sc-gray-50); }
.sc-contact-team-card {
  background: #fff; border: 1px solid var(--sc-gray-100); border-radius: var(--sc-radius-md);
  padding: 28px 24px; text-align: center; height: 100%; transition: box-shadow 0.2s;
}
.sc-contact-team-card:hover { box-shadow: var(--sc-shadow-md); }
/* Team card icons — Remix Icons with per-team accent */
.sc-contact-team-card .icon-wrap {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
  font-size: 28px; transition: transform .2s;
}
.sc-contact-team-card:hover .icon-wrap { transform: scale(1.1); }
.sc-team--support .icon-wrap  { background: rgba(14,165,233,0.12); color: #0369a1; }
.sc-team--billing .icon-wrap  { background: rgba(16,185,129,0.12); color: #059669; }
.sc-team--sales   .icon-wrap  { background: rgba(85,51,255,0.10);  color: #5533ff; }
.sc-team--marketing .icon-wrap { background: rgba(234,88,12,0.10); color: #c2410c; }
.sc-contact-team-card h4 { font-size: 16px; font-weight: 700; color: #111827; margin-bottom: 12px; }
.sc-contact-team-card a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #374151; text-decoration: none; margin-bottom: 6px;
  width: 100%; justify-content: center;
}
.sc-contact-team-card a i { font-size: 14px; color: #9ca3af; }
.sc-contact-team-card a:hover { color: var(--sc-primary); }
/* Hover border tint per team */
.sc-team--support:hover  { border-color: rgba(14,165,233,0.30); box-shadow: 0 10px 30px rgba(14,165,233,0.10); }
.sc-team--billing:hover  { border-color: rgba(16,185,129,0.30); box-shadow: 0 10px 30px rgba(16,185,129,0.10); }
.sc-team--sales:hover    { border-color: rgba(85,51,255,0.30);  box-shadow: 0 10px 30px rgba(85,51,255,0.10);  }
.sc-team--marketing:hover { border-color: rgba(234,88,12,0.30); box-shadow: 0 10px 30px rgba(234,88,12,0.10); }

.sc-contact-section { background: var(--sc-gray-50); }
.sc-contact-info-box, .sc-contact-action-box {
  background: #fff; border: 1px solid var(--sc-gray-100); border-radius: var(--sc-radius-md); padding: 32px 28px;
}
.sc-contact-info-box h3 { font-size: 20px; font-weight: 700; color: #111827; margin-bottom: 10px; }
.sc-contact-info-box > p { font-size: 14px; color: var(--sc-gray-400); margin-bottom: 24px; }
.sc-info-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.sc-info-item > i { font-size: 20px; color: var(--sc-primary); flex-shrink: 0; margin-top: 2px; }
.sc-info-item h5 { font-size: 14px; font-weight: 700; color: #111827; margin-bottom: 3px; }
.sc-info-item p { font-size: 13px; color: var(--sc-gray-400); margin: 0; line-height: 1.6; }
.sc-info-item a { font-size: 13px; color: var(--sc-primary); text-decoration: none; }
.sc-info-item a:hover { text-decoration: underline; }
.sc-hours-list { border-top: 1px solid var(--sc-gray-100); padding-top: 16px; margin-top: 8px; }
.sc-hours-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--sc-gray-50); font-size: 13px;
}
.sc-hours-item strong { color: #111827; }
.sc-hours-item span { color: var(--sc-gray-400); }

/* Support channel cards */
.sc-channels-heading { font-size: 20px; font-weight: 700; color: #111827; margin-bottom: 6px; }
.sc-channels-sub { font-size: 14px; color: var(--sc-gray-400); margin-bottom: 22px; }
.sc-channel-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.sc-channel-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 20px 18px; border-radius: 14px;
  border: 1.5px solid #e8eaf2; background: #fafbff;
  text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.sc-channel-card:hover { transform: translateY(-3px); text-decoration: none; }
.sc-channel-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.sc-channel-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.sc-channel-badge {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 8px; border-radius: 4px;
}
.sc-channel-card strong { font-size: 15px; font-weight: 700; color: #111827; }
.sc-channel-card span { font-size: 12.5px; color: #6b7280; line-height: 1.5; }
/* Per-channel colours */
.sc-channel--chat   .sc-channel-icon { background: rgba(14,165,233,0.12); color: #0369a1; }
.sc-channel--chat   .sc-channel-badge { background: rgba(14,165,233,0.12); color: #0369a1; }
.sc-channel--chat:hover   { border-color: rgba(14,165,233,0.35); box-shadow: 0 10px 28px rgba(14,165,233,0.10); }
.sc-channel--ticket .sc-channel-icon { background: rgba(85,51,255,0.10); color: #5533ff; }
.sc-channel--ticket .sc-channel-badge { background: rgba(85,51,255,0.10); color: #5533ff; }
.sc-channel--ticket:hover { border-color: rgba(85,51,255,0.30); box-shadow: 0 10px 28px rgba(85,51,255,0.10); }
.sc-channel--email  .sc-channel-icon { background: rgba(20,184,166,0.10); color: #0f766e; }
.sc-channel--email  .sc-channel-badge { background: rgba(20,184,166,0.10); color: #0f766e; }
.sc-channel--email:hover  { border-color: rgba(20,184,166,0.30); box-shadow: 0 10px 28px rgba(20,184,166,0.10); }
.sc-channel--phone  .sc-channel-icon { background: rgba(234,88,12,0.10); color: #c2410c; }
.sc-channel--phone  .sc-channel-badge { background: rgba(234,88,12,0.10); color: #c2410c; }
.sc-channel--phone:hover  { border-color: rgba(234,88,12,0.30); box-shadow: 0 10px 28px rgba(234,88,12,0.10); }

/* Social strip */
.sc-contact-social {
  padding: 32px 0; background: #fff; border-top: 1px solid #f0f2f8;
  text-align: center;
}
.sc-social-label { font-size: 13px; color: #9ca3af; font-weight: 500; margin-bottom: 14px; }
.sc-social-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.sc-social-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 16px; border-radius: 20px; font-size: 13px; font-weight: 600;
  border: 1px solid #e5e7eb; color: #374151; text-decoration: none;
  background: #fafafa; transition: all .18s;
}
.sc-social-pill i { font-size: 15px; }
.sc-social-pill:hover { border-color: var(--sc-primary); color: var(--sc-primary); background: rgba(85,51,255,0.04); text-decoration: none; }

/* Trust bar */
.sc-trust-bar {
  background: linear-gradient(90deg, #0f0626 0%, #1a0a3d 100%) !important;
  padding: 32px 0 !important;
  position: relative !important;
}
.sc-trust-inner {
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 20px !important; flex-wrap: wrap !important;
}
.sc-trust-left {
  display: flex !important; align-items: center !important; gap: 18px !important; flex: 1 !important;
}
.sc-trust-left > i { font-size: 36px !important; color: rgba(255,255,255,0.4) !important; flex-shrink: 0 !important; }
.sc-trust-left strong { display: block !important; font-size: 16px !important; font-weight: 700 !important; color: #fff !important; margin-bottom: 3px !important; }
.sc-trust-left span { font-size: 13px !important; color: rgba(255,255,255,0.55) !important; }
.sc-trust-cta {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  background: #5533ff !important; color: #fff !important; font-weight: 700 !important; font-size: 14px !important;
  padding: 13px 26px !important; border-radius: 10px !important; text-decoration: none !important;
  white-space: nowrap !important; transition: background .18s !important;
  box-shadow: 0 4px 18px rgba(85,51,255,0.35) !important;
}
.sc-trust-cta:hover { background: #4424e0 !important; color: #fff !important; text-decoration: none !important; }

/* ════════════════════════════════════════════════════════════
   6. TEAM PAGE
   ════════════════════════════════════════════════════════════ */
.sc-dept-header { text-align: center; margin-bottom: 36px; }
.sc-dept-header h3 { font-size: 22px; font-weight: 800; color: #111827; margin-bottom: 6px; }
.sc-dept-header p { font-size: 14px; color: var(--sc-gray-400); }
.sc-team-card {
  background: #fff; border: 1px solid var(--sc-gray-100); border-radius: var(--sc-radius-md);
  overflow: hidden; height: 100%; transition: box-shadow 0.2s, transform 0.2s;
}
.sc-team-card:hover { box-shadow: var(--sc-shadow-lg); transform: translateY(-3px); }
.sc-team-image { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: top; display: block; background: var(--sc-gray-50); }
.sc-team-content { padding: 20px; }
.sc-team-name { font-size: 16px; font-weight: 700; color: #111827; margin-bottom: 4px; }
.sc-team-role {
  display: inline-block; font-size: 12px; font-weight: 600; color: var(--sc-primary);
  background: rgba(85,51,255,0.08); padding: 3px 10px; border-radius: 20px; margin-bottom: 10px;
}
.sc-team-desc { font-size: 13px; color: var(--sc-gray-400); line-height: 1.6; margin-bottom: 14px; }
.sc-team-social { display: flex; gap: 8px; }
.sc-team-social a {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--sc-gray-50); color: var(--sc-gray-400);
  font-size: 15px; text-decoration: none; transition: all 0.2s;
}
.sc-team-social a:hover { background: var(--sc-primary); color: #fff; }

/* ════════════════════════════════════════════════════════════
   7. RESELLER HOSTING
   ════════════════════════════════════════════════════════════ */
.plan-style-one {
  background: #fff; border: 1.5px solid var(--sc-gray-100); border-radius: var(--sc-radius-md);
  padding: 28px 24px; height: 100%; display: flex; flex-direction: column;
  position: relative; transition: box-shadow 0.2s, border-color 0.2s;
}
.plan-style-one:hover { box-shadow: var(--sc-shadow-md); }
.plan-featured .plan-style-one { border-color: var(--sc-primary); box-shadow: 0 0 0 2px var(--sc-primary); overflow: visible; }
.plan-style-one[data-popular]::before {
  content: attr(data-popular);
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  background: var(--sc-primary); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 16px; border-radius: 0 0 8px 8px; white-space: nowrap;
}
.plan-style-one h4 { font-size: 18px; font-weight: 800; color: #111827; margin-bottom: 6px; }
.plan-style-one > p { font-size: 13px; color: var(--sc-gray-400); margin-bottom: 14px; }
.plan-style-one h3 { font-size: 32px; font-weight: 900; color: var(--sc-primary); margin-bottom: 4px; line-height: 1; }
.plan-style-one .durection { font-size: 15px; font-weight: 400; color: var(--sc-gray-400); }
.plan-style-one h5 { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--sc-gray-400); letter-spacing: 0.5px; margin: 16px 0 10px; }
.plan-style-one ul { list-style: none; padding: 0; margin: 0; flex: 1; }
.plan-style-one ul li {
  font-size: 13px; color: #374151; padding: 7px 0;
  border-bottom: 1px solid var(--sc-gray-50);
  display: flex; align-items: center; gap: 7px;
}
.plan-style-one ul li::before { content: '✓'; color: var(--sc-success); font-weight: 700; flex-shrink: 0; }
/* Apps grid */
.sc-apps-section { padding: 60px 0; background: var(--sc-gray-50); }
.sc-apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px; margin-top: 16px; }
.sc-app-item {
  background: #fff; border: 1px solid var(--sc-gray-100); border-radius: 10px;
  padding: 16px; display: flex; align-items: center; justify-content: center; transition: box-shadow 0.2s;
}
.sc-app-item:hover { box-shadow: var(--sc-shadow-md); }
.sc-app-item img { max-height: 44px; max-width: 80px; object-fit: contain; }
/* Advanced features */
.sc-advanced-features { padding: 60px 0; }
.sc-features-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.sc-features-list li {
  font-size: 13px; color: #374151; padding: 7px 0 7px 20px;
  position: relative; border-bottom: 1px solid var(--sc-gray-50);
}
.sc-features-list li::before { content: '✓'; position: absolute; left: 0; color: var(--sc-success); font-weight: 700; }
.sc-features-image { display: flex; align-items: center; justify-content: center; }
.sc-features-image img { max-width: 100%; border-radius: 12px; }
@media (max-width: 575px) { .sc-features-list { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   8. LEGAL & PRIVACY PAGES
   ════════════════════════════════════════════════════════════ */
.content-section { background: var(--sc-gray-50); }
.toc-sidebar {
  background: #fff; border: 1px solid var(--sc-gray-100); border-radius: var(--sc-radius-md);
  padding: 20px; position: sticky; top: 90px;
}
.toc-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--sc-gray-400); margin-bottom: 12px; }
.toc-sidebar ul { list-style: none; padding: 0; margin: 0; }
.toc-sidebar ul li { margin-bottom: 2px; }
.toc-sidebar ul li a {
  display: block; font-size: 13px; color: var(--sc-gray-400); padding: 5px 8px;
  border-radius: 6px; text-decoration: none; transition: all 0.15s;
}
.toc-sidebar ul li a:hover, .toc-sidebar ul li a.active {
  background: rgba(85,51,255,0.08); color: var(--sc-primary); font-weight: 600;
}
.effective-date {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: rgba(85,51,255,0.04); border: 1px solid rgba(85,51,255,0.12);
  border-radius: 8px; padding: 12px 16px; font-size: 13px; color: var(--sc-gray-400); margin-bottom: 28px;
}
.effective-date i { color: var(--sc-primary); font-size: 16px; }
.pp-version-chip {
  background: var(--sc-primary); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px; margin-left: auto;
}
.sc-section-block { margin-bottom: 40px; }
.sc-section-block h2 {
  display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 700;
  color: #111827; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--sc-gray-100);
}
.sc-section-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; background: var(--sc-primary); color: #fff;
  font-size: 12px; font-weight: 700; border-radius: 50%; flex-shrink: 0;
}
.sc-section-block p { font-size: 14px; color: #374151; line-height: 1.8; margin-bottom: 12px; }
.sc-section-block ul, .sc-section-block ol { font-size: 14px; color: #374151; line-height: 1.8; padding-left: 20px; margin-bottom: 12px; }
.sc-section-block h3 { font-size: 17px; font-weight: 700; color: #111827; margin: 24px 0 10px; }
.sc-section-block h4 { font-size: 15px; font-weight: 700; color: #111827; margin: 16px 0 8px; }
.sc-section-block a { color: var(--sc-primary); }
.legal-box {
  background: rgba(85,51,255,0.04); border: 1px solid rgba(85,51,255,0.15);
  border-radius: 10px; padding: 18px 22px; margin: 16px 0; font-size: 14px; color: #374151;
}
.legal-box h4 { font-size: 15px; font-weight: 700; color: #111827; margin-bottom: 8px; }
.sc-callout { border-radius: 10px; padding: 16px 20px; margin: 16px 0; font-size: 14px; }
.sc-callout.warning { background: rgba(255,176,32,0.08); border: 1px solid rgba(255,176,32,0.25); color: #7c5e00; }
.sc-callout.info    { background: rgba(85,51,255,0.05); border: 1px solid rgba(85,51,255,0.15); color: #3730a3; }
.sc-callout.success { background: rgba(0,196,140,0.06); border: 1px solid rgba(0,196,140,0.2); color: #065f46; }
.sc-callout.danger  { background: rgba(255,71,87,0.06); border: 1px solid rgba(255,71,87,0.2); color: #991b1b; }
.sc-section-block table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px; }
.sc-section-block th, .sc-section-block td { padding: 10px 14px; text-align: left; border: 1px solid var(--sc-gray-100); }
.sc-section-block th { background: var(--sc-gray-50); font-weight: 700; color: #374151; }

/* ════════════════════════════════════════════════════════════
   9. AFFILIATES PAGE
   ════════════════════════════════════════════════════════════ */
.sc-affiliate-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 14px; font-weight: 600; padding: 8px 20px; border-radius: 30px;
}
.sc-affiliate-pill i { font-size: 18px; color: #fbbf24; }
.sc-affiliate-pill strong { color: #fbbf24; font-size: 18px; }
.sc-step-badge {
  display: inline-block; background: var(--sc-primary); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 12px;
  border-radius: 20px; margin-bottom: 12px; letter-spacing: 0.5px;
}
.sc-aff-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: 48px;
}
.sc-aff-stat {
  background: #fff; border: 1.5px solid var(--sc-gray-100); border-radius: var(--sc-radius-md);
  padding: 28px 20px; text-align: center; transition: box-shadow 0.2s, transform 0.2s;
}
.sc-aff-stat:hover { box-shadow: var(--sc-shadow-lg); transform: translateY(-3px); }
.sc-aff-stat h4 { font-size: 32px; font-weight: 900; color: var(--sc-primary); line-height: 1; margin-bottom: 8px; }
.sc-aff-stat p { font-size: 14px; color: var(--sc-gray-400); margin: 0; }
@media (max-width: 767px) {
  .sc-aff-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════
   10. WEBSITE BUILDER CARDS
   ════════════════════════════════════════════════════════════ */
.sc-builder-card {
  background: #fff; border: 1.5px solid var(--sc-gray-100); border-radius: var(--sc-radius-md);
  padding: 28px 24px; display: flex; flex-direction: column;
  height: 100%; position: relative; transition: box-shadow 0.2s, transform 0.2s;
}
.sc-builder-card:hover { box-shadow: var(--sc-shadow-lg); transform: translateY(-3px); }
.sc-builder-card.featured { border-color: var(--sc-primary); box-shadow: 0 0 0 2px var(--sc-primary); }
.sc-builder-badge {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  background: var(--sc-primary); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 16px; border-radius: 0 0 8px 8px; white-space: nowrap;
}
.sc-builder-name { font-size: 18px; font-weight: 800; color: #111827; margin-bottom: 4px; }
.sc-builder-desc { font-size: 13px; color: var(--sc-gray-400); margin-bottom: 16px; line-height: 1.5; }
.sc-builder-price { font-size: 36px; font-weight: 900; color: var(--sc-primary); line-height: 1; margin-bottom: 4px; }
.sc-builder-price span { font-size: 16px; font-weight: 400; color: var(--sc-gray-400); }
.sc-builder-period { font-size: 12px; color: var(--sc-gray-400); margin-bottom: 20px; }
.sc-builder-features { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; border-top: 1px solid var(--sc-gray-100); }
.sc-builder-features li {
  padding: 8px 0; border-bottom: 1px solid var(--sc-gray-50);
  font-size: 13px; color: #374151; display: flex; align-items: center; gap: 6px;
}
.sc-builder-features li::before { content: '✓'; color: var(--sc-success); font-weight: 700; flex-shrink: 0; }
.sc-builder-btn {
  display: block; text-align: center; padding: 12px; background: var(--sc-primary); color: #fff;
  border-radius: var(--sc-radius-sm); font-weight: 700; font-size: 14px;
  text-decoration: none; transition: background 0.2s; font-family: var(--sc-font);
}
.sc-builder-btn:hover { background: var(--sc-primary-dark); color: #fff; }

/* ════════════════════════════════════════════════════════════
   11. CODEGUARD / BACKUP PLAN CARDS
   ════════════════════════════════════════════════════════════ */
.sc-plan-card {
  background: #fff; border: 1.5px solid var(--sc-gray-100); border-radius: var(--sc-radius-md);
  padding: 28px 24px; display: flex; flex-direction: column;
  height: 100%; transition: box-shadow 0.2s, transform 0.2s;
}
.sc-plan-card:hover { box-shadow: var(--sc-shadow-lg); transform: translateY(-3px); }
.sc-plan-card h4 { font-size: 18px; font-weight: 800; color: #111827; margin-bottom: 6px; }
.sc-plan-sub { font-size: 13px; color: var(--sc-gray-400); margin-bottom: 16px; line-height: 1.5; }
.sc-plan-price { display: flex; align-items: baseline; gap: 2px; margin-bottom: 4px; }
.sc-plan-price .currency { font-size: 20px; font-weight: 700; color: var(--sc-primary); }
.sc-plan-price .amount   { font-size: 40px; font-weight: 900; color: var(--sc-primary); line-height: 1; }
.sc-plan-price .term     { font-size: 15px; color: var(--sc-gray-400); font-weight: 400; }
.sc-plan-note { font-size: 12px; color: var(--sc-gray-400); margin-bottom: 16px; }

/* ════════════════════════════════════════════════════════════
   12. TITAN EMAIL ADDON CARDS
   ════════════════════════════════════════════════════════════ */
.sc-addon-card {
  background: #fff; border: 1.5px solid var(--sc-gray-100); border-radius: var(--sc-radius-md);
  padding: 28px 24px; display: flex; flex-direction: column;
  height: 100%; text-align: center; transition: box-shadow 0.2s, transform 0.2s;
}
.sc-addon-card:hover { box-shadow: var(--sc-shadow-lg); transform: translateY(-3px); }
.sc-addon-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--sc-gray-400); margin-bottom: 12px; }
.sc-addon-icon { font-size: 40px; color: var(--sc-primary); margin-bottom: 12px; line-height: 1; }
.sc-addon-headline { font-size: 18px; font-weight: 800; color: #111827; margin-bottom: 8px; }
.sc-addon-desc { font-size: 13px; color: var(--sc-gray-400); line-height: 1.6; flex: 1; margin-bottom: 16px; }
.sc-addon-price { font-size: 16px; font-weight: 700; color: var(--sc-primary); margin-bottom: 16px; }
.sc-addon-actions { display: flex; gap: 10px; justify-content: center; }
.sc-addon-btn {
  padding: 10px 20px; border-radius: var(--sc-radius-sm); font-size: 13px; font-weight: 600;
  text-decoration: none; transition: all 0.2s; font-family: var(--sc-font); display: inline-flex; align-items: center;
}
.sc-addon-btn.primary  { background: var(--sc-primary); color: #fff; }
.sc-addon-btn.primary:hover { background: var(--sc-primary-dark); color: #fff; }
.sc-addon-btn.secondary { background: var(--sc-gray-50); color: var(--sc-gray-600); border: 1px solid var(--sc-gray-100); }
.sc-addon-btn.secondary:hover { background: var(--sc-gray-100); }
.sc-addon-powered { text-align: center; margin-top: 24px; font-size: 13px; color: var(--sc-gray-400); }
.sc-addon-powered strong { color: #374151; }

/* ════════════════════════════════════════════════════════════
   13. BULK DOMAIN / TRANSFER / WHOIS PAGES
   ════════════════════════════════════════════════════════════ */
.sc-bulk-form-wrap {
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 14px; padding: 28px; max-width: 680px; margin: 0 auto;
}
.sc-bulk-textarea {
  width: 100%; padding: 14px 16px; border: none; border-radius: 8px;
  font-size: 14px; line-height: 1.6; resize: vertical; min-height: 140px;
  outline: none; color: #111827; font-family: monospace; background: #fff;
}
.sc-results-section { padding: 40px 0; background: var(--sc-gray-50); }
.sc-results-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sc-results-table th {
  background: var(--sc-gray-50); padding: 11px 14px; text-align: left;
  font-weight: 700; color: #374151; border-bottom: 2px solid var(--sc-gray-100);
}
.sc-results-table td { padding: 11px 14px; border-bottom: 1px solid var(--sc-gray-50); color: #374151; }
.sc-results-table tr:hover td { background: #fafafa; }
.sc-status-available { color: var(--sc-success); font-weight: 600; }
.sc-status-taken     { color: var(--sc-danger);  font-weight: 600; }
.sc-status-checking  { color: var(--sc-warning); }
.sc-whois-result { background: #fff; border: 1px solid var(--sc-gray-100); border-radius: var(--sc-radius-md); padding: 28px; margin-top: 24px; }
.sc-whois-result pre { font-size: 13px; line-height: 1.7; white-space: pre-wrap; word-break: break-all; }

/* ════════════════════════════════════════════════════════════
   14. ABOUT US PAGE
   ════════════════════════════════════════════════════════════ */
.sc-about-stat {
  text-align: center; padding: 24px 16px; background: #fff;
  border: 1px solid var(--sc-gray-100); border-radius: var(--sc-radius-md);
}
.sc-about-stat h3 { font-size: 36px; font-weight: 900; color: var(--sc-primary); margin-bottom: 6px; }
.sc-about-stat p  { font-size: 13px; color: var(--sc-gray-400); margin: 0; }

/* ════════════════════════════════════════════════════════════
   15. SSL CERTIFICATES PAGE
   ════════════════════════════════════════════════════════════ */
.sc-ssl-card {
  background: #fff; border: 1.5px solid var(--sc-gray-100); border-radius: var(--sc-radius-md);
  padding: 28px 24px; height: 100%; display: flex; flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s; position: relative;
}
.sc-ssl-card:hover { box-shadow: var(--sc-shadow-lg); transform: translateY(-3px); }
.sc-ssl-card.featured { border-color: var(--sc-primary); box-shadow: 0 0 0 2px var(--sc-primary); }
.sc-ssl-badge {
  position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  background: var(--sc-primary); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 16px; border-radius: 0 0 8px 8px; white-space: nowrap;
}

/* ════════════════════════════════════════════════════════════
   16. BUSINESS EMAIL / BUNDLE DEAL PAGES
   ════════════════════════════════════════════════════════════ */
.sc-email-plan {
  background: #fff; border: 1.5px solid var(--sc-gray-100); border-radius: var(--sc-radius-md);
  padding: 28px 24px; height: 100%; display: flex; flex-direction: column;
  transition: box-shadow 0.2s, transform 0.2s;
}
.sc-email-plan:hover { box-shadow: var(--sc-shadow-lg); transform: translateY(-3px); }
.sc-bundle-card { background: #fff; border: 1px solid var(--sc-gray-100); border-radius: var(--sc-radius-md); padding: 28px 24px; height: 100%; }

/* ════════════════════════════════════════════════════════════
   17. 404 PAGE
   ════════════════════════════════════════════════════════════ */

/* Section */
.sc-404-section {
  background: linear-gradient(135deg, #1a0e4a 0%, #2b1878 35%, #3d2199 70%, #4a28b0 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 150px 20px 70px;
  position: relative;
  overflow: hidden;
}
.sc-404-section::before {
  content: '';
  position: absolute;
  top: -220px;
  right: -140px;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(123,97,255,0.22) 0%, rgba(123,97,255,0) 68%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.sc-404-section::after {
  content: '';
  position: absolute;
  left: -160px;
  bottom: -180px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(0,212,255,0.12) 0%, rgba(0,212,255,0) 66%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Inner wrapper */
.sc-404-inner {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

/* Status badge */
.sc-404-badge {
  display: inline-block;
  padding: 6px 18px;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 50px;
  color: #f87171;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 28px;
}

/* Large watermark number */
.sc-404-number {
  display: block;
  font-size: clamp(120px, 22vw, 200px);
  font-weight: 900;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  letter-spacing: -4px;
  user-select: none;
  margin-bottom: -20px;
}

/* Ghost emoji */
.sc-404-ghost {
  display: block;
  font-size: 72px;
  line-height: 1;
  margin-bottom: 20px;
  animation: sc-ghost-float 3s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(85,51,255,0.35));
}

@keyframes sc-ghost-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* Heading */
.sc-404-heading {
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  line-height: 1.3;
}

/* Description */
.sc-404-desc {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.7;
  margin-bottom: 32px;
}

/* Domain search form */
.sc-404-search-wrap {
  margin-bottom: 28px;
}

.sc-404-search {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.sc-404-search:focus-within {
  border-color: rgba(85,51,255,0.6);
  background: rgba(255,255,255,0.09);
}

.sc-404-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 14px 18px;
  color: #fff;
  font-size: 15px;
}

.sc-404-search input::placeholder {
  color: rgba(255,255,255,0.38);
}

.sc-404-search button {
  flex-shrink: 0;
  background: #5533ff;
  border: none;
  color: #fff;
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background 0.2s;
}

.sc-404-search button:hover {
  background: #4422ee;
}

/* Action buttons */
.sc-404-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.sc-404-btn-primary,
.sc-404-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}

.sc-404-btn-primary {
  background: #5533ff;
  color: #fff;
  box-shadow: 0 6px 24px rgba(85,51,255,0.38);
}

.sc-404-btn-primary:hover {
  background: #4422ee;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(85,51,255,0.50);
  color: #fff;
}

.sc-404-btn-secondary {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.15);
}

.sc-404-btn-secondary:hover {
  background: rgba(255,255,255,0.14);
  color: #fff;
  transform: translateY(-2px);
}

/* Quick links */
.sc-404-links-wrap {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 28px;
}

.sc-404-links-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 14px;
}

.sc-404-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.sc-404-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 8px;
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.sc-404-link:hover {
  background: rgba(85,51,255,0.18);
  border-color: rgba(85,51,255,0.45);
  color: #fff;
}

/* Floating background particles */
.sc-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.sc-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  animation: sc-particle-float var(--dur, 5s) var(--delay, 0s) ease-in-out infinite;
}

@keyframes sc-particle-float {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.5; }
  50%       { transform: translateY(-18px) scale(1.3); opacity: 1; }
}

/* Mobile */
@media (max-width: 575px) {
  .sc-404-section { padding: 120px 16px 48px; }
  .sc-404-number  { font-size: 130px; }
  .sc-404-ghost   { font-size: 54px; }
  .sc-404-actions { flex-direction: column; align-items: stretch; }
  .sc-404-btn-primary,
  .sc-404-btn-secondary { justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   18. LIVE CHAT PAGE
   ════════════════════════════════════════════════════════════ */
.lc-card {
  background: #fff; border: 1px solid var(--sc-gray-100);
  border-radius: var(--sc-radius-lg); padding: 48px 40px;
  text-align: center; box-shadow: var(--sc-shadow-lg);
}
.lc-icon-wrap {
  width: 72px; height: 72px; background: rgba(85,51,255,0.1);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px; font-size: 32px; color: var(--sc-primary);
  animation: lc-pulse 2.5s ease-in-out infinite;
}
@keyframes lc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(85,51,255,0.25); }
  50% { box-shadow: 0 0 0 16px rgba(85,51,255,0); }
}
.lc-title { font-size: 22px; font-weight: 800; color: #111827; margin-bottom: 24px; font-family: var(--sc-font); }
.lc-loading { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lc-spinner {
  width: 40px; height: 40px; border: 3px solid var(--sc-gray-100);
  border-top-color: var(--sc-primary); border-radius: 50%;
  animation: lc-spin 0.9s linear infinite;
}
@keyframes lc-spin { to { transform: rotate(360deg); } }
.lc-loading-text { font-size: 14px; color: var(--sc-gray-400); }
.lc-connected { display: none; flex-direction: column; align-items: center; gap: 14px; }
.lc-check {
  width: 48px; height: 48px; background: rgba(0,196,140,0.12);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: var(--sc-success);
}
.lc-connected p { font-size: 14px; color: var(--sc-gray-400); margin: 0; }
.lc-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.lc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: 8px; font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: all 0.2s;
  border: none; font-family: var(--sc-font);
}
.lc-btn-primary { background: var(--sc-primary); color: #fff; }
.lc-btn-primary:hover { background: var(--sc-primary-dark); color: #fff; }
.lc-btn-outline { background: var(--sc-gray-50); color: var(--sc-gray-600); border: 1px solid var(--sc-gray-100); }
.lc-btn-outline:hover { background: var(--sc-gray-100); color: var(--sc-gray-600); }
.lc-pills { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.lc-pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--sc-gray-50); border: 1px solid var(--sc-gray-100);
  color: var(--sc-gray-400); font-size: 12px; padding: 5px 12px; border-radius: 20px;
}
.lc-pill i { font-size: 13px; color: var(--sc-primary); }
@media (max-width: 575px) {
  .lc-card { padding: 36px 24px; }
  .lc-actions { flex-direction: column; align-items: stretch; }
}

/* ════════════════════════════════════════════════════════════
   20. SITEMAP PAGE
   ════════════════════════════════════════════════════════════ */
.page-header {
  background: linear-gradient(180deg, #f5f6ff 0%, #fff 100%);
  border-bottom: 1px solid var(--sc-gray-100);
  padding: 108px 0 28px;
}
.page-header .breadcrumb { background: none; padding: 0; margin-bottom: 16px; }
.page-header .breadcrumb-item a { color: var(--sc-primary); text-decoration: none; font-size: 13px; font-weight: 500; }
.page-header .breadcrumb-item.active { color: var(--sc-gray-400); font-size: 13px; }
.page-header .breadcrumb-item + .breadcrumb-item::before { color: var(--sc-gray-200); }
.page-header h1 { font-size: 30px; font-weight: 800; color: #111827; margin-bottom: 10px; font-family: var(--sc-font); }
.page-header p { font-size: 15px; color: var(--sc-gray-400); max-width: 600px; margin: 0; }

.sitemap-section { padding: 40px 0 60px; background: var(--sc-gray-50); }
.sitemap-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px; margin-bottom: 48px;
}
.sitemap-card {
  background: #fff; border: 1px solid var(--sc-gray-100); border-radius: var(--sc-radius-md);
  padding: 24px 22px;
}
.sitemap-card h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: #111827; font-family: var(--sc-font);
  margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--sc-gray-100);
}
.sitemap-card h3 i { font-size: 18px; color: var(--sc-primary); }
.sitemap-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.sitemap-card ul li a {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border-radius: 6px; font-size: 13px; color: #374151; text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.sitemap-card ul li a:hover { background: rgba(85,51,255,0.06); color: var(--sc-primary); }

.badge-hot  { background: #fee2e2; color: #b91c1c; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 20px; }
.badge-new  { background: #dbeafe; color: #1d4ed8; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 20px; }
.badge-free { background: #dcfce7; color: #15803d; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 20px; }

.xml-sitemap-box {
  text-align: center; background: #fff; border: 1px solid var(--sc-gray-100);
  border-radius: var(--sc-radius-md); padding: 40px 28px;
}
.xml-sitemap-box h4 { font-size: 18px; font-weight: 700; color: #111827; margin-bottom: 8px; font-family: var(--sc-font); }
.xml-sitemap-box p { font-size: 14px; color: var(--sc-gray-400); margin-bottom: 20px; }

/* ════════════════════════════════════════════════════════════
   21. WHOIS PAGE — HERO FORM & RESULTS
   ════════════════════════════════════════════════════════════ */
.sc-whois-form {
  display: flex; background: #fff; border-radius: 10px; overflow: hidden;
  max-width: 600px; margin: 0 auto 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.18);
}
.sc-whois-form input[type="text"] {
  flex: 1; padding: 14px 18px; border: none; outline: none;
  font-size: 15px; color: #111827; font-family: var(--sc-font);
}
.sc-whois-form input[type="text"]::placeholder { color: #9ca3af; }
.sc-whois-form button[type="submit"] {
  padding: 14px 28px; background: var(--sc-primary); color: #fff; border: none;
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--sc-font);
  transition: background 0.2s; white-space: nowrap; flex-shrink: 0;
}
.sc-whois-form button[type="submit"]:hover { background: var(--sc-primary-dark); }

/* ════════════════════════════════════════════════════════════
   22. DNS RECORDS LOOKUP PAGE (all-dns-records.php)
   ════════════════════════════════════════════════════════════ */
.sc-lookup-form-wrap { max-width: 700px; margin: 0 auto; }
.sc-lookup-form {
  display: flex; background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.2);
}
.sc-lookup-form input[type="text"] {
  flex: 1; padding: 14px 18px; border: none; outline: none;
  font-size: 15px; color: #111827; font-family: var(--sc-font);
}
.sc-lookup-form input[type="text"]::placeholder { color: #9ca3af; }
.sc-lookup-form button[type="submit"] {
  padding: 14px 26px; background: var(--sc-primary); color: #fff; border: none;
  font-size: 14px; font-weight: 700; cursor: pointer; font-family: var(--sc-font);
  display: flex; align-items: center; gap: 7px; white-space: nowrap; flex-shrink: 0;
  transition: background 0.2s;
}
.sc-lookup-form button[type="submit"]:hover { background: var(--sc-primary-dark); }
.sc-lookup-form-wrap .sc-type-chips { margin-top: 14px; margin-bottom: 0; }

/* DNS spinner */
.sc-dns-spinner {
  width: 44px; height: 44px; border: 4px solid var(--sc-gray-100);
  border-top-color: var(--sc-primary); border-radius: 50%;
  animation: sc-pages-spin 0.85s linear infinite; margin: 0 auto 16px;
}

/* State box (error / empty) */
.sc-state-box {
  text-align: center; padding: 48px 28px;
}
.sc-state-box i { font-size: 40px; color: var(--sc-danger); margin-bottom: 12px; display: block; }
.sc-state-box.error i { color: var(--sc-danger); }

/* Summary bar */
.sc-summary-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  background: #fff; border: 1px solid var(--sc-gray-100); border-radius: var(--sc-radius-md);
  padding: 20px 24px; margin-bottom: 20px; box-shadow: var(--sc-shadow-sm);
}
.sc-summary-domain { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sc-domain-icon {
  width: 44px; height: 44px; background: rgba(85,51,255,0.1); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--sc-primary); flex-shrink: 0;
}
.sc-summary-domain h2 { font-size: 18px; font-weight: 800; margin: 0; color: #111827; word-break: break-all; }
.sc-summary-domain p { font-size: 12px; color: var(--sc-gray-400); margin: 2px 0 0; }
.sc-summary-stats { display: flex; gap: 20px; flex-wrap: wrap; }
.sc-sum-stat { text-align: center; }
.sc-sum-stat-val { font-size: 22px; font-weight: 800; color: var(--sc-primary); line-height: 1.1; }
.sc-sum-stat-val.success { color: var(--sc-success); }
.sc-sum-stat-val.warn    { color: var(--sc-warning); }
.sc-sum-stat-label { font-size: 11px; color: var(--sc-gray-400); font-weight: 600; margin-top: 2px; }

/* Resolver badge & lookup-again button */
.sc-resolver-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(85,51,255,0.08); color: var(--sc-primary);
  border: 1px solid rgba(85,51,255,0.2); border-radius: 20px;
  padding: 5px 12px; font-size: 12px; font-weight: 600;
}
.sc-lookup-again-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; background: var(--sc-primary); color: #fff; border: none;
  border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--sc-font); transition: background 0.2s;
}
.sc-lookup-again-btn:hover { background: var(--sc-primary-dark); }

/* Info bar */
.sc-info-bar {
  display: flex; align-items: flex-start; gap: 10px;
  background: rgba(85,51,255,0.04); border: 1px solid rgba(85,51,255,0.12);
  border-radius: var(--sc-radius-sm); padding: 12px 16px; margin-bottom: 20px;
  font-size: 13px; color: var(--sc-gray-600); line-height: 1.6;
}
.sc-info-bar i { color: var(--sc-primary); font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* Type navigation tabs */
.sc-type-nav {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px;
}
.sc-type-nav-btn {
  padding: 7px 16px; border-radius: 20px; font-size: 13px; font-weight: 600;
  background: #fff; color: var(--sc-gray-600); border: 1px solid var(--sc-gray-100);
  cursor: pointer; transition: all 0.2s; font-family: var(--sc-font);
}
.sc-type-nav-btn:hover, .sc-type-nav-btn.active {
  background: var(--sc-primary); border-color: var(--sc-primary); color: #fff;
}

/* Record type badges */
.sc-record-type-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.badge-A     { background: #dbeafe; color: #1d4ed8; }
.badge-AAAA  { background: #ede9fe; color: #6d28d9; }
.badge-MX    { background: #dcfce7; color: #15803d; }
.badge-NS    { background: #fef9c3; color: #854d0e; }
.badge-TXT   { background: #fee2e2; color: #b91c1c; }
.badge-CNAME { background: #ffedd5; color: #c2410c; }
.badge-SOA   { background: #f0fdf4; color: #166534; }
.badge-CAA   { background: #fce7f3; color: #9d174d; }
.badge-SRV   { background: #e0f2fe; color: #0369a1; }
.badge-PTR   { background: #f1f5f9; color: #475569; }
.badge-DS    { background: #fefce8; color: #713f12; }
.badge-DNSKEY{ background: #f0f9ff; color: #0c4a6e; }

/* DNS result tabs */
.sc-type-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 24px;
  background: #fff;
  border: 1px solid var(--sc-gray-100);
  border-radius: var(--sc-radius-md);
  padding: 10px 12px;
  box-shadow: var(--sc-shadow-sm);
}
.sc-type-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--sc-gray-600);
  font-family: var(--sc-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}
.sc-type-tab:hover {
  color: var(--sc-primary);
  background: var(--sc-primary-subtle);
}
.sc-type-tab.active {
  color: #fff;
  background: var(--sc-primary);
  border-color: var(--sc-primary);
  box-shadow: 0 6px 18px rgba(85,51,255,0.18);
}
.sc-tab-count {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--sc-gray-100);
  color: var(--sc-gray-600);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.sc-type-tab.active .sc-tab-count {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

/* DNS result cards */
.sc-record-card {
  display: none;
  overflow: hidden;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid var(--sc-gray-100);
  border-radius: var(--sc-radius-lg);
  box-shadow: 0 4px 20px rgba(11,14,26,0.06);
}
.sc-record-card.visible { display: block; }
.sc-record-card:hover { box-shadow: var(--sc-shadow-md); }
.sc-rc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px;
  background: #f6f7fb;
  border-bottom: 1px solid var(--sc-gray-100);
  cursor: pointer;
  user-select: none;
}
.sc-rc-header:hover { background: #f0f2f8; }
.sc-rc-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.sc-rc-title h4 {
  margin: 0;
  color: var(--sc-dark);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}
.sc-rc-title p {
  margin: 2px 0 0;
  color: var(--sc-gray-400);
  font-size: 12px;
  font-weight: 600;
}
.sc-rc-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sc-rc-count {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sc-gray-100);
  color: var(--sc-gray-600);
  font-size: 12px;
  font-weight: 700;
}
.sc-rc-toggle {
  color: var(--sc-gray-400);
  font-size: 18px;
  transition: transform 0.2s ease;
}
.sc-record-card.collapsed .sc-rc-toggle { transform: rotate(-90deg); }
.sc-record-card.collapsed .sc-rc-body { display: none; }
.sc-rc-body { background: #fff; }

/* DNS record tables */
.sc-dns-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.sc-dns-table thead tr { background: #fbfcff; }
.sc-dns-table th {
  padding: 11px 20px;
  color: var(--sc-gray-400);
  border-bottom: 1px solid var(--sc-gray-100);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.sc-dns-table td {
  padding: 13px 20px;
  border-bottom: 1px solid #f3f4f8;
  color: var(--sc-gray-600);
  font-size: 13px;
  line-height: 1.45;
  vertical-align: middle;
}
.sc-dns-table tr:last-child td { border-bottom: none; }
.sc-dns-table tbody tr:hover td { background: #fbfcff; }
.sc-dns-table .td-name,
.sc-dns-table .td-value,
.sc-dns-table .td-ttl {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.sc-dns-table .td-name {
  color: var(--sc-dark);
  font-weight: 600;
  word-break: break-word;
}
.sc-dns-table .td-value {
  color: var(--sc-primary-dark);
  font-weight: 500;
  word-break: break-all;
}
.sc-dns-table .td-ttl {
  color: var(--sc-gray-600);
  white-space: nowrap;
}
.sc-dns-table .td-copy {
  width: 52px;
  padding-left: 8px;
  text-align: center;
}
.sc-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--sc-gray-100);
  border-radius: 7px;
  background: #fff;
  color: var(--sc-gray-400);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}
.sc-copy-btn:hover {
  background: var(--sc-primary-subtle);
  border-color: rgba(85,51,255,0.22);
  color: var(--sc-primary);
}
.sc-copy-btn.copied {
  background: rgba(0,196,140,0.1);
  border-color: rgba(0,196,140,0.24);
  color: var(--sc-success);
}
.sc-mx-priority {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px;
  font-weight: 800;
}
.sc-nxdomain {
  margin: 0;
  padding: 16px 22px;
  background: rgba(85,51,255,0.035);
  border-left: 3px solid rgba(85,51,255,0.55);
  color: var(--sc-gray-600);
  font-size: 13px;
  line-height: 1.55;
}

@media(max-width:767px) {
  .sc-summary-bar { align-items: flex-start; }
  .sc-summary-stats { width: 100%; justify-content: space-between; gap: 12px; }
  .sc-type-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 12px; }
  .sc-type-tab { flex-shrink: 0; }
  .sc-rc-header { align-items: flex-start; padding: 14px 16px; }
  .sc-record-type-badge { min-width: 46px; }
  .sc-dns-table th,
  .sc-dns-table td { padding: 10px 12px; font-size: 12px; }
  .sc-dns-table .td-copy { width: 42px; }
}

/* Mature DNS lookup finish */
.sc-results-section {
  background: #f6f7fb;
}
.sc-results-section .container {
  max-width: 1180px;
}
.sc-summary-bar {
  border-radius: 10px;
  border-color: #dfe3ec;
  box-shadow: 0 8px 24px rgba(15,23,42,0.06);
}
.sc-domain-icon {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: #eef2ff;
}
.sc-summary-domain h2 {
  color: #0f172a;
  font-size: 17px;
  letter-spacing: 0;
}
.sc-summary-domain p,
.sc-sum-stat-label {
  color: #64748b;
}
.sc-sum-stat-val {
  color: #1d4ed8;
  font-size: 20px;
}
.sc-resolver-badge {
  background: #f8fafc;
  border-color: #d8deea;
  color: #334155;
  border-radius: 8px;
}
.sc-lookup-again-btn {
  border-radius: 8px;
  background: #1f2a44;
  box-shadow: none;
}
.sc-lookup-again-btn:hover {
  background: #111827;
}
.sc-info-bar {
  background: #f8fafc;
  border-color: #dfe3ec;
  color: #475569;
  border-radius: 8px;
}
.sc-info-bar a {
  color: #1d4ed8 !important;
}
.sc-type-nav {
  gap: 4px;
  padding: 8px;
  border-color: #dfe3ec;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(15,23,42,0.04);
}
.sc-type-tab {
  min-height: 34px;
  padding: 8px 13px;
  border-radius: 7px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}
.sc-type-tab:hover {
  background: #f1f5f9;
  color: #1d4ed8;
}
.sc-type-tab.active {
  background: #1f2a44;
  border-color: #1f2a44;
  color: #fff;
  box-shadow: none;
}
.sc-tab-count {
  background: #e8edf5;
  color: #475569;
}
.sc-record-card {
  border-color: #dfe3ec;
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(15,23,42,0.045);
}
.sc-record-card:hover {
  box-shadow: 0 10px 26px rgba(15,23,42,0.06);
}
.sc-rc-header {
  padding: 18px 22px;
  background: #f8fafc;
  border-bottom-color: #dfe3ec;
}
.sc-rc-header:hover {
  background: #f4f7fb;
}
.sc-rc-title h4 {
  color: #0f172a;
  font-size: 15px;
  letter-spacing: 0;
}
.sc-rc-title p,
.sc-rc-count {
  color: #64748b;
}
.sc-rc-count {
  background: #e8edf5;
  border-radius: 7px;
}
.sc-record-type-badge {
  min-width: 58px;
  border-radius: 7px;
  font-family: var(--sc-font);
  letter-spacing: 0.03em;
}
.badge-A,
.badge-AAAA,
.badge-CNAME,
.badge-MX,
.badge-NS,
.badge-TXT,
.badge-SOA,
.badge-CAA,
.badge-SRV,
.badge-PTR,
.badge-DS,
.badge-DNSKEY {
  background: #edf2f7;
  color: #334155;
}
.badge-A { border-left: 3px solid #2563eb; }
.badge-AAAA { border-left: 3px solid #475569; }
.badge-MX { border-left: 3px solid #059669; }
.badge-NS { border-left: 3px solid #ca8a04; }
.badge-TXT { border-left: 3px solid #7c3aed; }
.badge-CNAME { border-left: 3px solid #ea580c; }
.badge-SOA { border-left: 3px solid #0284c7; }
.badge-CAA,
.badge-DS,
.badge-DNSKEY { border-left: 3px solid #64748b; }
.sc-dns-table {
  background: #fff;
}
.sc-dns-table thead tr {
  background: #fbfcfe;
}
.sc-dns-table th {
  padding: 12px 22px;
  color: #64748b;
  border-bottom-color: #dfe3ec;
  font-size: 11px;
}
.sc-dns-table td {
  padding: 14px 22px;
  border-bottom-color: #edf1f6;
  color: #334155;
}
.sc-dns-table tbody tr:hover td {
  background: #f8fafc;
}
.sc-dns-table .td-name {
  color: #0f172a;
  font-family: var(--sc-font);
  font-size: 13.5px;
  font-weight: 700;
}
.sc-dns-table .td-value {
  color: #1e3a8a;
  font-size: 13px;
}
.sc-dns-table .td-ttl {
  color: #475569;
  font-size: 12px;
}
.sc-copy-btn {
  border-color: #dfe3ec;
  border-radius: 7px;
  color: #64748b;
}
.sc-copy-btn:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.sc-mx-priority {
  min-width: 36px;
  background: #ecfdf5;
  color: #047857;
  font-family: var(--sc-font);
}
.sc-nxdomain {
  background: #fbfcfe;
  border-left-color: #94a3b8;
  color: #475569;
}

/* Professional DNS console refinement */
.sc-results-section {
  background: #f5f7fa;
}
.sc-results-section .container {
  max-width: 1240px;
}
.sc-summary-bar {
  border-radius: 8px;
  border: 1px solid #d9dee8;
  box-shadow: none;
}
.sc-info-bar {
  border-radius: 8px;
  box-shadow: none;
}
.sc-type-nav {
  gap: 22px;
  align-items: flex-end;
  margin: 4px 0 22px;
  padding: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #d9dee8;
  border-radius: 0;
  box-shadow: none;
}
.sc-type-tab {
  min-height: 0;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  box-shadow: none;
}
.sc-type-tab:hover {
  background: transparent;
  color: #111827;
  border-bottom-color: #cbd5e1;
}
.sc-type-tab.active {
  background: transparent;
  border: 0;
  border-bottom: 2px solid #1f2a44;
  color: #111827;
  box-shadow: none;
}
.sc-tab-count {
  min-width: 20px;
  padding: 1px 7px;
  background: #e5eaf2;
  color: #475569;
  font-size: 11px;
}
.sc-type-tab.active .sc-tab-count {
  background: #1f2a44;
  color: #fff;
}
.sc-record-card {
  border-color: #d9dee8;
  border-radius: 8px;
  box-shadow: none;
}
.sc-record-card:hover {
  box-shadow: none;
}
.sc-rc-header {
  padding: 15px 20px;
  background: #fff;
  border-bottom-color: #d9dee8;
}
.sc-rc-header:hover {
  background: #fff;
}
.sc-rc-title {
  gap: 14px;
}
/* ---------------------------------------------------------------------------
   DNS RESULT LEGIBILITY.

   Third of three overlapping blocks styling this table - the later ones were
   layered on rather than merged, so THIS block is the one that renders. Edit
   here, not by appending a fourth.

   #718096 measured 4.02:1 on white and 3.85:1 on the #f8fafc header row,
   under AA's 4.5:1, and it was carrying the 10.5px column labels. Replaced
   with #4A5568 (7.53:1 / 7.19:1).

   The value column was also the quietest cell in the row - 12.5px at weight
   500, lighter than the name beside it - even though the record value is the
   thing the lookup was run to find. It now leads the row.
   --------------------------------------------------------------------------- */
.sc-record-type-badge {
  min-width: 54px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid #cfd7e4;
  border-left-width: 3px;
  border-radius: 6px;
  background: #f8fafc !important;
  color: #334155 !important;
  font-size: 11px;
}
.sc-rc-title h4 {
  font-size: 14px;
  font-weight: 800;
}
.sc-rc-title p {
  color: #4A5568;
  font-size: 12px;
  font-weight: 600;
}
.sc-rc-count {
  padding: 4px 9px;
  border-radius: 6px;
  background: #eef2f7;
  color: #334155;
}
.sc-dns-table thead tr {
  background: #f8fafc;
}
.sc-dns-table th {
  padding: 10px 20px;
  color: #4A5568;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.sc-dns-table td {
  padding: 12px 20px;
  color: #334155;
  font-size: 13px;
}
.sc-dns-table .td-name {
  color: #111827;
  font-family: var(--sc-font);
  font-size: 13px;
  font-weight: 700;
}
.sc-dns-table .td-value {
  color: #1f2a44;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 13.5px;
  font-weight: 600;
}
.sc-dns-table .td-ttl {
  color: #475569;
  font-family: var(--sc-font);
  font-size: 13px;
}
.sc-copy-btn {
  width: 28px;
  height: 28px;
  border-color: #d9dee8;
  border-radius: 6px;
  color: #4A5568;
}
.sc-copy-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  color: #1f2a44;
}
.sc-mx-priority {
  border-radius: 6px;
  background: #eef2f7;
  color: #1f2a44;
  font-size: 12px;
}
.sc-nxdomain {
  padding: 14px 20px;
  background: #fff;
  border-left-color: #cbd5e1;
  color: #475569;
}

/* Slide-in animation for results */
.sc-anim { animation: scSlideIn 0.35s ease both; }
@keyframes scSlideIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════
   23. DOMAIN AUCTION PAGE
   ════════════════════════════════════════════════════════════ */
.domain-auction-embed-card {
  background: #fff; border: 1px solid var(--sc-gray-100); border-radius: var(--sc-radius-md);
  padding: 32px 28px;
}
.domain-auction-embed-card h3 { font-size: 18px; font-weight: 700; color: #111827; margin-bottom: 8px; }
.domain-auction-embed-card > p { font-size: 14px; color: var(--sc-gray-400); margin-bottom: 20px; }

/* Stats bar */
.auction-stats-bar {
  display: flex; gap: 20px; background: var(--sc-gray-50); border-radius: var(--sc-radius-sm);
  padding: 16px 20px; margin-bottom: 20px; flex-wrap: wrap;
}
.stat-block { text-align: center; flex: 1; min-width: 80px; }
.stat-num { display: block; font-size: 24px; font-weight: 900; color: var(--sc-primary); line-height: 1.1; }
.stat-desc { display: block; font-size: 11px; color: var(--sc-gray-400); margin-top: 3px; font-weight: 600; }

/* Toolbar */
.auction-toolbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap;
}
.auction-search {
  flex: 1; display: flex; align-items: center; gap: 8px;
  background: var(--sc-gray-50); border: 1px solid var(--sc-gray-100); border-radius: 8px;
  padding: 9px 14px; min-width: 180px;
}
.auction-search i { color: var(--sc-gray-400); font-size: 16px; flex-shrink: 0; }
.auction-search input {
  flex: 1; border: none; background: none; outline: none;
  font-size: 14px; color: #111827; font-family: var(--sc-font);
}
.auction-sort select {
  padding: 9px 12px; border: 1px solid var(--sc-gray-100); border-radius: 8px;
  font-size: 13px; color: #374151; background: #fff; outline: none;
  font-family: var(--sc-font); cursor: pointer;
}
.auction-count {
  font-size: 13px; color: var(--sc-gray-400); white-space: nowrap;
}

/* Loading state */
.auction-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 48px 20px; color: var(--sc-gray-400); font-size: 14px;
}
.auction-loading i { font-size: 22px; animation: sc-pages-spin 0.9s linear infinite; }

/* Auction list */
.auction-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auction-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid rgba(85,51,255,0.08);
  border-radius: 12px;
  text-decoration: none !important;
  transition: all 0.2s ease;
}
.auction-item:hover {
  border-color: rgba(85,51,255,0.2);
  box-shadow: 0 8px 20px rgba(85,51,255,0.08);
  transform: translateY(-1px);
}
.auction-item-domain {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.domain-name {
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.auction-item:hover .domain-name {
  color: var(--sc-primary);
}
.domain-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  color: var(--sc-gray-400);
  font-size: 11.5px;
  font-weight: 600;
}
.domain-meta .sep {
  opacity: 0.45;
}
.appraisal-badge {
  color: var(--sc-success);
  font-weight: 800;
}
.auction-item-stat {
  min-width: 76px;
  text-align: center;
}
.stat-value {
  color: #111827;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}
.stat-value.price {
  color: var(--sc-primary);
}
.stat-label {
  color: var(--sc-gray-400);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.time-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(0,196,140,0.1);
  color: var(--sc-success);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.time-badge.ending-soon {
  background: rgba(255,71,87,0.1);
  color: var(--sc-danger);
}
.auction-item-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  padding: 0 16px;
  background: var(--sc-primary);
  color: #fff !important;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none !important;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.auction-item:hover .auction-item-cta {
  background: var(--sc-primary-dark);
  box-shadow: 0 6px 14px rgba(85,51,255,0.22);
}
.auction-empty {
  padding: 42px 20px;
  border: 1px dashed rgba(85,51,255,0.18);
  border-radius: 12px;
  background: var(--sc-gray-50);
  color: var(--sc-gray-400);
  text-align: center;
  font-size: 14px;
}
.auction-empty p {
  margin: 0 0 6px;
}
.auction-empty-sub {
  font-size: 12.5px;
}

/* Pagination */
.auction-pagination {
  display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
  padding: 20px 0 4px;
}
.auction-pagination button {
  padding: 7px 13px; border: 1px solid var(--sc-gray-100); border-radius: 6px;
  background: #fff; font-size: 13px; font-weight: 600; cursor: pointer;
  color: var(--sc-gray-600); font-family: var(--sc-font); transition: all 0.2s;
}
.auction-pagination button.active,
.auction-pagination button:hover { background: var(--sc-primary); color: #fff; border-color: var(--sc-primary); }

/* Powered-by */
.powered-by {
  font-size: 12px; color: var(--sc-gray-400); text-align: right; margin-top: 12px;
}
.powered-by a { color: var(--sc-primary); text-decoration: none; font-weight: 600; }
.powered-by a:hover { text-decoration: underline; }

/* Quick-links sidebar card */
.quick-links-card {
  background: #fff; border: 1px solid var(--sc-gray-100); border-radius: var(--sc-radius-md);
  padding: 24px 20px;
}
.quick-links-card h5 { font-size: 14px; font-weight: 700; color: #111827; margin-bottom: 14px; }
.quick-links-card a {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-radius: 8px; font-size: 14px; color: #374151; text-decoration: none;
  transition: all 0.15s; border: 1px solid transparent;
}
.quick-links-card a:hover {
  background: rgba(85,51,255,0.05); border-color: rgba(85,51,255,0.15); color: var(--sc-primary);
}
.quick-links-card a i { font-size: 14px; color: var(--sc-primary); }

/* Feature cards row */
.auction-features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px;
}
.auction-feature-card {
  background: #fff; border: 1px solid var(--sc-gray-100); border-radius: var(--sc-radius-md);
  padding: 24px 20px; text-align: center;
}
.auction-feature-card h5 { font-size: 15px; font-weight: 700; color: #111827; margin: 12px 0 8px; }
.auction-feature-card p { font-size: 13px; color: var(--sc-gray-400); margin: 0; line-height: 1.6; }
.feature-icon {
  width: 52px; height: 52px; background: rgba(85,51,255,0.1); border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--sc-primary); margin: 0 auto;
}
@media (max-width: 767px) {
  .auction-item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }
  .auction-item-stat {
    min-width: 0;
    text-align: left;
  }
  .auction-item-stat .stat-value,
  .auction-item-stat .stat-label {
    display: inline;
  }
  .auction-item-stat .stat-label {
    margin-left: 5px;
  }
  .auction-item-cta {
    width: 100%;
  }
  .auction-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .auction-sort select {
    width: 100%;
  }
  .auction-stats-bar {
    gap: 12px;
  }
  .auction-features {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════
   24. FOOTER TRUST STRIP
   ════════════════════════════════════════════════════════════ */
.sc-footer-trust {
  background: rgba(15,15,30,0.6); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(85,51,255,0.1); padding: 28px 0;
}
.sc-trust-grid {
  display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center;
}
@media (min-width: 768px) { .sc-trust-grid { grid-template-columns: 1.2fr 1.5fr 1fr; gap: 40px; } }
.sc-icann-section { display: flex; align-items: center; gap: 14px; }
.sc-icann-logo {
  flex-shrink: 0; width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(85,51,255,0.1); border-radius: 50%; overflow: hidden;
}
.sc-icann-logo img { width: 100%; height: 100%; object-fit: contain; }
.sc-icann-text { color: #e0e0e0; font-size: 13px; line-height: 1.5; }
.sc-abbr { color: #5533FF; text-decoration: none; border-bottom: 1px dotted #5533FF; cursor: help; }
.sc-text-muted { color: #888; font-size: 12px; }
.sc-mb-0 { margin-bottom: 0; }
.sc-text-small { font-size: 13px; }
.sc-badges-section { display: flex; justify-content: center; }
.sc-badge-row { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.sc-badge-link { display: block; transition: opacity 0.2s; text-decoration: none; }
.sc-badge-link:hover { opacity: 0.8; }
@media (max-width: 767px) {
  .sc-badge-row { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; }
}

/* ════════════════════════════════════════════════════════════
   25. PAYMENT BADGES (footer bottom bar)
   ════════════════════════════════════════════════════════════ */
.sc-payment-section { text-align: center; }
.sc-section-label { color: #a0a6bb; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; font-weight: 700; }
.sc-payment-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.sc-pay-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 34px; border-radius: 8px; background: #fff;
  border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  transition: transform 0.18s, box-shadow 0.18s; cursor: default;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1;
}
.sc-pay-badge:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,0.24); }
.sc-pay-visa { color: #1a1f71; font-size: 17px; font-weight: 900; font-style: italic; letter-spacing: -0.08em; }
.sc-pay-mastercard { position: relative; gap: 0; background: #fff; }
.sc-pay-mastercard span { width: 20px; height: 20px; border-radius: 50%; display: block; }
.sc-pay-mastercard span:first-child { background: #eb001b; margin-right: -7px; }
.sc-pay-mastercard span:last-child { background: #f79e1b; mix-blend-mode: multiply; }
.sc-pay-paypal { color: #003087; font-size: 24px; font-weight: 900; font-style: italic; letter-spacing: -0.04em; }
.sc-pay-paypal span { color: #009cde; font-size: 9px; font-weight: 800; font-style: normal; margin-left: 1px; letter-spacing: -0.02em; transform: translateY(3px); }
.sc-pay-amex { background: linear-gradient(180deg, #2e9be8 0%, #016fd0 100%); border-color: #2e9be8; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: 0.05em; }
.sc-pay-discover { color: #231f20; font-size: 9px; font-weight: 900; letter-spacing: 0.02em; position: relative; overflow: hidden; }
.sc-pay-discover span { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #f59e0b, #f97316); margin: 0 -1px; display: inline-block; }
.sc-pay-btc { background: #f7931a; border-color: #f7931a; color: #fff; font-size: 20px; font-weight: 900; }
@media (min-width: 992px) {
  .sc-payment-section { padding-right: 72px; }
}

/* WHOIS lookup results */
.sc-whois-card { background: #fff; border: 1px solid #eceef7; border-radius: 18px; padding: 28px; box-shadow: 0 18px 48px rgba(17, 24, 39, 0.08); }
.sc-whois-card--error { border-color: rgba(239, 68, 68, 0.22); background: linear-gradient(180deg, #fff 0%, #fff7f7 100%); }
.sc-whois-card--success { border-color: rgba(85, 51, 255, 0.14); }
.sc-whois-card h3 { color: #111827; font-size: 24px; font-weight: 900; margin: 0 0 8px; }
.sc-whois-card p { color: #667085; margin: 0; }
.sc-whois-card-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid #eef1f7; }
.sc-whois-card-head span, .sc-whois-grid span, .sc-whois-ns > span { display: block; color: #8a92a6; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.sc-whois-action { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border-radius: 10px; background: var(--sc-primary); color: #fff; font-weight: 800; font-size: 13px; text-decoration: none; white-space: nowrap; }
.sc-whois-action:hover { background: var(--sc-primary-dark); color: #fff; text-decoration: none; }
.sc-whois-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sc-whois-grid > div, .sc-whois-ns { background: #f8f9fd; border: 1px solid #eef1f7; border-radius: 14px; padding: 16px; }
.sc-whois-grid strong { display: block; color: #111827; font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }
.sc-whois-ns { margin-top: 14px; }
.sc-whois-ns ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0; }
.sc-whois-ns li { color: #344054; font-size: 13.5px; font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 767px) {
  .sc-whois-card { padding: 20px; }
  .sc-whois-card-head { align-items: flex-start; flex-direction: column; }
  .sc-whois-grid { grid-template-columns: 1fr; }
  .sc-whois-ns ul { grid-template-columns: 1fr; }
  .sc-whois-action { width: 100%; }
}

/* WHOIS detailed report layout.

   No max-width of its own. This block lives inside .x-wrap, which already
   sets the page measure, and capping it lower left the results sitting
   116px in from both edges while the section immediately below ran the
   full width - the report looked pushed aside rather than part of the
   page. The suggestion rows in particular want the whole measure: they
   carry the name at one end and the price and button at the other. */
.sc-whois-results {
  width: 100%;
  margin: 0 auto;
}
/* THE LAST BLOCK CARRIES ITS OWN MARGIN, and it used to stack:

     .sc-whois-cta margin-bottom   20px
   + #whoisResults padding-bottom  62px
   + the next section's top        62px
   = 144px of nothing under the results.

   The engine's blocks each end with a margin so they space against each other;
   the last one has nothing to space against. */
.sc-whois-results > *:last-child { margin-bottom: 0; }
/* The results block already ends in a padded card, so a full 62px section
   padding under it as well leaves a conspicuous hole before the next section.
   ID + class beats .sx .x-sec on specificity, so this holds regardless of
   stylesheet order. */
#whoisResults.x-sec { padding-bottom: 34px; }

/* I TIGHTENED THE SPACE ABOVE THIS AND IT WAS THE WRONG DIRECTION.
   The complaint was that the results sit too close to the top, and I read
   "gap issue" as too much space and cut it to 22px - which made exactly the
   thing being reported worse. The results section keeps the site's normal
   section spacing above it now, like every other section on every other page.
   No :has(), no special case. */
.sc-whois-domain-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  text-align: left;
  padding: 28px 24px;
  background: linear-gradient(135deg, rgba(85,51,255,0.04), rgba(0,212,255,0.03));
  border-radius: 16px;
  border: 1px solid rgba(85,51,255,0.1);
  margin-bottom: 24px;
}
.sc-whois-domain-main { min-width: 0; }
.sc-whois-domain-name {
  font-size: 28px;
  font-weight: 900;
  color: #111827;
  margin-bottom: 4px;
  word-break: break-all;
  /* No text-transform at all. This briefly carried `lowercase`, which fixed
     the heading and left the subtitle beside it still shouting - because the
     capitals come from RDAP's ldhName, not from styling. The value is
     lowercased in the engine now, so the data is right and the CSS does not
     have to paper over it. */
}
.sc-whois-domain-sub {
  font-size: 13px;
  color: #8a92a6;
  font-weight: 700;
}
.sc-whois-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  margin-top: 6px;
  background: none;
  border: none;
  padding: 0;
  color: #8a92a6;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s;
}
.sc-whois-refresh-btn:hover:not(:disabled) {
  color: var(--sc-primary);
}
.sc-whois-refresh-btn:disabled {
  cursor: default;
  opacity: 0.7;
}
.sc-whois-refresh-btn i {
  font-size: 15px;
  line-height: 1;
  color: var(--sc-primary);
}
.sc-whois-refresh-btn.is-spinning i {
  animation: sc-whois-spin 0.8s linear infinite;
}
@keyframes sc-whois-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.sc-whois-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e8ebf3;
  box-shadow: 0 4px 20px rgba(11,14,26,0.06);
  overflow: hidden;
  margin-bottom: 20px;
  padding: 0;
}
.sc-whois-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  background: #f4f5f9;
  border-bottom: 1px solid #e8ebf3;
}
.sc-whois-card-header i {
  font-size: 18px;
  color: var(--sc-primary);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(85,51,255,0.1);
  border-radius: 9px;
  flex-shrink: 0;
}
.sc-whois-card-header h4 {
  font-size: 16px;
  font-weight: 800;
  color: #111827;
  margin: 0;
}
.sc-whois-card-body {
  padding: 0;
}
.sc-whois-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 13px 24px;
  border-bottom: 1px solid #f1f3f7;
}
.sc-whois-row:last-child {
  border-bottom: 0;
}
.sc-whois-label {
  min-width: 160px;
  flex-shrink: 0;
  color: #8a92a6;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sc-whois-value {
  color: #111827;
  font-size: 14px;
  font-weight: 600;
  word-break: break-word;
}
.sc-whois-value a {
  color: var(--sc-primary);
  text-decoration: none;
}
.sc-whois-value a:hover {
  text-decoration: underline;
}
.sc-whois-date-iso {
  color: #8a92a6;
  font-size: 12px;
  font-weight: 600;
}
.sc-whois-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(0,196,140,0.12);
  color: #008d68;
  margin: 2px 4px 2px 0;
}
.sc-whois-status.warn {
  background: rgba(255,176,32,0.13);
  color: #ad7100;
}
.sc-whois-status.info {
  background: rgba(85,51,255,0.1);
  color: var(--sc-primary);
}
.sc-whois-status.danger {
  background: rgba(255,71,87,0.12);
  color: #d63040;
}
.sc-whois-loading {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border: 1px solid #e8ebf3;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(11,14,26,0.06);
}
.sc-whois-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #eef1f7;
  border-top-color: var(--sc-primary);
  border-radius: 50%;
  animation: sc-spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
.sc-whois-loading p {
  color: #111827;
  margin: 0;
  font-weight: 700;
}
.sc-whois-loading-sub {
  color: #8a92a6 !important;
  font-size: 12px;
  margin-top: 4px !important;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }
.sc-whois-error,
.sc-whois-invalid-tld,
.sc-whois-cta {
  text-align: center;
  padding: 48px 32px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e8ebf3;
  box-shadow: 0 4px 20px rgba(11,14,26,0.06);
  margin-bottom: 20px;
}
.sc-whois-error i,
.sc-whois-invalid-tld i {
  display: block;
  font-size: 44px;
  color: #ff4757;
  margin-bottom: 14px;
}
.sc-whois-error--notice i {
  color: var(--sc-primary);
}
.sc-whois-invalid-tld i {
  color: #ffb020;
}
.sc-whois-error h4,
.sc-whois-invalid-tld h4,
.sc-whois-cta h4 {
  color: #111827;
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 8px;
}
.sc-whois-error p,
.sc-whois-invalid-tld p,
.sc-whois-cta p {
  color: #667085;
  margin: 0 auto 16px;
  max-width: 560px;
}

/* THE PARAGRAPH SAT LEFT WHILE THE HEADING AND BUTTON WERE CENTRED.

   The card already sets text-align: center and the paragraph already has
   margin: 0 auto, so on paper this should not happen and nothing in any
   stylesheet overrides it - I could not reproduce the cause from the CSS.

   Rather than leave it depending on inheritance from a grouped selector three
   rules up, the centring is stated on the elements themselves. Explicit beats
   clever here: this is a card with three centred children and it should say so
   directly.

   max-width also goes to a `ch` measure, so the line breaks on the text rather
   than on a pixel count that happened to sit just under the sentence length. */
/* CENTRED BY THE CONTAINER, NOT BY EACH CHILD.

   The previous approach was text-align on the card plus margin:auto on
   every child, and the note above records it failing without an
   explainable cause. It has a real failure mode: auto margins only
   centre a block-level box whose width resolves, so any child that ends
   up shrink-to-fit, inline-level, or subject to a later margin shorthand
   silently drops back to the left while its siblings stay centred. That
   is exactly what the paragraph did.

   A flex column centres its children regardless of their own width,
   display or margins. text-align stays for the second line of a
   paragraph that wraps. */
.sc-whois-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sc-whois-cta > * { max-width: 100%; }
/* The button is the last thing and wants clear air above it, not the
   same 16px that separates two lines of text. Only the margin here: the
   shared .sc-whois-cta a rule further down has identical specificity and
   comes later, so size and padding have to be stated AFTER it. */
.sc-whois-cta > a { margin-top: 26px; }
.sc-whois-cta > h4,
.sc-whois-cta > p  { text-align: center; }

/* One step down per element, so the eye has an order to read them in. */
.sc-whois-cta > h4 {
  font-size: 23px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  text-wrap: balance;
}

/* A measure for the sentence, not for the card. 46ch breaks this copy
   into even lines; at the old 52ch it split after "so it" and left a
   two-word orphan hanging under a full line. balance handles the rest
   when a translation changes the length. */
.sc-whois-cta > p {
  max-width: 46ch;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: #667085;
  text-wrap: pretty;
}

/* The price on the available card. It carries the renewal figure next to
   the first year, which is the rule the rest of the site follows and this
   page could not until tld-price.php started returning the second number.
   Reads as a fact under the sentence, not as a second headline - the
   decision on this card is the name, and the price is what makes that
   decision honest rather than what shouts for it. */
.sc-whois-cta .sc-whois-avail-price {
  display: block;
  margin: 16px 0 0;
  font-size: 16px;
  font-weight: 600;
  color: #0f766e;
  font-variant-numeric: tabular-nums;
}
.sc-whois-cta {
  background: linear-gradient(135deg, rgba(0,196,140,0.06), rgba(0,212,255,0.04));
  border-color: rgba(0,196,140,0.18);
}
.sc-whois-cta a,
.sc-suggest-buy,
.sc-whois-invalid-tld .sc-suggest-corrected a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 22px;
  background: var(--sc-primary);
  color: #fff;
  border-radius: 8px;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s ease;
}
/* Larger than the suggestion-row Buy buttons it shares a rule with. This
   one is the single action on the card; those are one of eight in a list. */
.sc-whois-cta > a { font-size: 14px; padding: 12px 26px; }
.sc-whois-cta a:hover,
.sc-suggest-buy:hover,
.sc-whois-invalid-tld .sc-suggest-corrected a:hover {
  background: var(--sc-primary-dark);
  color: #fff;
  transform: translateY(-1px);
  text-decoration: none;
}
.sc-whois-suggestions {
  margin: 28px 0 20px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #e8ebf3;
  box-shadow: 0 4px 20px rgba(11,14,26,0.06);
  overflow: hidden;
}
.sc-whois-suggestions-header {
  padding: 18px 24px;
  background: linear-gradient(135deg, rgba(85,51,255,0.04), rgba(0,212,255,0.03));
  border-bottom: 1px solid #e8ebf3;
}
.sc-whois-suggestions-header h4 {
  font-size: 16px;
  font-weight: 900;
  color: #111827;
  margin: 0 0 4px;
}
.sc-whois-suggestions-header h4 i {
  color: var(--sc-primary);
  margin-right: 6px;
}
.sc-whois-suggestions-header p {
  margin: 0;
  color: #8a92a6;
  font-size: 13px;
}
.sc-suggest-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid #f1f3f7;
}
.sc-suggest-item:last-child {
  border-bottom: 0;
}
.sc-suggest-domain {
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  word-break: break-all;
}
.sc-suggest-tld {
  color: var(--sc-primary);
}
.sc-suggest-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.sc-suggest-buy {
  min-width: 82px;
  padding: 8px 14px;
}
.sc-suggest-buy.sc-suggest-whois {
  background: #252b45;
}
.sc-suggest-status,
.sc-suggest-checking {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 800;
}
.sc-suggest-status.available {
  background: rgba(0,196,140,0.12);
  color: #008d68;
}
.sc-suggest-status.taken {
  background: rgba(255,71,87,0.09);
  color: #d63040;
}
.sc-suggest-checking {
  color: #8a92a6;
}
.sc-suggest-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa1b6;
}
.sc-suggest-dot.available { background: #00c48c; }
.sc-suggest-dot.taken { background: #ff4757; }
.sc-suggest-price {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 800;
  color: var(--sc-primary);
}
.sc-suggest-corrected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 8px 0 18px;
}
@media (max-width: 767px) {
  .sc-whois-domain-header { flex-direction: column; align-items: flex-start; }
  .sc-whois-domain-name { font-size: 22px; }
  .sc-whois-refresh-btn { margin-top: 4px; }
  .sc-whois-card-header { padding: 14px 16px; }
  .sc-whois-row { flex-direction: column; gap: 5px; padding: 11px 16px; }
  .sc-whois-label { min-width: 0; font-size: 11px; }
  .sc-whois-value { font-size: 13px; }
  .sc-suggest-item { padding: 13px 16px; }
  .sc-suggest-actions { align-items: flex-end; flex-direction: column; gap: 8px; }
  .sc-suggest-buy { min-width: 76px; }
}

/* ════════════════════════════════════════════════════════════
   26. HOMEPAGE SHOWCASE SECTION
   ════════════════════════════════════════════════════════════ */
.sc-showcase-section { padding: 70px 0 80px; background: linear-gradient(180deg,#fff 0%,#f8f9fb 100%); }
.sc-showcase-section .section-heading h2 { font-size: 36px !important; font-weight: 800 !important; color: #111827 !important; line-height: 1.2 !important; margin-bottom: 14px !important; }
.sc-showcase-section .section-heading p { color: #6b7280; font-size: 16px; line-height: 1.65; margin-bottom: 28px; }
.sc-showcase-list { list-style: none; padding: 0; margin: 0 0 32px 0; }
.sc-showcase-list li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: #374151; padding: 7px 0; border-bottom: 1px solid #f3f4f6; }
.sc-showcase-list li:last-child { border-bottom: none; }
.sc-showcase-list li i { color: var(--sc-success); font-size: 18px; flex-shrink: 0; }
.sc-showcase-cta {
  display: inline-flex !important; align-items: center;
  padding: 14px 32px !important; font-size: 15px !important; font-weight: 700 !important;
  border-radius: 10px !important; text-decoration: none;
  background: var(--sc-primary) !important; color: #fff !important;
  box-shadow: 0 6px 20px rgba(85,51,255,0.22); transition: all 0.25s ease !important;
}
.sc-showcase-cta:hover { background: var(--sc-primary-dark) !important; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(85,51,255,0.28); color: #fff !important; }
.sc-showcase-media-wrap { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 24px 64px rgba(85,51,255,0.12),0 8px 24px rgba(0,0,0,0.08); border: 1.5px solid rgba(85,51,255,0.12); background: #f4f5f8; }
.sc-showcase-gif { width: 100%; height: auto; display: block; border-radius: 18px; position: relative; z-index: 1; }
.sc-showcase-glow { position: absolute; bottom: -40px; right: -40px; width: 220px; height: 220px; background: radial-gradient(circle,rgba(85,51,255,0.15) 0%,transparent 70%); border-radius: 50%; pointer-events: none; z-index: 0; }
@media (max-width: 991px) {
  .sc-showcase-section { padding: 50px 0 60px; }
  .sc-showcase-section .section-heading { text-align: center; }
  .sc-showcase-section .section-heading h2 { font-size: 28px !important; }
  .sc-showcase-list { text-align: left; max-width: 480px; margin: 0 auto 28px; }
  .sc-showcase-cta { display: block !important; text-align: center; width: 100%; max-width: 320px; margin: 0 auto; }
}
@media (max-width: 575px) {
  .sc-showcase-section .section-heading h2 { font-size: 24px !important; }
  .sc-showcase-section .section-heading p { font-size: 14px; }
  .sc-showcase-list li { font-size: 14px; }
  .sc-showcase-media-wrap { border-radius: 14px; }
}

/* ════════════════════════════════════════════════════════════
   28. BANNER HERO MODIFIERS (sparse content pages)
   ════════════════════════════════════════════════════════════ */
/* Slim hero: for pages with only h1+p (no form or image) */
.banner.one.banner-slim {
  padding-top: 90px !important;
  padding-bottom: 70px !important;
  min-height: unset !important;
}

/* Shared fix for slim pages that sit under the absolute global header. */
.banner.one.banner-slim.sc-page-hero {
  padding-top: 210px !important;
  padding-bottom: 96px !important;
}
.sc-page-hero .banner-heading h1 {
  font-size: clamp(40px, 4.6vw, 68px) !important;
  line-height: 1.08 !important;
  margin-bottom: 24px !important;
}
.sc-page-hero .banner-heading p {
  max-width: 1120px !important;
  margin: 0 auto !important;
  font-size: clamp(19px, 1.8vw, 30px) !important;
  line-height: 1.45 !important;
}
.sc-page-after-hero {
  padding-top: 70px !important;
}

/* Live chat has the full shared header above it, so keep the title below nav. */
.banner.one.banner-slim.livechat-hero {
  padding-top: 220px !important;
  padding-bottom: 120px !important;
}
.livechat-hero .banner-heading h1 {
  font-size: clamp(42px, 5vw, 72px) !important;
  line-height: 1.08 !important;
  margin-bottom: 24px !important;
}
.livechat-hero .banner-heading p {
  max-width: 980px !important;
  margin: 0 auto !important;
  font-size: clamp(20px, 2vw, 32px) !important;
  line-height: 1.45 !important;
}
.livechat-section {
  padding-top: 86px !important;
}

@media (max-width: 1199px) {
  .banner.one.banner-slim.sc-page-hero {
    padding-top: 150px !important;
    padding-bottom: 72px !important;
  }
  .banner.one.banner-slim.livechat-hero {
    padding-top: 150px !important;
    padding-bottom: 80px !important;
  }
}

@media (max-width: 767px) {
  .banner.one.banner-slim.sc-page-hero {
    padding-top: 120px !important;
    padding-bottom: 56px !important;
  }
  .sc-page-hero .banner-heading h1 {
    font-size: 34px !important;
  }
  .sc-page-hero .banner-heading p {
    font-size: 17px !important;
  }
  .sc-page-after-hero {
    padding-top: 48px !important;
  }
  .banner.one.banner-slim.livechat-hero {
    padding-top: 120px !important;
    padding-bottom: 60px !important;
  }
  .livechat-hero .banner-heading h1 {
    font-size: 34px !important;
  }
  .livechat-hero .banner-heading p {
    font-size: 17px !important;
  }
  .livechat-section {
    padding-top: 56px !important;
  }
}

/* ════════════════════════════════════════════════════════════
   HOMEPAGE PLAN CARDS
   ════════════════════════════════════════════════════════════ */
.sc-plans-section { background: #f8f9fb; padding: 80px 0; }
.sc-plan-card {
  display: flex; flex-direction: column;
  background: #fff; border-radius: 20px; padding: 32px 26px;
  border: 1.5px solid #eef0f6; box-shadow: 0 4px 24px rgba(0,0,0,0.05);
  text-decoration: none; color: inherit;
  height: 100%; position: relative; overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.sc-plan-card:hover { transform: translateY(-7px); box-shadow: 0 20px 48px rgba(85,51,255,0.13); border-color: var(--sc-primary); color: inherit; text-decoration: none; }
.sc-plan-card--featured { border-color: var(--sc-primary); background: linear-gradient(160deg, #fdfcff 0%, #f3f0ff 100%); box-shadow: 0 8px 32px rgba(85,51,255,0.14); }
.sc-plan-card--featured:hover { box-shadow: 0 24px 56px rgba(85,51,255,0.22); }
.sc-plan-badge { position: absolute; top: 18px; right: 18px; background: var(--sc-primary); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; padding: 4px 11px; border-radius: 20px; text-transform: uppercase; }
.sc-plan-icon { width: 58px; height: 58px; border-radius: 14px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; flex-shrink: 0; }
.sc-plan-icon img { width: 30px; height: 30px; object-fit: contain; }
.sc-plan-icon--orange { background: rgba(251,146,60,0.12); }
.sc-plan-icon--purple { background: rgba(85,51,255,0.12); }
.sc-plan-icon--teal   { background: rgba(20,184,166,0.12); }
.sc-plan-icon--red    { background: rgba(239,68,68,0.12); }
.sc-plan-name { font-size: 18px; font-weight: 800; color: #111827; margin: 0 0 8px; line-height: 1.3; }
.sc-plan-desc { font-size: 13.5px; color: #6b7280; line-height: 1.6; margin-bottom: 18px; }
.sc-plan-features { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.sc-plan-features li { font-size: 13px; color: #374151; padding: 5px 0 5px 20px; position: relative; border-bottom: 1px dashed #f0f0f5; }
.sc-plan-features li:last-child { border-bottom: none; }
.sc-plan-features li::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--sc-primary); opacity: 0.55; }
.sc-plan-price { border-top: 1px solid #f0f0f5; padding-top: 16px; margin-bottom: 20px; }
.sc-plan-from { display: block; font-size: 10.5px; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 10px; }
.sc-plan-amount { font-size: 40px; font-weight: 900; color: #111827; line-height: 1; font-family: var(--sc-font); }
.sc-plan-amount sup { font-size: 17px; font-weight: 700; vertical-align: top; margin-top: 7px; display: inline-block; color: var(--sc-primary); }
.sc-plan-amount sub { font-size: 13px; font-weight: 500; color: #9ca3af; vertical-align: bottom; margin-bottom: 5px; display: inline-block; }
.sc-plan-cta { display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--sc-primary); color: #fff; font-size: 14px; font-weight: 700; padding: 12px 22px; border-radius: 10px; transition: background 0.2s, gap 0.2s; width: 100%; }
.sc-plan-card--featured .sc-plan-cta { background: var(--sc-primary); }
.sc-plan-card:hover .sc-plan-cta { background: var(--sc-primary-dark); gap: 11px; }

/* ════════════════════════════════════════════════════════════
   HOMEPAGE HOW IT WORKS (3 STEPS)
   ════════════════════════════════════════════════════════════ */
.sc-steps-section { background: #fff; padding: 80px 0; }
.sc-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; position: relative; }
.sc-steps-grid::before {
  content: ''; position: absolute; top: 36px; left: calc(16.66% + 16px); right: calc(16.66% + 16px);
  height: 2px; background: linear-gradient(90deg, var(--sc-primary) 0%, rgba(85,51,255,0.2) 100%);
  pointer-events: none;
}
.sc-step { text-align: center; position: relative; }
.sc-step-num {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--sc-primary); color: #fff;
  font-size: 26px; font-weight: 900; line-height: 72px;
  margin: 0 auto 20px;
  box-shadow: 0 8px 24px rgba(85,51,255,0.3);
  position: relative; z-index: 1;
}
.sc-step h4 { font-size: 17px; font-weight: 800; color: #111827; margin-bottom: 10px; }
.sc-step p { font-size: 14px; color: #6b7280; line-height: 1.65; max-width: 220px; margin: 0 auto; }
.sc-steps-cta { text-align: center; margin-top: 40px; }

/* HOMEPAGE FREE MIGRATION */
.sc-migration-section {
  padding: 80px 0;
  background: #fff;
  border-top: 1px solid #f0f0f8;
  border-bottom: 1px solid #f0f0f8;
}

.sc-migration-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.sc-migration-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sc-primary);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.sc-migration-kicker i { font-size: 15px; }

.sc-migration-copy h2 {
  color: #111827;
  font-size: 32px;
  line-height: 1.2;
  font-weight: 900;
  margin: 0 0 14px;
}

.sc-migration-copy p {
  color: #5f6778;
  font-size: 15.5px;
  line-height: 1.75;
  margin: 0;
}

.sc-migration-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.sc-migration-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #374151;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: color .18s;
}

.sc-migration-link:hover { color: var(--sc-primary); text-decoration: none; }

.sc-migration-points { display: flex; flex-direction: column; }

.sc-migration-point {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid #f3f4f6;
}

.sc-migration-point:first-child { border-top: 1px solid #f3f4f6; }

.sc-migration-point i {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(85, 51, 255, 0.08);
  color: var(--sc-primary);
  font-size: 20px;
}

.sc-migration-point strong {
  display: block;
  color: #111827;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 3px;
}

.sc-migration-point span {
  display: block;
  color: #667085;
  font-size: 13.5px;
  line-height: 1.55;
}

@media (max-width: 991px) {
  .sc-migration-inner { grid-template-columns: 1fr; gap: 36px; }
  .sc-migration-copy h2 { font-size: 28px; }
}

/* ════════════════════════════════════════════════════════════
   HOMEPAGE CHOOSE BY NEED
   ════════════════════════════════════════════════════════════ */
.sc-need-section { padding: 80px 0; background: #fff; }

.sc-need-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 40px;
}

@media (max-width: 991px) { .sc-need-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px)  { .sc-need-grid { grid-template-columns: 1fr; } }

.sc-need-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  background: #fff;
  border: 1px solid #e8e8f0;
  border-radius: 16px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}

/* Ghost number watermark */
.sc-need-card::after {
  content: attr(data-num);
  position: absolute;
  right: 10px;
  top: -10px;
  font-size: 100px;
  font-weight: 900;
  line-height: 1;
  color: rgba(0,0,0,0.035);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: -4px;
  transition: color .25s;
}

.sc-need-card:hover { transform: translateY(-4px); text-decoration: none; }

/* Per-card coloured shadow + border on hover */
.sc-need-card--blog:hover    { border-color: rgba(85,51,255,0.30);  box-shadow: 0 12px 36px rgba(85,51,255,0.14); }
.sc-need-card--biz:hover     { border-color: rgba(14,165,233,0.30); box-shadow: 0 12px 36px rgba(14,165,233,0.13); }
.sc-need-card--agency:hover  { border-color: rgba(217,119,6,0.30);  box-shadow: 0 12px 36px rgba(217,119,6,0.13); }
.sc-need-card--traffic:hover { border-color: rgba(239,68,68,0.30);  box-shadow: 0 12px 36px rgba(239,68,68,0.13); }

/* Ghost number picks up accent on hover */
.sc-need-card--blog:hover::after    { color: rgba(85,51,255,0.07); }
.sc-need-card--biz:hover::after     { color: rgba(14,165,233,0.08); }
.sc-need-card--agency:hover::after  { color: rgba(217,119,6,0.08); }
.sc-need-card--traffic:hover::after { color: rgba(239,68,68,0.08); }

/* Plan chip at top */
.sc-need-chip {
  display: inline-block;
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 22px;
}

.sc-need-card--blog   .sc-need-chip { color: #5533ff; background: rgba(85,51,255,0.08); }
.sc-need-card--biz    .sc-need-chip { color: #0369a1; background: rgba(14,165,233,0.09); }
.sc-need-card--agency .sc-need-chip { color: #b45309; background: rgba(245,158,11,0.10); }
.sc-need-card--traffic .sc-need-chip{ color: #dc2626; background: rgba(239,68,68,0.09); }

/* Bare icon — no square bg */
.sc-need-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 14px;
  line-height: 1;
  transition: transform .22s ease;
}

.sc-need-card:hover .sc-need-icon { transform: scale(1.15); }

.sc-need-card--blog   .sc-need-icon { color: #5533ff; }
.sc-need-card--biz    .sc-need-icon { color: #0ea5e9; }
.sc-need-card--agency .sc-need-icon { color: #d97706; }
.sc-need-card--traffic .sc-need-icon{ color: #ef4444; }

.sc-need-title {
  font-size: 17px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 8px;
}

.sc-need-desc {
  font-size: 13.5px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

/* Footer: price left, circle arrow right */
.sc-need-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #f3f4f6;
}

.sc-need-price {
  font-size: 15px;
  font-weight: 900;
  color: #111827;
  line-height: 1;
}

.sc-need-price small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  margin-bottom: 3px;
  letter-spacing: .04em;
}

.sc-need-go {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  transition: transform .2s;
}

.sc-need-card--blog   .sc-need-go { color: #5533ff; background: rgba(85,51,255,0.09); }
.sc-need-card--biz    .sc-need-go { color: #0369a1; background: rgba(14,165,233,0.09); }
.sc-need-card--agency .sc-need-go { color: #b45309; background: rgba(245,158,11,0.10); }
.sc-need-card--traffic .sc-need-go { color: #dc2626; background: rgba(239,68,68,0.09); }

.sc-need-card:hover .sc-need-go { transform: translateX(3px); }

/* ════════════════════════════════════════════════════════════
   HOMEPAGE APP INSTALLER GRID
   ════════════════════════════════════════════════════════════ */
.sc-apps-section { padding: 80px 0; background: #f8f9fb; }

.sc-apps-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 40px;
}

@media (max-width: 991px) { .sc-apps-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 575px)  { .sc-apps-grid { grid-template-columns: repeat(3, 1fr); } }

.sc-app-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 14px 18px;
  background: #fff;
  border: 1px solid #ebebf5;
  border-radius: 14px;
  cursor: default;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.sc-app-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 36px rgba(85, 51, 255, 0.10);
  border-color: rgba(85, 51, 255, 0.22);
}

.sc-app-icon {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  margin-bottom: 11px;
  flex-shrink: 0;
}

.sc-app-name {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  text-align: center;
  line-height: 1.3;
}

.sc-apps-footer {
  text-align: center;
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.sc-apps-more {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sc-primary);
  letter-spacing: .02em;
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   HOMEPAGE MONEY-BACK GUARANTEE BANNER
   ════════════════════════════════════════════════════════════ */
.sc-guarantee-bar {
  background: linear-gradient(135deg, #5533FF 0%, #3D1FCC 100%);
  padding: 44px 0;
}
.sc-guarantee-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.sc-guarantee-left { display: flex; align-items: center; gap: 20px; }
.sc-guarantee-icon { width: 64px; height: 64px; background: rgba(255,255,255,0.12); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; flex-shrink: 0; }
.sc-guarantee-text h3 { font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 4px; }
.sc-guarantee-text p { font-size: 14px; color: rgba(255,255,255,0.8); margin: 0; }
.sc-guarantee-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sc-guarantee-pill { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); border-radius: 50px; padding: 8px 16px; color: #fff; font-size: 13px; font-weight: 600; }
.sc-guarantee-pill i { font-size: 16px; }
.sc-guarantee-btn { background: #fff; color: var(--sc-primary); font-size: 14px; font-weight: 800; padding: 12px 28px; border-radius: 10px; text-decoration: none; white-space: nowrap; transition: transform 0.2s, box-shadow 0.2s; }
.sc-guarantee-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.2); color: var(--sc-primary); text-decoration: none; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .sc-steps-grid { grid-template-columns: 1fr; gap: 28px; }
  .sc-steps-grid::before { display: none; }
  .sc-step p { max-width: 100%; }
  .sc-guarantee-inner { flex-direction: column; text-align: center; }
  .sc-guarantee-left { flex-direction: column; text-align: center; }
  .sc-guarantee-right { justify-content: center; }
  .sc-plans-section { padding: 60px 0; }
  .sc-migration-section { padding-bottom: 60px; }
  .sc-migration-inner {
    grid-template-columns: 1fr;
    padding: 26px 20px;
    border-radius: 16px;
  }
  .sc-migration-copy h2 { font-size: 28px; }
  .sc-migration-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .sc-migration-actions .btns {
    width: 100%;
    text-align: center;
  }
  .sc-migration-link { justify-content: center; }
}
@media (max-width: 575px) {
  .sc-pricing-header, .sc-pricing-body, .sc-pricing-footer { padding-left: 20px; padding-right: 20px; }
  .sc-vps-card, .sc-cloud-plan, .sc-builder-card, .sc-plan-card, .sc-pricing-card { padding: 24px 18px; }
  .sc-contact-info-box, .sc-contact-action-box { padding: 24px 18px; }
  .sc-channel-grid { grid-template-columns: 1fr; }
  .sc-trust-inner { flex-direction: column !important; text-align: center !important; }
  .sc-trust-left { justify-content: center !important; }
  .sc-trust-cta { width: 100% !important; justify-content: center !important; }
  .sc-toc-sidebar { position: static; }
  .sc-whois-form { flex-direction: column; border-radius: 10px; }
  .sc-whois-form input[type="text"], .sc-whois-form button[type="submit"] { width: 100%; border-radius: 0; }
  .sc-whois-form button[type="submit"] { border-radius: 0 0 10px 10px !important; }
  .sc-lookup-form { flex-direction: column; }
  .sc-lookup-form input[type="text"], .sc-lookup-form button[type="submit"] { width: 100%; border-radius: 0; }
  .auction-features { grid-template-columns: 1fr; }
  .sc-summary-bar { flex-direction: column; align-items: flex-start; }
  .sc-summary-stats { gap: 12px; }
  .sc-plan-name { font-size: 16px; }
  .sc-plan-amount { font-size: 34px; }
  .sc-guarantee-pill { font-size: 12px; padding: 7px 12px; }
  .sc-migration-point {
    grid-template-columns: 42px 1fr;
    padding: 16px;
  }
  .sc-migration-point i {
    width: 42px;
    height: 42px;
    font-size: 21px;
  }
}

/* ---------------------------------------------------------------------------
   THE SITE PREVIEW CARD  (whois lab)

   Shown under a taken domain: what is actually at that address.
   ------------------------------------------------------------------------ */

.sc-sp-card {
  /* Spaced on BOTH sides. With a top margin only, the card sat flush
     against the dark "Need help finding the right domain?" block below
     it and the two read as one object with a colour change halfway. */
  margin: 22px 0 26px;
  padding: 20px 22px;
  border: 1px solid var(--x-line, #E9E8F0);
  border-radius: 14px;
  background: var(--x-white, #fff);
}
.sc-sp-head {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 16px;
  color: var(--x-ink, #14131C);
  font-size: 15px; font-weight: 700;
}
.sc-sp-head svg { color: var(--x-brand, #6B4DFF); flex: none; }

.sc-sp-wait, .sc-sp-off {
  margin: 0; display: flex; align-items: center; gap: 8px;
  color: var(--x-muted, #8A8999); font-size: 13.5px;
}

/* Two columns on anything wide enough; the shot is the smaller half because
   the words are what answer the question. */
.sc-sp-grid { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 22px; }
@media (max-width: 640px) { .sc-sp-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

.sc-sp-shotwrap { min-width: 0; }

/* A fixed 4:3 box, so the card does not jump when the image arrives. The
   reveal button and the screenshot occupy exactly the same space. */
.sc-sp-reveal, .sc-sp-shot, .sc-sp-noshot {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  border-radius: 10px;
}
.sc-sp-reveal {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  border: 1px dashed var(--x-line, #DCD8EA);
  background: var(--x-ground, #FAFAFC);
  color: var(--x-body, #4E4D5E);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.sc-sp-reveal:hover { border-color: var(--x-brand, #6B4DFF); background: #fff; color: var(--x-ink, #14131C); }
.sc-sp-reveal svg { color: var(--x-brand, #6B4DFF); opacity: .75; }
.sc-sp-reveal:disabled { cursor: default; opacity: .65; }
.sc-sp-reveal:focus-visible { outline: 2px solid var(--x-brand, #6B4DFF); outline-offset: 2px; }

.sc-sp-shot {
  object-fit: cover; object-position: top center;
  border: 1px solid var(--x-line, #E9E8F0);
  background: var(--x-ground, #FAFAFC);
}
.sc-sp-noshot {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--x-line, #E9E8F0);
  background: var(--x-ground, #FAFAFC);
  color: var(--x-muted, #8A8999); font-size: 13px;
}

.sc-sp-open {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px;
  color: var(--x-brand, #6B4DFF); font-size: 13px; font-weight: 600;
  text-decoration: none;
}
.sc-sp-open:hover { text-decoration: underline; }

.sc-sp-facts { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sc-sp-row { min-width: 0; }
.sc-sp-k {
  display: block; margin-bottom: 3px;
  color: var(--x-muted, #8A8999);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.sc-sp-v {
  display: block; min-width: 0;
  color: var(--x-ink, #14131C);
  font-size: 14px; line-height: 1.5;
  overflow-wrap: anywhere;
}
.sc-sp-desc { color: var(--x-body, #4E4D5E); font-size: 13.5px; }

/* The live badge. Green because it is a state, not a brand colour - and the
   dot carries it as well as the colour does, for anyone who cannot tell
   green from grey. */
.sc-sp-live {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 100px;
  background: rgba(18,146,92,.10);
  color: #12925C; font-size: 13px; font-weight: 600;
}
.sc-sp-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #12925C; flex: none;
}
.sc-sp-dot--off { background: #A9A6B8; }