.elementor-3639 .elementor-element.elementor-element-4ef5714c{--display:flex;}.elementor-3639 .elementor-element.elementor-element-bc41b9a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-3639 .elementor-element.elementor-element-69593fe{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-4af3bf4 */:root {
    --primary-brand: #3b82f6;
    --border-color: #dee2e6;
    --background-light: #f8f9fa;
    --secondary-gray: #6c757d;
    --success: #10b981;
    --danger: #ef4444;
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --accent-purple: #764ba2;
    --shadow-subtle: 0 4px 12px rgba(0,0,0,0.08);
    --stat-bg-color: #f0f7ff; /* Lighter background for the enhanced stats box */
}

/* Base Styles */
body {font-family: sans-serif;margin: 0;padding: 0;background-color: var(--background-light);color: var(--text-primary);}
.container {max-width: 1200px;margin: 0 auto;padding: 20px;}
.hidden {display: none !important;}
.full-width {width: 100%;}
.divider {height: 1px;background: var(--border-color);margin: 1.5rem 0;}

/* Buttons & Links */
.btn {padding: 0.75rem 1.5rem;border-radius: 6px;cursor: pointer;font-weight: 600;transition: background-color 0.2s, opacity 0.2s;text-decoration: none;display: flex;align-items: center;justify-content: center;text-align: center;border: 1px solid transparent;}
.btn-secondary {background: transparent;color: var(--secondary-gray);border: 1px solid var(--border-color);}
.btn-secondary:hover {background: #e9ecef;}

/* Utility for small buttons in tool */
.btn-small {padding: 5px 10px;font-size: 0.8rem;}

/* Page Header (H1) */
.page-header {text-align: center;margin-bottom: 2rem;padding-top: 1rem;}
.page-header h1 {font-size: 2.5rem;margin-bottom: 0.5rem;color: var(--primary-brand);line-height: 1.2;}
.page-header p {color: var(--secondary-gray);font-size: 1.1rem;}

/* Tool Container */
.tool-container {background: white;padding: 2rem;border-radius: 8px;border: 1px solid var(--border-color);margin-bottom: 2rem;box-shadow: var(--shadow-subtle);}

/* Input Section */
.input-section {margin-bottom: 1.5rem;}
.text-input-container {position: relative;display: flex;flex-direction: column;}
.header-row {display: flex;justify-content: space-between;align-items: center;margin-bottom: 0.5rem;}
.link-btn {background: none;border: none;color: var(--primary-brand);cursor: pointer;text-decoration: underline;font-size: 0.9rem;padding: 0;}

#textInput {
    width: 100%;
    min-height: 250px; /* Increased height */
    padding: 1rem;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    resize: vertical;
    background: #f8f9fa;
    color: #374151;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
#textInput:focus {outline: 2px solid var(--primary-brand);background: white;border-color: var(--primary-brand);}

/* Text Actions */
.text-actions {display: flex;gap: 10px;justify-content: flex-end;margin-top: 10px;}
.btn-icon {margin-right: 5px;}

/* Goal Section */
.goal-section {background: var(--background-light);padding: 1.5rem;border-radius: 6px;margin-bottom: 2rem;}
.goal-section h3 {font-size: 1.2rem;margin-bottom: 1rem;color: var(--primary-brand);}
.goal-inputs {display: grid;grid-template-columns: 1fr 1fr;gap: 15px;}
.goal-input label {display: block;font-weight: 500;font-size: 0.9rem;margin-bottom: 5px;color: var(--text-secondary);}
.goal-input input, .goal-input select {width: 100%;padding: 0.6rem;border: 1px solid var(--border-color);border-radius: 6px;font-size: 1rem;}

/* Progress Bar */
.goal-progress {grid-column: 1 / -1;margin-top: 1rem;text-align: center;}
.progress-bar {width: 100%;height: 10px;background: #e0e0e0;border-radius: 5px;overflow: hidden;margin-bottom: 5px;}
.progress-fill {height: 100%;width: 0%;background: linear-gradient(135deg, var(--primary-brand), var(--accent-purple));transition: width 0.3s ease;}
.progress-text {font-weight: 600;color: var(--text-secondary);}

/* Results Section */
.results-section h3 {font-size: 1.2rem;margin-bottom: 1rem;border-bottom: 1px solid var(--border-color);padding-bottom: 5px;color: var(--primary-brand);}

/* Metrics Grid */
.metrics-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 15px;margin-bottom: 2rem;}
.metric-card {background: #fff;border: 1px solid var(--border-color);border-radius: 8px;padding: 1rem;display: flex;align-items: center;gap: 10px;box-shadow: 0 1px 3px rgba(0,0,0,0.05);}
.metric-icon {font-size: 1.5rem;}
.metric-label {font-size: 0.8rem;color: var(--text-secondary);}
.metric-value {font-size: 1.5rem;font-weight: 700;color: var(--text-primary);}

/* --- ADVANCED STATS (BEAUTIFIED) --- */
.advanced-stats {
    background: var(--stat-bg-color); /* Light blue background */
    padding: 1.5rem;
    border-radius: 10px; /* More pronounced rounded corners */
    border: 1px solid #d4e3f4; /* Subtle border */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Slightly lifted effect */
}

.advanced-stats h3 {
    font-size: 1.4rem; /* Larger, more impactful heading */
    margin-bottom: 1.2rem;
    padding-bottom: 5px;
    color: var(--text-primary);
    
    /* Subtle gradient for visual appeal */
    background: linear-gradient(to right, var(--primary-brand), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom: 2px solid #a8c1e0; /* Stronger divider */
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px; /* Increased horizontal gap */
    padding-top: 10px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #c7d2e3; /* Stronger, cleaner separator */
}
.stat-item:last-child, .stats-grid > :nth-last-child(-n+2 of .stat-item) {
    border-bottom: none; /* Clear separation for the last row */
}

.stat-label {
    font-size: 1rem; /* Better readability */
    color: var(--text-secondary);
    font-weight: 500;
}
.stat-value {
    font-weight: 700; /* Bolder value */
    color: var(--primary-brand); /* Highlight value color */
    font-size: 1.1rem;
}
/* --- END ADVANCED STATS --- */


/* Loader */
.loader-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.9);display: flex;flex-direction: column;justify-content: center;align-items: center;z-index: 9999;transition: opacity 0.3s;opacity: 0;}
.loader-overlay.active {opacity: 1;}
.spinner {width: 40px;height: 40px;border: 4px solid #eee;border-top: 4px solid var(--primary-brand);border-radius: 50%;animation: spin 1s linear infinite;}
@keyframes spin {to {transform: rotate(360deg);}}


/* Responsive */
@media (max-width: 992px) {
    .metrics-grid {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 600px) {
    .metrics-grid {grid-template-columns: 1fr;}
    .stats-grid {grid-template-columns: 1fr;}
    .tool-container {padding: 1.5rem;}
    .goal-inputs {grid-template-columns: 1fr;}
    .page-header h1 {font-size: 2rem;}
    
    /* Mobile specific adjustments */
    .advanced-stats h3 {font-size: 1.2rem;}
    .stat-item {padding: 8px 0;}
    .stat-label, .stat-value {font-size: 1rem;}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d1ee204 *//* --- Word Counter Info Section Master CSS --- */
.info-section { 
    max-width: 1000px; 
    margin: 4rem auto; 
    line-height: 1.8; 
    text-align: left; 
    padding: 0 20px; 
    color: #334155; 
}

.content-block { margin-bottom: 3rem; }

/* Red Vertical Bar Headers */
.section-title { 
    font-size: 2rem; 
    font-weight: 800; 
    color: #0f172a; 
    margin-bottom: 1.2rem; 
    border-left: 6px solid #dc2626; 
    padding-left: 15px; 
    line-height: 1.2;
}

.info-section p { 
    font-size: 1.15rem; 
    margin-bottom: 1.5rem; 
    color: #475569; 
}

.info-section strong { color: #dc2626; }

/* Info & FAQ Grid Cards */
.info-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 1.5rem; 
    margin: 2rem 0; 
}

.info-card, .faq-item { 
    background: #fff; 
    padding: 2rem; 
    border-radius: 16px; 
    border: 1px solid #e2e8f0; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.02); 
    transition: 0.3s ease;
}

.info-card:hover, .faq-item:hover { 
    transform: translateY(-5px); 
    border-color: #dc2626; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); 
}

.info-card strong, .faq-item strong { 
    display: block; 
    font-size: 1.2rem; 
    color: #0f172a; 
    margin-bottom: 10px; 
}

.info-card p, .faq-item p { 
    font-size: 0.95rem; 
    color: #64748b; 
    margin: 0; 
}

/* Steps List */
.step-list { padding-left: 1.5rem; margin-bottom: 2rem; }
.step-list li { margin-bottom: 15px; font-size: 1.1rem; }

/* Professional Comparison Table */
.table-container { margin: 3rem 0; }
.responsive-table { 
    overflow-x: auto; 
    border-radius: 12px; 
    border: 1px solid #e2e8f0; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
}

table { width: 100%; border-collapse: collapse; background: white; min-width: 500px; }
th { background: #f8fafc; padding: 15px; text-align: left; font-weight: 800; color: #0f172a; border-bottom: 2px solid #e2e8f0; }
td { padding: 12px 15px; border-bottom: 1px solid #f1f5f9; color: #334155; font-size: 1rem; }
tr:nth-child(even) { background-color: #fcfcfc; }

/* Responsive Adjustments */
@media (max-width: 768px) {
    .section-title { font-size: 1.7rem; }
    .info-grid { grid-template-columns: 1fr; }
    .info-section { padding: 0 15px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ecd9d13 */<style>
/* --- Unified Bouncing Blue Links --- */
.utilix-bounce-links {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: 'Inter', -apple-system, sans-serif;
}

.utilix-bounce-links h3 {
    font-size: 1.15rem;
    color: #1e293b;
    font-weight: 800;
    margin-bottom: 25px;
    text-align: left;
}

.links-flex {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
    row-gap: 15px;
    align-items: center;
}

.bounce-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #2563eb;
    font-weight: 700;
    font-size: 1rem;
    transition: color 0.2s ease;
}

@keyframes utilixSoftBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.bounce-link:hover {
    color: #1d4ed8; 
    animation: utilixSoftBounce 0.4s ease-in-out;
    text-decoration: underline;
}

.b-icon {
    font-size: 1.1rem;
    filter: grayscale(100%);
    transition: filter 0.2s ease;
}

.bounce-link:hover .b-icon {
    filter: grayscale(0%);
}

@media (max-width: 640px) {
    .links-flex { column-gap: 20px; }
    .bounce-link { font-size: 0.9rem; }
}
</style>/* End custom CSS */