/* ==========================================================================
   examformphoto.css  -  SEO WIDGET STYLES ONLY  -  /image/exam-form-photo/
   UnitConverterTool.com | UCT Tools

   THIS FILE CONTAINS ZERO TOOL CODE. The exam form photo tool app has its own
   stylesheet, examformphototool.css, uploaded beside this one. Both load on
   the page. Never merge them.

   Body = jpgtopng.css copied verbatim (gold standard, Rule 0).
   Changed from the gold copy, and nothing else:
     Rule 0c - stale plain breadcrumb block replaced with the TOOL-PAGE
               full-bleed block from BUILD-SEO-RULES.txt.
     Rule 0b - one ADDITIONS ONLY block appended at the end, for the widget
               05 results table this page uses instead of a slider.
     Comment-only - em dashes in the gold comment banners replaced with
               hyphens. Zero selectors, properties or values touched.
   The .uct-cs-jpg-badge / .uct-cs-png-badge / .uct-cs-filesize-jpg /
   .uct-cs-filesize-png slider rules are left untouched but UNUSED here.
   ========================================================================== */

/* === RANK MATH BREADCRUMB (TOOL PAGES) === */
/* Rule 0c: replaces the stale plain block that shipped in jpgtopng.css.
   Full-bleed via box-shadow + clip-path, per BUILD-SEO-RULES.txt. */
.rank-math-breadcrumb{max-width:1000px;margin:0 auto;padding:12px 20px;font-family:'DM Sans',sans-serif;font-size:13px;background:#0A0F1C;box-shadow:0 0 0 100vmax #0A0F1C;clip-path:inset(0 -100vmax)}
.rank-math-breadcrumb a{color:#5A7090;text-decoration:none !important}
.rank-math-breadcrumb a:hover{color:#3B82F6}
.rank-math-breadcrumb .separator{color:#374B64;margin:0 8px}
.rank-math-breadcrumb .last{color:#8899AA}

/* ============================================
   FEATURE CARD HOVER - BORDER GLOW FADE
   ============================================ */
.feature-card {
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.feature-card:hover {
  border-color: rgba(74, 144, 217, 0.6) !important;
  box-shadow: 0 0 20px rgba(74, 144, 217, 0.1);
}

/* ============================================
   ICON ZOOM IN/OUT ON CARD HOVER
   ============================================ */
.feature-card .elementor-icon {
  transition: transform 0.3s ease;
}

.feature-card:hover .elementor-icon {
  transform: scale(1.15);
}

/* ============================================
   HOW IT WORKS - COMPLETE CSS (FINAL)
   ============================================ */

/* --- Card Base --- */
.step-card {
  position: relative !important;
  overflow: visible !important;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

/* --- Card Hover: Border Glow Fade --- */
.step-card:hover {
  border-color: rgba(100, 140, 200, 0.6) !important;
  box-shadow: 0 0 25px rgba(100, 140, 200, 0.1);
}

/* --- Connecting Timeline Line --- */
.steps-row {
  position: relative;
}

.steps-row::before {
  content: '';
  position: absolute;
  top: 132px;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(55, 75, 100, 0.5);
}

/* --- Circular Step Badges (Pure CSS) --- */
.step-card::after {
  position: absolute;
  top: -20px;
  right: 0px;
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #0B1120;
  border: 1.5px solid rgba(80, 110, 150, 0.6);
  color: #8899AA;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.4s ease, color 0.4s ease;
}

.step-card-1::after { content: '01'; }
.step-card-2::after { content: '02'; }
.step-card-3::after { content: '03'; }
.step-card-4::after { content: '04'; }

.step-card:hover::after {
  border-color: rgba(100, 140, 200, 0.8);
  color: #AABBCC;
}

/* --- Icon Hover: Zoom In/Out --- */
.step-card .elementor-icon {
  transition: transform 0.3s ease;
}

.step-card:hover .elementor-icon {
  transform: scale(1.15);
}

/* --- Gradient Icon Backgrounds --- */
.step-card-1 .elementor-icon {
  background: linear-gradient(135deg, #00B4D8, #0077B6) !important;
}

.step-card-2 .elementor-icon {
  background: linear-gradient(135deg, #E040A0, #A020C0) !important;
}

.step-card-3 .elementor-icon {
  background: linear-gradient(135deg, #FF6B35, #FF3D00) !important;
}

.step-card-4 .elementor-icon {
  background: linear-gradient(135deg, #00C853, #00A040) !important;
}

.step-card .elementor-icon i,
.step-card .elementor-icon svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

/* --- CTA Button Hover --- */
.elementor-button:hover {
  box-shadow: 0 4px 20px rgba(33, 150, 243, 0.4);
}

/* --- Responsive: Mobile --- */
@media (max-width: 767px) {
  .steps-row::before {
    display: none;
  }

  .step-card::after {
    top: -18px;
    right: 15px;
    width: 36px;
    height: 36px;
    font-size: 12px;
  }
}



/* ============================================
   ENGAGING CONTENT SECTION - COMPLETE CSS
   ============================================ */

/* --- Title + Intro --- */
.engage-title {
  font-size: 34px;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
  line-height: 1.25;
}

.engage-intro {
  color: #8899AA;
  font-size: 16px;
  line-height: 1.85;
  margin-bottom: 55px;
  max-width: 880px;
}

.engage-intro strong {
  color: #C8D8E8;
  font-weight: 600;
}

/* --- Sidebar Sticky --- */
.engage-sidebar {
  position: sticky !important;
  top: 30px;
}

/* --- Dividers --- */
.engage-divider {
  border: none;
  height: 2px;
  background: rgba(55, 75, 100, 0.2) !important;
  margin: 50px 0 !important;
}

/* ============================================
   SECTION HEADINGS (with colored icons)
   ============================================ */
.section-title {
  font-size: 23px;
  font-weight: 700;
  color: #FFFFFF;
  margin-top: 0;
  margin-bottom: 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(55, 75, 100, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title .title-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  flex-shrink: 0;
  line-height: 1 !important;
}

/* ============================================
   ① COMPARISON TABLE
   ============================================ */
.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(55, 75, 100, 0.35);
  margin-bottom: 10px;
}

.comparison-table thead th {
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-align: left;
}

.comparison-table thead th:first-child {
  background: #141E30;
  color: #6078A0;
  width: 35%;
}

.comparison-table thead th:nth-child(2) {
  background: rgba(239, 68, 68, 0.08);
  color: #F87171;
  border-left: 1px solid rgba(55, 75, 100, 0.25);
}

.comparison-table thead th:nth-child(3) {
  background: rgba(59, 130, 246, 0.08);
  color: #60A5FA;
  border-left: 1px solid rgba(55, 75, 100, 0.25);
}

.comparison-table tbody td {
  padding: 14px 20px;
  font-size: 14px;
  color: #8899AA;
  border-top: 1px solid rgba(55, 75, 100, 0.2);
  background: #0F1929;
  line-height: 1.5;
}

.comparison-table tbody td:nth-child(2),
.comparison-table tbody td:nth-child(3) {
  border-left: 1px solid rgba(55, 75, 100, 0.2);
}

.comparison-table tbody tr:hover td {
  background: #111D30;
}

.badge-yes {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #4ADE80;
  font-weight: 600;
  font-size: 13px;
}

.badge-no {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #F87171;
  font-weight: 600;
  font-size: 13px;
}

.badge-neutral {
  color: #8899AA;
  font-size: 13px;
}

/* ============================================
   ② BENEFIT CARDS (2×2 hoverable grid)
   ============================================ */
.benefit-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 10px;
}

.benefit-card {
  background: #111B2E;
  border: 1px solid rgba(55, 75, 100, 0.3);
  border-radius: 12px;
  padding: 22px;
  transition: all 0.35s ease;
  cursor: default;
}

.benefit-card:hover {
  border-color: rgba(59, 130, 246, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.benefit-card .bc-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  margin-bottom: 14px;
  color: #FFFFFF;
  line-height: 1 !important;
}

.benefit-card h4 {
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}

.benefit-card p {
  color: #7088A0;
  font-size: 13.5px;
  line-height: 1.65;
  margin: 0;
}

.bc-cyan { background: linear-gradient(135deg, #00B4D8, #0077B6); }
.bc-purple { background: linear-gradient(135deg, #A855F7, #7C3AED); }
.bc-green { background: linear-gradient(135deg, #22C55E, #16A34A); }
.bc-orange { background: linear-gradient(135deg, #F97316, #EA580C); }

/* ============================================
   ③ FEATURE CHECKLIST (green checks)
   ============================================ */
.feature-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
}

.feature-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(55, 75, 100, 0.15);
  color: #8899AA;
  font-size: 14.5px;
  line-height: 1.65;
  transition: color 0.2s ease;
}

.feature-checklist li:last-child {
  border-bottom: none;
}

.feature-checklist li:hover {
  color: #C0CCDA;
}

.feature-checklist li .check-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.feature-checklist li .check-icon i {
  color: #4ADE80;
  font-size: 10px;
}

.feature-checklist li code {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.15);
  color: #7CB3F0;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 13px;
}

/* ============================================
   ④ STEPS TIMELINE (vertical line)
   ============================================ */
.steps-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  counter-reset: timeline;
}

.steps-timeline::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 38px;
  bottom: 25px;
  width: 2px;
  background: linear-gradient(to bottom, #3B82F6, rgba(59, 130, 246, 0.1));
  border-radius: 2px;
}

.steps-timeline li {
  position: relative;
  padding-left: 52px;
  padding-bottom: 28px;
  counter-increment: timeline;
}

.steps-timeline li:last-child {
  padding-bottom: 0;
}

.steps-timeline li::before {
  content: counter(timeline);
  position: absolute;
  left: 4px;
  top: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0B1120;
  border: 2px solid #3B82F6;
  color: #5B9BD5;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: all 0.3s ease;
}

.steps-timeline li:hover::before {
  background: #3B82F6;
  color: #FFFFFF;
}

.steps-timeline li .step-title {
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

.steps-timeline li .step-desc {
  color: #7088A0;
  font-size: 14px;
  line-height: 1.7;
}

.steps-timeline li .step-desc code {
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.15);
  color: #7CB3F0;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 13px;
}

.steps-timeline li .step-desc strong {
  color: #C8D8E8;
  font-weight: 600;
}

/* ============================================
   ⑤ ACCORDION (expandable technical notes)
   ============================================ */
.accordion-list {
  margin-bottom: 10px;
}

.accordion-item {
  background: #111B2E;
  border: 1px solid rgba(55, 75, 100, 0.3);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.accordion-item:hover {
  border-color: rgba(59, 130, 246, 0.3);
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}

.accordion-header:hover {
  background: rgba(59, 130, 246, 0.04);
}

.accordion-header .ah-left {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #C0CCDA;
  font-size: 14.5px;
  font-weight: 600;
}

.accordion-header .ah-left i {
  color: #5B9BD5;
  font-size: 18px !important;
  width: 24px !important;
  text-align: center;
  line-height: 1 !important;
}

.accordion-header .ah-arrow {
  color: #5078A0;
  font-size: 12px;
  transition: transform 0.3s ease;
}

.accordion-item.open .accordion-header .ah-arrow {
  transform: rotate(180deg);
}

.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.accordion-item.open .accordion-body {
  max-height: 300px;
  padding: 0 20px 18px 50px;
}

.accordion-body p {
  color: #7088A0;
  font-size: 14px;
  line-height: 1.75;
  margin: 0;
}

/* ============================================
   ⑥ USE CASE CARDS (numbered 2×2 grid)
   ============================================ */
.use-case-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.use-case-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  background: #111B2E;
  border: 1px solid rgba(55, 75, 100, 0.3);
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: default;
}

.use-case-card:hover {
  border-color: rgba(59, 130, 246, 0.35);
  background: #131F33;
}

.use-case-card .uc-num {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5B9BD5;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.use-case-card p {
  color: #8899AA;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* ============================================
   SIDEBAR (same as Two-Column guide)
   ============================================ */
.sidebar-card {
  background: #111B2E;
  border: 1px solid rgba(55, 75, 100, 0.4);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 20px;
}

.sidebar-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-card-title i {
  color: #3B82F6;
  font-size: 18px !important;
  line-height: 1 !important;
}

/* CTA Card */
.sidebar-cta {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
  border: 1px solid rgba(59, 130, 246, 0.25);
  border-radius: 14px;
  padding: 26px;
  text-align: center;
  margin-bottom: 20px;
}

.sidebar-cta-emoji {
  font-size: 32px;
  margin-bottom: 12px;
}

.sidebar-cta h4 {
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}

.sidebar-cta p {
  color: #6078A0;
  font-size: 13px;
  margin-bottom: 18px;
  line-height: 1.55;
}

.sidebar-cta-btn {
  display: inline-block;
  background: #2196F3;
  color: #FFFFFF !important;
  padding: 12px 30px;
  border-radius: 10px;
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.25);
}

.sidebar-cta-btn:hover {
  background: #1976D2;
  box-shadow: 0 6px 25px rgba(33, 150, 243, 0.4);
  transform: translateY(-1px);
  color: #FFFFFF !important;
}

/* Quick Info Grid */
.sidebar-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sidebar-info-item {
  text-align: center;
  padding: 14px 8px;
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.1);
  border-radius: 10px;
}

.sidebar-info-item .si-value {
  font-size: 20px;
  font-weight: 700;
  color: #5B9BD5;
  display: block;
  margin-bottom: 2px;
}

.sidebar-info-item .si-label {
  font-size: 10px;
  color: #5070A0;
  letter-spacing: 0.5px;
}

/* TOC */
.sidebar-toc {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-toc li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: #6078A0;
  text-decoration: none !important;
  font-size: 13.5px;
  border-radius: 8px;
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
}

.sidebar-toc li a:hover {
  color: #FFFFFF;
  background: rgba(59, 130, 246, 0.08);
  border-left-color: #3B82F6;
}

.sidebar-toc .toc-num {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: rgba(59, 130, 246, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #5B9BD5;
  flex-shrink: 0;
}

/* Related Tools */
.sidebar-related {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-related li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: #6078A0;
  text-decoration: none !important;
  font-size: 13.5px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.sidebar-related li a:hover {
  color: #FFFFFF;
  background: rgba(59, 130, 246, 0.08);
}

.sidebar-related li a i {
  color: #3B82F6;
  font-size: 11px;
  width: 14px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .engage-sidebar { width: 280px !important; }
}

@media (max-width: 768px) {
  .engage-two-col {
    flex-direction: column !important;
  }

  .engage-left,
  .engage-sidebar {
    width: 100% !important;
  }

  .engage-sidebar {
    position: static !important;
    order: -1;
    margin-bottom: 30px;
  }

  .engage-title { font-size: 26px !important; }
  .section-title { font-size: 20px; }

  .benefit-cards,
  .use-case-cards {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   FAQ PARAGRAPH COLOR
   ============================================ */
.faqparagraphcolor{
color: #94A3B8;
}




/* ============================================
   WIDGET WRAPPER - Dark BG + DM Sans Base
   Every widget gets this outer wrapper
   ============================================ */
.uct-widget-wrap {
  background: #0A0F1C;
  font-family: 'DM Sans', sans-serif;
  width: 100%;
  box-sizing: border-box;
  color: #FFFFFF;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================
   STATS STRIP - 4-Column Metrics Row
   ============================================ */
.uct-stats-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 48px 24px;
  max-width: 900px;
  margin: 0 auto;
}

.uct-stat-item {
  flex: 1;
  text-align: center;
  padding: 0 24px;
  border-right: 1px solid rgba(55, 75, 100, 0.25);
}

.uct-stat-item:last-child {
  border-right: none;
}

.uct-stat-value {
  font-size: 38px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 6px;
}

.uct-stat-value span {
  color: #3B82F6;
}

.uct-stat-label {
  font-size: 13px;
  color: #6078A0;
  letter-spacing: 0.3px;
}

@media (max-width: 768px) {
  .uct-stats-inner {
    flex-wrap: wrap;
    gap: 24px;
    padding: 36px 16px;
  }
  .uct-stat-item {
    flex: 0 0 45%;
    border-right: none;
    padding: 0 12px;
  }
  .uct-stat-value {
    font-size: 30px;
  }
}

@media (max-width: 480px) {
  .uct-stat-item {
    flex: 0 0 100%;
  }
}


/* ============================================
   FEATURES STRIP - 4-Column Highlight Cards
   ============================================ */
.uct-features-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

.uct-feature-highlight {
  background: #111B2E;
  border: 1px solid rgba(55, 75, 100, 0.3);
  border-radius: 14px;
  padding: 28px 22px;
  text-align: center;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
  cursor: default;
}

.uct-feature-highlight:hover {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(-3px);
}

.uct-feature-highlight-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
  color: #FFFFFF;
}

.uct-fhi-blue { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.uct-fhi-green { background: linear-gradient(135deg, #22C55E, #16A34A); }
.uct-fhi-orange { background: linear-gradient(135deg, #F97316, #EA580C); }
.uct-fhi-purple { background: linear-gradient(135deg, #A855F7, #7C3AED); }

.uct-feature-highlight h3 {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}

.uct-feature-highlight p {
  color: #7088A0;
  font-size: 13.5px;
  line-height: 1.65;
}

@media (max-width: 1024px) {
  .uct-features-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .uct-features-inner {
    grid-template-columns: 1fr;
    padding: 0 16px 40px;
  }
}


/* ============================================
   HOW IT WORKS - Standalone Widget
   ============================================ */
.uct-hiw-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 24px;
  text-align: center;
  background: #111B2E;
  border-radius: 20px;
}

.uct-hiw-inner h2 {
  font-size: 32px;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}

.uct-hiw-subtitle {
  color: #7088A0;
  font-size: 15px;
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto 44px;
}

.uct-hiw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 36px;
  position: relative;
}

.uct-hiw-card {
  background: #0D1526;
  border: 1px solid rgba(55, 75, 100, 0.3);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  position: relative;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
  cursor: default;
}

.uct-hiw-card:hover {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  transform: translateY(-3px);
}

.uct-hiw-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 18px;
  color: #FFFFFF;
}

.uct-hci-cyan { background: linear-gradient(135deg, #00B4D8, #0077B6); }
.uct-hci-pink { background: linear-gradient(135deg, #E040A0, #A020C0); }
.uct-hci-orange { background: linear-gradient(135deg, #FF6B35, #FF3D00); }
.uct-hci-green { background: linear-gradient(135deg, #00C853, #00A040); }

.uct-hiw-card h3 {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}

.uct-hiw-card p {
  color: #7088A0;
  font-size: 13.5px;
  line-height: 1.65;
}

.uct-hiw-cta {
  display: inline-block;
  background: #2196F3;
  color: #FFFFFF !important;
  padding: 14px 36px;
  border-radius: 12px;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 700;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.25);
  border: none;
  cursor: pointer;
}

.uct-hiw-cta:hover {
  background: #1976D2;
  box-shadow: 0 6px 25px rgba(33, 150, 243, 0.4);
  transform: translateY(-1px);
  color: #FFFFFF !important;
}

@media (max-width: 1024px) {
  .uct-hiw-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .uct-hiw-grid {
    grid-template-columns: 1fr;
  }
  .uct-hiw-inner {
    padding: 40px 16px;
    border-radius: 14px;
  }
  .uct-hiw-inner h2 {
    font-size: 25px;
  }
}


/* ============================================
   INFO/SEO - Two-Column Layout Wrapper
   ============================================ */
.uct-info-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 60px 24px;
}

.uct-info-two-col {
  display: flex;
  gap: 36px;
  align-items: flex-start;
}

.uct-info-main {
  flex: 1;
  min-width: 0;
}

.uct-info-sidebar {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: 30px;
}

@media (max-width: 1024px) {
  .uct-info-sidebar {
    width: 260px;
  }
}

@media (max-width: 768px) {
  .uct-info-two-col {
    flex-direction: column;
  }
  .uct-info-sidebar {
    width: 100%;
    position: static;
    order: -1;
    margin-bottom: 30px;
  }
  .uct-info-inner {
    padding: 40px 16px;
  }
}


/* ============================================
   AUDIENCE SECTION - Built for Everyone
   ============================================ */
.uct-audience-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 24px;
  text-align: center;
}

.uct-audience-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #3B82F6;
  margin-bottom: 14px;
}

.uct-audience-title {
  font-size: 30px;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}

.uct-audience-subtitle {
  color: #7088A0;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 32px;
}

.uct-audience-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.uct-audience-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #111B2E;
  border: 1px solid rgba(55, 75, 100, 0.35);
  border-radius: 40px;
  padding: 10px 20px;
  color: #C0CCDA;
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: default;
}

.uct-audience-tag:hover {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(59, 130, 246, 0.06);
  color: #FFFFFF;
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .uct-audience-inner {
    padding: 40px 16px;
  }
  .uct-audience-title {
    font-size: 24px;
  }
  .uct-audience-tags {
    gap: 8px;
  }
  .uct-audience-tag {
    padding: 8px 16px;
    font-size: 12.5px;
  }
}


/* ============================================
   FAQ SECTION - Standalone Widget
   ============================================ */
.uct-faq-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 24px;
}

.uct-faq-inner h2 {
  font-size: 28px;
  font-weight: 800;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 36px;
  letter-spacing: -0.3px;
}

.uct-faq-item {
  background: #111B2E;
  border: 1px solid rgba(55, 75, 100, 0.3);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.uct-faq-item:hover {
  border-color: rgba(59, 130, 246, 0.3);
}

.uct-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 22px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}

.uct-faq-question:hover {
  background: rgba(59, 130, 246, 0.04);
}

.uct-faq-question h3 {
  color: #C0CCDA;
  font-size: 15px;
  font-weight: 600;
  flex: 1;
  padding-right: 16px;
}

.uct-faq-arrow {
  color: #5078A0;
  font-size: 12px;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.uct-faq-item.open .uct-faq-arrow {
  transform: rotate(180deg);
}

.uct-faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.uct-faq-item.open .uct-faq-answer {
  max-height: 400px;
  padding: 0 22px 20px 22px;
}

.uct-faq-answer p {
  color: #7088A0;
  font-size: 14.5px;
  line-height: 1.75;
}

@media (max-width: 768px) {
  .uct-faq-inner {
    padding: 40px 16px;
  }
  .uct-faq-inner h2 {
    font-size: 23px;
  }
  .uct-faq-question h3 {
    font-size: 14px;
  }
}


/* ============================================
   OTHER TOOL CATEGORIES - Cross Navigation
   ============================================ */
.uct-categories-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 24px;
  text-align: center;
}

.uct-categories-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #3B82F6;
  margin-bottom: 14px;
}

.uct-categories-title {
  font-size: 28px;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 36px;
  letter-spacing: -0.3px;
}

.uct-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.uct-category-card,
.uct-category-card:hover,
.uct-category-card:visited,
.uct-category-card:focus,
.uct-category-card:active,
.uct-category-card h3,
.uct-category-card p {
  text-decoration: none !important;
}

.uct-category-card {
  background: #111B2E;
  border: 1px solid rgba(55, 75, 100, 0.3);
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  transition: all 0.35s ease;
  cursor: pointer;
  display: block;
  color: inherit;
}

.uct-category-card:hover {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(-4px);
}

.uct-category-card-icons {
  margin-bottom: 16px;
}

.uct-category-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  font-size: 22px;
}

.uct-ci-blue { background: linear-gradient(135deg, #3B82F6, #2563EB); }
.uct-ci-green { background: linear-gradient(135deg, #22C55E, #16A34A); }
.uct-ci-orange { background: linear-gradient(135deg, #F97316, #EA580C); }
.uct-ci-purple { background: linear-gradient(135deg, #A855F7, #7C3AED); }

.uct-category-card h3 {
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}

.uct-category-card p {
  color: #6078A0;
  font-size: 13px;
  line-height: 1.6;
}

.uct-category-card:hover h3 {
  color: #FFFFFF;
}

@media (max-width: 1024px) {
  .uct-categories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .uct-categories-grid {
    grid-template-columns: 1fr;
  }
  .uct-categories-inner {
    padding: 40px 16px;
  }
  .uct-categories-title {
    font-size: 23px;
  }
}


/* ============================================
   CTA SECTION - Bottom Call-to-Action
   ============================================ */
.uct-cta-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 70px 24px;
  text-align: center;
}

.uct-cta-title {
  font-size: 30px;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 14px;
  letter-spacing: -0.5px;
}

.uct-cta-subtitle {
  color: #7088A0;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 32px;
}

.uct-cta-button {
  display: inline-block;
  background: #2196F3;
  color: #FFFFFF !important;
  padding: 16px 42px;
  border-radius: 12px;
  text-decoration: none !important;
  font-size: 16px;
  font-weight: 700;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.25);
  border: none;
  cursor: pointer;
}

.uct-cta-button:hover {
  background: #1976D2;
  box-shadow: 0 6px 25px rgba(33, 150, 243, 0.4);
  transform: translateY(-1px);
  color: #FFFFFF !important;
}

@media (max-width: 768px) {
  .uct-cta-inner {
    padding: 50px 16px;
  }
  .uct-cta-title {
    font-size: 24px;
  }
  .uct-cta-button {
    padding: 14px 32px;
    font-size: 15px;
  }
}


/* ============================================
   INTRO TEXT - After Converter, Before Stats
   ============================================ */
.uct-intro-text-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 24px 20px;
}

.uct-intro-text-inner p {
  color: #94A3B8;
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 16px;
}

.uct-intro-text-inner p:last-child {
  margin-bottom: 0;
}

.uct-intro-text-inner a {
  color: #3B82F6 !important;
  text-decoration: none !important;
  font-weight: 600;
  border-bottom: 1px solid rgba(59, 130, 246, 0.3);
  transition: all 0.2s ease;
}

.uct-intro-text-inner a:hover {
  color: #60A5FA !important;
  border-bottom-color: #60A5FA;
}


/* ============================================
   INLINE LINKS - Content Paragraphs
   ============================================ */
.uct-info-main a,
.engage-intro a,
.engage-body a,
.comparison-explainer a,
.benefit-card a,
.use-case-card a,
.accordion-body a,
.related-tool-link,
.uct-cs-note a {
  color: #3B82F6 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(59, 130, 246, 0.3);
  transition: all 0.2s ease;
}

.uct-info-main a:hover,
.engage-intro a:hover,
.engage-body a:hover,
.comparison-explainer a:hover,
.benefit-card a:hover,
.use-case-card a:hover,
.accordion-body a:hover,
.uct-cs-note a:hover {
  color: #60A5FA !important;
  border-bottom-color: #60A5FA;
}

/* Exclude sidebar and button links from inline styling */
.sidebar-cta-btn,
.sidebar-toc a,
.sidebar-related a,
.uct-hiw-cta,
.uct-cta-button {
  border-bottom: none !important;
}


/* ============================================
   ENGAGE BODY - Content Section Paragraphs
   ============================================ */
.engage-body {
  color: #94A3B8;
  font-size: 14.5px;
  line-height: 1.8;
  margin-bottom: 20px;
  margin-top: 0;
}


/* ============================================
   COMPARISON EXPLAINER - Below Table Paragraph
   ============================================ */
.comparison-explainer {
  background: #111B2E;
  border: 1px solid rgba(55, 75, 100, 0.3);
  border-radius: 12px;
  padding: 20px 24px;
  margin-top: 20px;
}

.comparison-explainer p {
  color: #94A3B8;
  font-size: 14px;
  line-height: 1.8;
  margin: 0;
}


/* ============================================
   RELATED TOOLS GRID - Interlink Section
   ============================================ */
.related-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.related-tool-link {
  display: flex !important;
  align-items: center;
  gap: 12px;
  background: #111B2E;
  border: 1px solid rgba(55, 75, 100, 0.3);
  border-radius: 10px;
  padding: 14px 16px;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(55, 75, 100, 0.3) !important;
}

.related-tool-link:hover {
  border-color: rgba(59, 130, 246, 0.4) !important;
  background: rgba(59, 130, 246, 0.04);
  transform: translateY(-2px);
  border-bottom-color: rgba(59, 130, 246, 0.4) !important;
}

.related-tool-link .rtl-icon {
  font-size: 20px !important;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  line-height: 1 !important;
}

.related-tool-link .rtl-text {
  color: #C0CCDA;
  font-size: 13px;
  line-height: 1.5;
}

.related-tool-link .rtl-text strong {
  color: #FFFFFF;
  font-weight: 700;
}

@media (max-width: 768px) {
  .related-tools-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================
   COMPARISON SLIDER - Before/After Visual
   ============================================ */
.uct-comparison-slider-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 24px;
  text-align: center;
}

.uct-cs-title {
  font-size: 28px;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 12px;
  letter-spacing: -0.3px;
}

.uct-cs-subtitle {
  color: #7088A0;
  font-size: 15px;
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto 32px;
}

.uct-cs-container {
  max-width: 700px;
  margin: 0 auto;
}

.uct-cs-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(55, 75, 100, 0.3);
  cursor: col-resize;
  user-select: none;
  -webkit-user-select: none;
}

.uct-cs-img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-drag: none;
}

.uct-cs-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 0 0 50%);
}

.uct-cs-overlay .uct-cs-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.uct-cs-label {
  position: absolute;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 5;
}

.uct-cs-label-left {
  left: 16px;
}

.uct-cs-label-right {
  right: 16px;
}

.uct-cs-format-badge {
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.uct-cs-jpg-badge {
  background: rgba(239, 68, 68, 0.85);
  color: #FFFFFF;
}

.uct-cs-png-badge {
  background: rgba(59, 130, 246, 0.85);
  color: #FFFFFF;
}

.uct-cs-format-detail {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.uct-cs-slider {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  z-index: 10;
  cursor: col-resize;
  transform: translateX(-50%);
}

.uct-cs-slider-line {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  background: #FFFFFF;
  transform: translateX(-50%);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

.uct-cs-slider-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  color: #333;
  z-index: 11;
}

.uct-cs-filesize-row {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.uct-cs-filesize {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.uct-cs-filesize-jpg {
  text-align: left;
}

.uct-cs-filesize-png {
  text-align: right;
}

.uct-cs-fs-label {
  font-size: 12px;
  color: #5078A0;
  font-weight: 500;
}

.uct-cs-fs-value {
  font-size: 18px;
  font-weight: 800;
  color: #FFFFFF;
}

.uct-cs-note {
  color: #7088A0;
  font-size: 13.5px;
  line-height: 1.75;
  margin-top: 24px;
  text-align: left;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.uct-cs-note strong {
  color: #C0CCDA;
}

@media (max-width: 768px) {
  .uct-comparison-slider-section {
    padding: 40px 16px;
  }
  .uct-cs-title {
    font-size: 23px;
  }
  .uct-cs-slider-handle {
    width: 36px;
    height: 36px;
  }
  .uct-cs-slider-handle svg {
    width: 16px;
    height: 16px;
  }
}


/* ============================================
   COMPREHENSIVE MOBILE RESPONSIVE FIXES
   All content sections - 768px and below
   ============================================ */

/* --- Prevent horizontal overflow on all wrappers --- */
.uct-widget-wrap {
  overflow-x: hidden;
}

.uct-info-inner {
  overflow-x: hidden;
}

@media (max-width: 768px) {

  /* --- Two-Column Layout → Stack --- */
  .uct-info-two-col {
    flex-direction: column;
  }

  .uct-info-main {
    width: 100%;
  }

  .uct-info-sidebar {
    width: 100% !important;
    position: static !important;
    order: -1;
    margin-bottom: 30px;
  }

  .uct-info-inner {
    padding: 40px 16px;
  }

  /* --- Title Sizes --- */
  .engage-title {
    font-size: 24px !important;
    letter-spacing: -0.3px;
    line-height: 1.3 !important;
    margin-bottom: 14px !important;
  }

  .section-title {
    font-size: 19px !important;
    gap: 8px !important;
    flex-wrap: wrap;
  }

  .section-title .title-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 17px !important;
  }

  /* --- Intro & Body Text --- */
  .engage-intro {
    font-size: 14.5px !important;
    line-height: 1.75 !important;
    margin-bottom: 35px !important;
  }

  .engage-body {
    font-size: 13.5px !important;
    line-height: 1.75 !important;
  }

  /* --- Comparison Table: Horizontal Scroll --- */
  .comparison-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
  }

  .comparison-table thead th {
    padding: 12px 14px;
    font-size: 12px;
    white-space: nowrap;
  }

  .comparison-table tbody td {
    padding: 10px 14px;
    font-size: 13px;
  }

  /* --- Comparison Explainer --- */
  .comparison-explainer {
    padding: 16px 18px;
  }

  .comparison-explainer p {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  /* --- Benefit & Use-Case Cards: Single Column --- */
  .benefit-cards,
  .use-case-cards {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .benefit-card {
    padding: 20px 18px !important;
  }

  .benefit-card .bc-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 18px !important;
  }

  .benefit-card h4 {
    font-size: 15px !important;
  }

  .benefit-card p {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  .use-case-card {
    padding: 18px 16px !important;
  }

  .use-case-card .uc-num {
    font-size: 28px !important;
  }

  .use-case-card p {
    font-size: 13px !important;
  }

  /* --- Feature Checklist --- */
  .feature-checklist li {
    font-size: 13.5px !important;
    padding: 12px 0 !important;
    gap: 10px !important;
    word-break: break-word;
  }

  .feature-checklist li code {
    font-size: 11.5px !important;
    padding: 2px 6px !important;
    word-break: break-all;
  }

  .check-icon {
    flex-shrink: 0;
  }

  /* --- Steps Timeline --- */
  .steps-timeline li {
    padding-left: 44px !important;
    padding-bottom: 22px !important;
  }

  .steps-timeline li::before {
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
  }

  .steps-timeline::before {
    left: 14px !important;
    top: 30px !important;
  }

  .steps-timeline li .step-title {
    font-size: 14px !important;
  }

  .steps-timeline li .step-desc {
    font-size: 13px !important;
    line-height: 1.65 !important;
  }

  .steps-timeline li .step-desc code {
    font-size: 11.5px !important;
    padding: 2px 6px !important;
  }

  /* --- Accordion --- */
  .accordion-header {
    padding: 14px 16px !important;
  }

  .accordion-header .ah-left {
    font-size: 13.5px !important;
    gap: 10px !important;
  }

  .accordion-body p {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

  .accordion-item.open .accordion-body {
    padding: 0 16px 16px 16px !important;
  }

  /* --- Dividers --- */
  .engage-divider {
    margin: 35px 0 !important;
  }

  /* --- Related Tools Grid --- */
  .related-tools-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  .related-tool-link {
    padding: 12px 14px !important;
    gap: 10px !important;
  }

  .related-tool-link .rtl-text {
    font-size: 12.5px !important;
  }

  /* --- Sidebar Cards (when stacked on mobile) --- */
  .sidebar-cta {
    padding: 22px 18px !important;
  }

  .sidebar-cta h4 {
    font-size: 17px !important;
  }

  .sidebar-cta p {
    font-size: 13px !important;
  }

  .sidebar-info-grid {
    gap: 10px !important;
  }

  .sidebar-toc li a {
    font-size: 13px !important;
    padding: 8px 10px !important;
  }

  .sidebar-related li a {
    font-size: 13px !important;
    padding: 8px 10px !important;
  }

}

/* --- Extra small screens (480px and below) --- */
@media (max-width: 480px) {

  .engage-title {
    font-size: 21px !important;
  }

  .section-title {
    font-size: 17px !important;
  }

  .section-title .title-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
  }

  .comparison-table thead th {
    padding: 10px 10px;
    font-size: 11px;
  }

  .comparison-table tbody td {
    padding: 8px 10px;
    font-size: 12px;
  }

  .benefit-card {
    padding: 16px 14px !important;
  }

  .feature-checklist li {
    font-size: 13px !important;
  }

  .steps-timeline li {
    padding-left: 38px !important;
  }

  .steps-timeline li::before {
    width: 22px !important;
    height: 22px !important;
    font-size: 10px !important;
    left: 2px !important;
  }

  .steps-timeline::before {
    left: 12px !important;
  }

  /* Intro text widget */
  .uct-intro-text-inner {
    padding: 28px 16px 16px !important;
  }

  .uct-intro-text-inner p {
    font-size: 13.5px !important;
    line-height: 1.7 !important;
  }

  /* Comparison slider */
  .uct-cs-title {
    font-size: 20px !important;
  }

  .uct-cs-subtitle {
    font-size: 13px !important;
  }

  .uct-cs-format-badge {
    padding: 4px 10px !important;
    font-size: 11px !important;
  }

  .uct-cs-format-detail {
    font-size: 10px !important;
  }

  .uct-cs-fs-value {
    font-size: 15px !important;
  }

  .uct-cs-note {
    font-size: 12.5px !important;
  }
}

/* ==========================================================================
   ADDITIONS ONLY  -  Rule 0b  -  exam-form-photo
   Nothing above this banner is edited. Everything below is new to this page.

   WIDGET 05 RESULTS TABLE. This tool crops and resizes, so a same-image
   comparison slider would show two identical pictures and prove nothing.
   Gold standard Rule 6 permits a measured table instead. The outer contract
   is unchanged: .uct-comparison-slider-section > .uct-cs-title +
   .uct-cs-subtitle + .uct-cs-container + .uct-cs-note. Only the payload
   inside .uct-cs-container differs.

   WHY THE WIDTH OVERRIDE BELOW EXISTS. The gold slot is capped at 800px on
   the section and 700px on the container, because it was sized for a square
   slider image. A six column table needs about 775px, so it overflowed its
   wrapper at EVERY viewport including 1440px, and overflow-x:auto hid that
   from a page-level scrollWidth check. The .uct-cs-tabled modifier widens the
   slot for the table variant only. Pages that still use a real slider keep
   the 800/700 caps untouched.
   ========================================================================== */

/* --- width override, table variant only --- */
.uct-cs-tabled { max-width: 1040px; }
.uct-cs-tabled .uct-cs-container { max-width: 100%; }

/* --- the table --- */
.uct-rt-wrap {
  border: 1px solid rgba(55, 75, 100, 0.3);
  border-radius: 14px;
  background: #111B2E;
  overflow: hidden;
}

.uct-rt-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  text-align: left;
}

/* Fixed layout plus explicit widths. Without these the browser hands the
   narrow columns a few characters each and every cell wraps one word per
   line, which is what the first build shipped. */
.uct-rt-table th:nth-child(1), .uct-rt-table td:nth-child(1) { width: 21%; }
.uct-rt-table th:nth-child(2), .uct-rt-table td:nth-child(2) { width: 18%; }
.uct-rt-table th:nth-child(3), .uct-rt-table td:nth-child(3) { width: 14%; }
.uct-rt-table th:nth-child(4), .uct-rt-table td:nth-child(4) { width: 21%; }
.uct-rt-table th:nth-child(5), .uct-rt-table td:nth-child(5) { width: 13%; }
.uct-rt-table th:nth-child(6), .uct-rt-table td:nth-child(6) { width: 13%; }

.uct-rt-table thead th {
  background: rgba(59, 130, 246, 0.08);
  color: #FFFFFF;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(55, 75, 100, 0.4);
  vertical-align: bottom;
}

.uct-rt-table tbody th {
  color: #FFFFFF;
  font-weight: 600;
  font-size: 13.5px;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(55, 75, 100, 0.18);
  vertical-align: top;
  line-height: 1.45;
}

.uct-rt-table tbody td {
  color: #8FA6C0;
  font-size: 13.5px;
  padding: 13px 14px;
  border-bottom: 1px solid rgba(55, 75, 100, 0.18);
  line-height: 1.55;
  vertical-align: top;
}

.uct-rt-table tbody tr:last-child th,
.uct-rt-table tbody tr:last-child td { border-bottom: none; }

.uct-rt-table tbody tr:hover th,
.uct-rt-table tbody tr:hover td { background: rgba(59, 130, 246, 0.04); }

.uct-rt-num { color: #FFFFFF; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- stacked cards below 820px. No horizontal scrolling at any width. --- */
@media (max-width: 820px) {

  /* thead is hidden from sight but stays in the accessibility tree, so the
     table is still announced correctly by a screen reader. */
  .uct-rt-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .uct-rt-wrap { border: none; background: transparent; border-radius: 0; }
  .uct-rt-table { display: block; table-layout: auto; font-size: 14px; }
  .uct-rt-table tbody { display: block; }

  .uct-rt-table tbody tr {
    display: block;
    background: #111B2E;
    border: 1px solid rgba(55, 75, 100, 0.3);
    border-radius: 14px;
    padding: 4px 0;
    margin-bottom: 14px;
  }
  .uct-rt-table tbody tr:last-child { margin-bottom: 0; }

  .uct-rt-table th:nth-child(n), .uct-rt-table td:nth-child(n) { width: auto; }

  .uct-rt-table tbody th {
    display: block;
    font-size: 15px;
    padding: 12px 16px 10px;
    border-bottom: 1px solid rgba(55, 75, 100, 0.25);
  }

  /* Exactly TWO flex children: the ::before label and .uct-rt-v. Without the
     wrapper span, every text node and <span> inside the cell becomes its own
     flex item and the value fragments across the row. */
  .uct-rt-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    padding: 9px 16px;
    border-bottom: none;
  }

  .uct-rt-table tbody td .uct-rt-v {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
  }

  /* the header text each value belongs to, restored as an inline label */
  .uct-rt-table tbody td::before {
    content: attr(data-label);
    color: #5A7090;
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .uct-rt-table tbody tr:hover th,
  .uct-rt-table tbody tr:hover td { background: transparent; }
  /* cells carry a <br> between the value and its qualifier. Tighten that
     second line so a stacked card does not read as a loose list. */
  .uct-rt-table tbody td { line-height: 1.45; }
  .uct-rt-table tbody td br { line-height: 0.8; }
}

/* Below 360px the two columns stop fitting side by side, so the label moves
   above its value. Kept off at 375px, where side by side still reads better. */
@media (max-width: 360px) {
  .uct-rt-table tbody td { flex-direction: column; align-items: flex-start; gap: 2px; }
  .uct-rt-table tbody td .uct-rt-v { text-align: left; }
}