/* ==========================================================================
   aspectratio.css   -   /image/aspect-ratio/
   UnitConverterTool.com  |  Image Tools silo

   ONE stylesheet per page (WIDGET-MARKUP-GOLD-STANDARD.txt Rule 10).
   Shipping the widget styles as a second file would overwrite this one on
   the server, because both would be called aspectratio.css.

     PART 1  -  TOOL APP      accent #4a90ff   (tool-build.md 1b)
     PART 2  -  SEO WIDGETS   accent #3B82F6   (silo colour)

   The two accents are DELIBERATELY different. Do not harmonise them.
   Verified before merge: ZERO CSS class overlap between the two halves.
   Upload to /wp-content/uploads/2024/02/imageresize/aspectratio/
   then PURGE LITESPEED. No version query strings anywhere, ever.
   ========================================================================== */


/* ==========================================================================
   PART 1  -  TOOL APP
   Built by Claude Code. Reproduced verbatim, not edited.
   ========================================================================== */

/* ==========================================================================
   TOOL BLOCK START - aspect-ratio
   Aspect Ratio Calculator - UnitConverterTool.com
   Silo: Image Tools   Accent: #4a90ff   Hover: #3a7fee
   Self-contained. Built to tool-build.md sections 1 and 3.

   This tool takes no file, so the upload area, the trust strip, the cloud
   split button, the cloud URL modal, the progress bar and the file row are
   all deliberately absent. Nothing here is unused.

   The 10 SEO widget styles get appended after the END banner.
   ========================================================================== */

/* ---- 3a. ROOT AND HEADING ---- */
.uct-tool {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    font-family: 'DM Sans', sans-serif;
    color: #e5e7eb;
}
.uct-tool_heading { text-align: center; margin-bottom: 28px; }
.uct-tool_heading h1 { font-size: 32px; font-weight: 700; color: #fff; margin: 0 0 10px; }
.uct-tool_description { font-size: 15px; color: #9ca3af; margin: 0; line-height: 1.6; }

/* ---- 3b. LAYOUT ---- */
.uct-tool-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    align-items: start;
}
@media (max-width: 1024px) {
    .uct-tool-layout { grid-template-columns: 1fr; }
}

/* ---- 3e. OPTIONS PANEL, TABS, INPUTS, PRESETS ---- */
.uct-options-panel {
    background: #1a1f2e; border: 1px solid #3a4258; border-radius: 12px;
    overflow: hidden;
}
.uct-options-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; min-height: 44px; cursor: pointer; user-select: none;
}
.uct-options-toggle:focus-visible { outline: 2px solid #4a90ff; outline-offset: -2px; }
.uct-options-toggle-left {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; color: #e5e7eb;
    flex-wrap: wrap;
}
.uct-options-toggle-arrow { color: #9ca3af; transition: transform .2s ease; }
.uct-options-panel.collapsed .uct-options-toggle-arrow { transform: rotate(-90deg); }

/* Live state badge. Shows the current answer while the panel is closed. */
.uct-options-summary { font-size: 12px; font-weight: 400; color: #9ca3af; }

/* visibility, not just height. Without it the collapsed panel keeps all of its
   controls focusable and in the accessibility tree at zero height, and
   collapsed is the DEFAULT state on mobile. The delay on the collapsed rule
   lets the slide finish before the content is removed; the base rule's 0s
   delay brings it straight back on expand. */
.uct-options-body {
    max-height: 2000px; overflow: hidden;
    padding: 0 18px 18px;
    visibility: visible;
    transition: max-height .25s ease, padding .25s ease, visibility 0s linear 0s;
}
.uct-options-panel.collapsed .uct-options-body {
    max-height: 0; padding-top: 0; padding-bottom: 0;
    visibility: hidden;
    transition: max-height .25s ease, padding .25s ease, visibility 0s linear .25s;
}

.uct-options-section { padding-top: 16px; }
.uct-options-section + .uct-options-section {
    margin-top: 16px; border-top: 1px solid #2a3348;
}
.uct-options-section-label {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: #9ca3af;
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px;
}

/* TABS */
.uct-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.uct-tab {
    flex: 1; min-width: 70px; min-height: 44px;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: #252d3f; border: 1px solid #3a4258; border-radius: 8px;
    padding: 10px 12px; font-family: inherit; font-size: 13px; font-weight: 600;
    color: #9ca3af; cursor: pointer; transition: all .15s ease;
    text-align: center;
}
.uct-tab:hover { border-color: #4a90ff; color: #e5e7eb; }
.uct-tab.active { background: #4a90ff; border-color: #4a90ff; color: #fff; }
.uct-tab:focus-visible { outline: 2px solid #4a90ff; outline-offset: 2px; }

/* SUB-PANELS - one per mode tab */
.uct-subpanel { display: none; margin-top: 14px; }
.uct-subpanel.active { display: block; }
.uct-subpanel-title { font-size: 13px; font-weight: 600; color: #e5e7eb; margin-bottom: 10px; }
/* The second title in a panel needs to clear the input row above it. */
.uct-input-row + .uct-subpanel-title { margin-top: 16px; }
/* The Fit to box mode tabs sit under their own input rows. */
.uct-subpanel .uct-tabs { margin-top: 14px; }

/* NUMBER INPUT PAIR */
.uct-input-row { display: flex; align-items: flex-end; gap: 10px; }
.uct-input-row + .uct-input-row { margin-top: 10px; }
.uct-input-group { flex: 1; min-width: 0; }
.uct-input-group label {
    display: block; font-size: 12px; color: #9ca3af; margin-bottom: 5px;
}
.uct-input-group input,
.uct-input-field {
    width: 100%; box-sizing: border-box;
    background: #1e2538; border: 1px solid #3a4258; border-radius: 6px;
    padding: 10px 12px; min-height: 44px;
    font-family: inherit; font-size: 14px; color: #e5e7eb;
}
.uct-input-group input:focus,
.uct-input-field:focus { outline: none; border-color: #4a90ff; }

/* ASPECT LOCK */
.uct-aspect-lock {
    background: #252d3f; border: 1px solid #3a4258; border-radius: 6px;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #9ca3af; flex-shrink: 0;
}
.uct-aspect-lock.locked { border-color: #4a90ff; color: #4a90ff; }
.uct-aspect-lock:focus-visible { outline: 2px solid #4a90ff; outline-offset: 2px; }
.uct-aspect-lock .lock-icon { display: none; }
.uct-aspect-lock .unlock-icon { display: block; }
.uct-aspect-lock.locked .lock-icon { display: block; }
.uct-aspect-lock.locked .unlock-icon { display: none; }

/* PRESET CARDS */
#preset-wrap-aspect-ratio { margin-top: 20px; }
.uct-preset-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px;
}
.uct-preset-card {
    background: #252d3f; border: 1px solid #3a4258; border-radius: 8px;
    padding: 10px; text-align: center; cursor: pointer; transition: all .15s ease;
    min-height: 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.uct-preset-card:hover { border-color: #4a90ff; }
.uct-preset-card.selected { background: #1e2538; border-color: #4a90ff; }
.uct-preset-card:focus-visible { outline: 2px solid #4a90ff; outline-offset: 2px; }
.uct-preset-name { font-size: 13px; font-weight: 600; color: #e5e7eb; }
/* The dims line names what each ratio is for, so it is text a user must read.
   tool-build.md 1a: #6b7280 is decoration only and fails WCAG AA on #0A0F1C. */
.uct-preset-dims { font-size: 11px; color: #9ca3af; margin-top: 2px; line-height: 1.4; }

/* --------------------------------------------------------------------------
   3e-ratio. RATIO PREVIEW  (four new classes, reported in the handoff)
   A live rectangle drawn at the current aspect ratio. The JS measures the
   stage with getBoundingClientRect and sets --uct-rw / --uct-rh in PIXELS.
   Do NOT use the CSS aspect-ratio property here: with max-width clamping it
   silently breaks the ratio on extreme values (21:9 on a 375px phone).
   Deterministic pixel values from JS are the only reliable way.
   -------------------------------------------------------------------------- */
.uct-ratio-preview {
    display: flex; align-items: center; justify-content: center;
    background: #1a1f2e; border: 1px solid #3a4258; border-radius: 12px;
    padding: 18px; margin-top: 16px; min-height: 240px; overflow: hidden;
}
.uct-ratio-box {
    position: relative;
    width: var(--uct-rw, 320px); height: var(--uct-rh, 180px);
    background: rgba(74, 144, 255, .10);
    border: 2px solid #4a90ff; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: width .18s ease, height .18s ease;
}
/* The target box in Fit mode, or the crop region in Fill mode.
   top / left / transform centre it deterministically: the static position of
   an absolutely positioned flex child is not centred by every engine. */
.uct-ratio-box-inner {
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: var(--uct-riw, 0px); height: var(--uct-rih, 0px);
    border: 2px dashed #9ca3af; border-radius: 4px;
    background: rgba(0, 0, 0, .28);
    pointer-events: none;
}
/* position and z-index keep the label above the absolutely positioned inner
   box. Without them the inner box paints over the text. */
.uct-ratio-box-label {
    position: relative; z-index: 1;
    font-size: 13px; font-weight: 600; color: #e5e7eb;
    text-align: center; line-height: 1.5; padding: 0 8px;
}

/* ---- 3f. ACTIONS ---- */
.uct-action-btn-primary {
    width: 100%; margin-top: 14px; min-height: 52px;
    background: #1a2542; color: #fff;
    border: 1px solid #4a90ff; border-radius: 10px;
    font-family: inherit; font-size: 16px; font-weight: 700;
    cursor: pointer; transition: background .15s ease;
}
.uct-action-btn-primary:hover:not(:disabled) { background: #222f52; }
.uct-action-btn-primary:disabled { opacity: .5; cursor: not-allowed; }

.uct-controls-area {
    display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0;
}
.uct-secondary-btn {
    background: transparent; color: #9ca3af;
    border: 1px solid #3a4258; border-radius: 8px;
    padding: 12px 22px; min-height: 44px;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.uct-secondary-btn:hover { border-color: #4a90ff; color: #e5e7eb; }
.uct-secondary-btn:focus-visible { outline: 2px solid #4a90ff; outline-offset: 2px; }

/* The two lower buttons pair an SVG with a text label. Scoped to this one
   toolbar so the shared button component is unchanged. */
#controls-area-aspect-ratio .uct-secondary-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
#controls-area-aspect-ratio .uct-secondary-btn svg { flex-shrink: 0; }

/* STICKY PRIMARY ACTION ON MOBILE.
   Only sticky once the user has edited a field, so a pristine page load does
   not float a button over nothing. The JS adds .uct-has-input to the root. */
@media (max-width: 768px) {
    .uct-tool.uct-has-input .uct-action-btn-primary {
        position: fixed; left: 16px; right: 16px; bottom: 16px;
        width: auto; z-index: 40; box-shadow: 0 6px 20px rgba(0,0,0,.5);
    }
    .uct-tool.uct-has-input .uct-results,
    .uct-tool.uct-has-input .uct-privacy-note { padding-bottom: 80px; }
}

/* ---- 3g. RESULTS ---- */
.uct-result-card {
    background: rgba(74, 144, 255, .10);
    border-left: 3px solid #4a90ff; border-radius: 10px;
    padding: 22px; margin-bottom: 16px;
}
.uct-result-label { font-size: 13px; color: #9ca3af; margin-bottom: 6px; }
.uct-result-value { font-size: 34px; font-weight: 700; color: #fff; line-height: 1.2; word-break: break-word; }
.uct-result-sub { font-size: 13px; color: #9ca3af; margin-top: 8px; line-height: 1.6; }

.uct-result-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
.uct-result-tile {
    background: #1a1f2e; border: 1px solid #3a4258; border-radius: 10px; padding: 16px;
}
.uct-result-tile-label { font-size: 12px; color: #9ca3af; }
.uct-result-tile-value { font-size: 20px; font-weight: 700; color: #e5e7eb; margin-top: 4px; word-break: break-word; }

/* Honest size line under the result card in Resize by ratio mode. */
.uct-size-compare { font-size: 12px; margin-top: 4px; margin-bottom: 16px; line-height: 1.6; }
.uct-size-decreased { color: #4ade80; }
.uct-size-increased { color: #fbbf24; }
.uct-size-same { color: #9ca3af; }

/* CODE OUTPUT */
.uct-output-block {
    position: relative;
    background: #1e2538; border: 1px solid #3a4258; border-radius: 10px;
    padding: 16px; padding-right: 100px;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 13px; line-height: 1.65; color: #e5e7eb;
    white-space: pre-wrap; word-break: break-word;
    margin-top: 16px;
}
.uct-copy-btn {
    position: absolute; top: 12px; right: 12px;
    background: #4a90ff; color: #fff; border: none; border-radius: 6px;
    padding: 8px 14px; min-height: 36px;
    font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.uct-copy-btn:hover:not(:disabled) { background: #3a7fee; }
.uct-copy-btn:disabled { opacity: .5; cursor: not-allowed; }
.uct-copy-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* DATA TABLE. Not used by the tool itself. Widget 05 on this page is a ratio
   reference table rather than a comparison slider, and there is no shared
   stylesheet, so the table component ships here or it renders unstyled. */
.uct-table-wrap { overflow-x: auto; }
.uct-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; }
.uct-table th {
    text-align: left; padding: 10px 12px;
    background: #252d3f; color: #9ca3af;
    font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .04em;
}
.uct-table td { padding: 10px 12px; border-top: 1px solid #2a3348; color: #e5e7eb; }
.uct-table tr:hover td { background: #1e2538; }

/* ---- 3h. MESSAGES, NOTES, UTILITY ---- */
.uct-error-msg {
    background: rgba(192,57,43,.12); border: 1px solid #c0392b; border-radius: 8px;
    padding: 12px 16px; margin-bottom: 10px; font-size: 13px; color: #e5e7eb;
}

.uct-helper-text { font-size: 13px; color: #9ca3af; margin: 10px 0 0; line-height: 1.6; }

.uct-output-note, .uct-privacy-note {
    font-size: 12px; color: #9ca3af; text-align: center;
    line-height: 1.6; margin: 14px 0 0;
}
.uct-hidden { display: none !important; }

.uct-tool a:not(.uct-download-link):not(.uct-action-btn) { color: #4a90ff; }

/* ---- 3i. MOBILE ---- */
@media (max-width: 768px) {
    .uct-tool { padding: 0 16px; overflow-x: hidden; }
    .uct-tool_heading h1 { font-size: 24px; }
    .uct-result-value { font-size: 28px; }
    .uct-preset-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
    #controls-area-aspect-ratio .uct-secondary-btn { padding: 12px 14px; font-size: 13px; }
}
@media (max-width: 480px) {
    .uct-tool_heading h1 { font-size: 21px; }
    .uct-tabs { flex-direction: column; }
    .uct-tab { width: 100%; }
    .uct-input-row { flex-wrap: wrap; }
    .uct-ratio-preview { min-height: 200px; padding: 14px; }
    .uct-ratio-box-label { font-size: 12px; }
    .uct-result-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
    .uct-output-block { padding-right: 16px; padding-top: 52px; }
    .uct-copy-btn { top: 10px; right: 10px; }
}

/* ==========================================================================
   TOOL BLOCK END - aspect-ratio
   ========================================================================== */


/* ==========================================================================
   PART 2  -  SEO WIDGETS  (01 through 10)
   jpgtopng.css, the gold standard, copied per Rule 0.
   Only permitted changes applied:
     0b  ADDITIONS ONLY block at the very end (.uct-rt-* for widget 05)
     0c  breadcrumb block swapped for the tool-page full-bleed pattern
   ========================================================================== */

/* === RANK MATH BREADCRUMB (TOOL PAGES) === */
/* Full-bleed pattern from BUILD-SEO-RULES.txt. The plain block that ships in
   jpgtopng.css is stale and leaves a light strip above the dark widgets. */
.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 - aspect-ratio
   New to this page, appended per WIDGET-MARKUP-GOLD-STANDARD.txt Rule 0b.
   Nothing above this banner has been edited except the breadcrumb block,
   which Rule 0c requires be swapped for the tool-page full-bleed pattern.

   WHY THESE EXIST
   Widget 05 on this page is a ratio reference table, not a comparison
   slider: a calculator that never opens a file has no honest before and
   after to show. The table needs styling in the WIDGET palette
   (#111B2E cards, rgba(55,75,100,.3) borders, #C8D8E8 body text) so it sits
   with widgets 01-10 rather than with the tool app above them.

   These are NOT the .uct-table classes in PART 1. Those use the tool
   palette and are now unused; PART 1 can drop them safely. Deliberately
   different class names so the two halves keep zero overlap.
   ========================================================================== */

.uct-rt-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(55, 75, 100, 0.3);
  border-radius: 14px;
  background: #111B2E;
}

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

.uct-rt-table thead th {
  background: rgba(59, 130, 246, 0.08);
  color: #8899AA;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(55, 75, 100, 0.4);
  white-space: nowrap;
}

.uct-rt-table tbody td {
  color: #C8D8E8;
  padding: 13px 16px;
  border-top: 1px solid rgba(55, 75, 100, 0.22);
  text-align: left;
  line-height: 1.6;
  vertical-align: middle;
}

.uct-rt-table tbody tr:first-child td {
  border-top: none;
}

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

.uct-rt-name {
  color: #3B82F6;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .uct-rt-table {
    font-size: 13px;
  }
  .uct-rt-table thead th {
    padding: 12px 13px;
  }
  .uct-rt-table tbody td {
    padding: 11px 13px;
  }
  .uct-rt-name {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .uct-rt-wrap {
    border-radius: 12px;
  }
  .uct-rt-table {
    font-size: 12.5px;
    min-width: 520px;
  }
  .uct-rt-name {
    font-size: 13.5px;
  }
}

/* ==========================================================================
   END ADDITIONS ONLY - aspect-ratio
   ========================================================================== */