.elementor-1903 .elementor-element.elementor-element-961a8d8{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1903 .elementor-element.elementor-element-395b59d.elementor-element{--align-self:center;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-1903 .elementor-element.elementor-element-961a8d8{--content-width:780px;}}/* Start custom CSS for html, class: .elementor-element-395b59d *//* ==========================================================================
   1. Root Variables & Global Styles
   ========================================================================== */

:root {
  /* Colors */
  --c-primary: #667eea;
  --c-secondary: #764ba2;
  --c-text-body: #2c3e50;
  --c-text-light: #495057;
  --c-text-muted: #6c757d;
  --c-bg-light: #f8f9fa;
  --c-bg-white: #ffffff;
  --c-border: #e9ecef;

  /* Gradients */
  --grad-primary: linear-gradient(135deg, var(--c-primary), var(--c-secondary));
  --grad-subtle: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --grad-highlight: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  --grad-workflow: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);

  /* Typography */
  --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --line-height-base: 1.6;

  /* Sizing & Shadows */
  --border-radius-s: 10px;
  --border-radius-m: 15px;
  --border-radius-l: 20px;
  --shadow-soft: 0 5px 15px rgba(0, 0, 0, 0.08);
  --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Base styles for the container element */
.vf-body-container {
  font-family: var(--font-family-sans);
  line-height: var(--line-height-base);
  color: var(--c-text-body);
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   2. Layout Containers
   ========================================================================== */

/*
  WORDPRESS THEME ADJUSTMENT:
  The parent container is now set to 100% width. This allows it to fill the
  content area provided by the WordPress theme, preventing double margins.
*/
.vf-body-container {
  width: 100%;
}

.vf-main-wrapper {
  background: var(--c-bg-white);
  border-radius: var(--border-radius-m);
  padding: 10px;
  box-shadow: var(--shadow-medium);
}

.vf-main-section {
  margin: 30px 0;
}

/* ==========================================================================
   3. Typography & Text Elements
   ========================================================================== */

.vf-header-title {
  font-size: 1.8em; /* MOBILE ADJUSTMENT: Slightly smaller font size on mobile */
  text-align: center;
  color: var(--c-secondary);
  margin-bottom: 10px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
  word-wrap: break-word;
}

.vf-header-subtitle {
  font-size: 1.1em;
  text-align: center;
  color: var(--c-primary);
  margin-bottom: 30px;
  padding: 0 10px;
}

.vf-section-header {
  font-size: 1.5em; /* MOBILE ADJUSTMENT: Slightly smaller font size on mobile */
  color: var(--c-secondary);
  margin-bottom: 20px;
  padding-left: 12px;
  border-left: 4px solid var(--c-primary);
  word-wrap: break-word;
}

.vf-subsection-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 1.2em; /* MOBILE ADJUSTMENT: Slightly smaller font size on mobile */
  color: var(--c-text-light);
  margin-bottom: 15px;
}

/* ==========================================================================
   4. Components
   ========================================================================== */

/* --- Subsection & Overview Boxes --- */
.vf-subsection,
.vf-system-overview-box,
.vf-highlight-box,
.vf-workflow-box,
.vf-points-tier-container {
  padding: 15px; /* MOBILE ADJUSTMENT: Reduced padding for more space */
  margin: 15px 0;
}

.vf-subsection {
  background: var(--c-bg-light);
  border: 1px solid var(--c-border);
  border-radius: var(--border-radius-s);
}

.vf-system-overview-box {
  background: var(--grad-subtle);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
}

.vf-highlight-box {
  background: var(--grad-highlight);
  border-radius: var(--border-radius-s);
  border-left: 4px solid var(--c-secondary);
}

.vf-workflow-box {
  background: var(--grad-workflow);
  border-radius: var(--border-radius-s);
  color: var(--c-text-body);
  font-size: 1em;
  text-align: center;
  box-shadow: var(--shadow-soft);
  word-wrap: break-word;
}

/* --- Cards & Grids --- */
.vf-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin: 20px 0;
}

.vf-feature-card {
  background: var(--c-bg-white);
  border-radius: var(--border-radius-s);
  padding: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  border-top: 3px solid var(--c-primary);
}

.vf-feature-card-title {
  font-size: 1.1em;
  font-weight: bold;
  color: var(--c-secondary);
  margin-bottom: 8px;
}

.vf-feature-card p {
  font-size: 0.95em;
  margin: 0;
}

.vf-success-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 20px 0;
}

.vf-metric-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 80px;
  padding: 15px;
  background: var(--grad-primary);
  color: var(--c-bg-white);
  text-align: center;
  border-radius: var(--border-radius-s);
}

.vf-metric-value {
  font-size: 1.6em;
  font-weight: bold;
  margin-bottom: 3px;
}

.vf-metric-label {
  font-size: 0.85em;
  opacity: 0.9;
}

/* --- Table --- */
.vf-table-container {
  overflow-x: auto; /* This makes the container scrollable on the X-axis */
  margin: 20px 0;
  border-radius: var(--border-radius-s);
  box-shadow: var(--shadow-soft);
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.vf-example-table {
  width: 100%;
  min-width: 500px; /* MOBILE ADJUSTMENT: Set a minimum width to prevent crushing content. Adjust as needed. */
  border-collapse: collapse;
  font-size: 0.9em;
}

.vf-example-table th,
.vf-example-table td {
  padding: 8px 10px; /* MOBILE ADJUSTMENT: Reduced padding */
  white-space: nowrap; /* Prevent text from wrapping to new lines */
}

.vf-example-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--grad-primary);
  color: var(--c-bg-white);
  font-weight: 600;
  text-align: left;
}

.vf-example-table td {
  background: var(--c-bg-white);
  border-bottom: 1px solid var(--c-border);
}

.vf-example-table tr:last-child td {
  border-bottom: none;
}

/* --- Badges & Icons --- */
.vf-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: var(--grad-primary);
  color: var(--c-bg-white);
  font-size: 1.1em;
  border-radius: 50%;
}

.vf-badge {
  display: inline-block;
  padding: 4px 8px;
  background: var(--c-primary);
  color: var(--c-bg-white);
  font-size: 0.8em;
  border-radius: 15px;
  margin: 2px;
  white-space: nowrap;
}

/* --- Lists & Dividers --- */
.vf-section-divider {
  height: 2px;
  margin: 30px 0;
  background: var(--grad-primary);
  border: none;
  border-radius: 2px;
}

.vf-bullet-list {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

.vf-bullet-list li {
  position: relative;
  padding: 8px 0 8px 28px;
  font-size: 0.95em;
  line-height: 1.5;
}

.vf-bullet-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-primary);
  font-weight: bold;
  font-size: 1.1em;
}

/* --- Tiers --- */
.vf-points-tier-container {
  background: var(--c-bg-white);
  border-radius: var(--border-radius-s);
  box-shadow: var(--shadow-soft);
}

.vf-tier-level {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px;
  margin: 8px 0;
  font-size: 0.95em;
  color: var(--c-bg-white);
  border-radius: 8px;
}

.vf-tier-standard { background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%); }
.vf-tier-silver { background: linear-gradient(135deg, #c0c0c0 0%, #808080 100%); }
.vf-tier-gold { background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%); color: var(--c-text-body); }
.vf-tier-platinum { background: linear-gradient(135deg, #e0e0e0 0%, #4a4a4a 100%); }

/* --- Footer & Disclaimer --- */
.vf-disclaimer-box {
  margin-top: 15px;
  padding: 12px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  font-size: 0.8em;
  line-height: 1.4;
  color: #856404;
  text-align: center;
}

.vf-footer {
  margin-top: 30px;
  padding: 15px;
  background: var(--c-bg-light);
  border-radius: var(--border-radius-s);
  text-align: center;
}

.vf-footer p {
  color: var(--c-text-muted);
  font-size: 0.9em;
  margin: 3px 0;
}

/* ==========================================================================
   5. Media Queries
   ========================================================================== */

/* --- Tablet (600px and up) --- */
@media (min-width: 600px) {
  .vf-main-wrapper { padding: 15px; }
  .vf-header-title { font-size: 2.3em; }
  .vf-section-header { font-size: 1.8em; }
  .vf-subsection-title { font-size: 1.3em; }
  .vf-feature-grid { grid-template-columns: repeat(2, 1fr); }
  .vf-success-metrics { grid-template-columns: repeat(3, 1fr); }
  .vf-example-table { font-size: 0.95em; min-width: auto; /* Reset min-width */ }
  .vf-example-table th,
  .vf-example-table td { padding: 12px; white-space: normal; /* Allow text to wrap again */ }
}

/* --- Desktop (992px and up) --- */
@media (min-width: 992px) {
  .vf-main-wrapper { padding: 40px; border-radius: var(--border-radius-l); }
  .vf-header-title { font-size: 2.5em; }
  .vf-header-subtitle { font-size: 1.2em; }
  .vf-section-header { font-size: 2em; padding-left: 15px; border-left-width: 5px; }
  .vf-subsection { padding: 25px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
  .vf-subsection:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0,0,0,0.15); }
  .vf-subsection-title { font-size: 1.5em; }
  .vf-icon-badge { width: 40px; height: 40px; font-size: 1.2em; }
  .vf-feature-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
  .vf-success-metrics { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
  .vf-metric-card { padding: 20px; transition: transform 0.3s ease; }
  .vf-metric-card:hover { transform: scale(1.05); }
  .vf-tier-level { transition: transform 0.3s ease; }
  .vf-tier-level:hover { transform: translateX(10px); }
  .vf-example-table { font-size: 1em; }
  .vf-workflow-box { font-size: 1.1em; padding: 20px; }
}

/* --- Accessibility & Special Cases --- */
@media (pointer: coarse) {
  .vf-subsection,
  .vf-feature-card,
  .vf-metric-card,
  .vf-tier-level {
    min-height: 48px;
    touch-action: manipulation;
  }
}

@media print {
  body,
  .vf-body-container {
    -webkit-font-smoothing: auto;
    color: #000;
    background: #fff;
  }
  .vf-main-wrapper,
  .vf-system-overview-box,
  .vf-feature-card,
  .vf-table-container,
  .vf-subsection:hover {
    box-shadow: none;
    border: 1px solid #ccc;
  }
  .vf-subsection:hover {
    transform: none;
  }
  .vf-header-title,
  .vf-header-subtitle,
  .vf-section-header {
    text-shadow: none;
  }
  .vf-tier-level,
  .vf-metric-card,
  .vf-example-table th {
    background: #f2f2f2;
    color: #000;
  }
}/* End custom CSS */