body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; color: #333; background: #f8f8f8; }

.container { width: 90%; max-width: 1200px; margin: 0 auto; }

/* Header */
header { background: #fff; padding: 20px 0; box-shadow: 0 1px 6px rgba(0,0,0,0.06); position: sticky; top: 0; z-index: 1000; width: 100%; }
.header-content { display: flex; justify-content: space-between; align-items: center; }
nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 20px; }
nav ul li a { color: #333; text-decoration: none; font-weight: bold; padding: 10px; display: block; }

/* Hide the checkbox */
#menu-toggle { display: none; }

/* Style the label to act as the menu button */
.menu-toggle-label { display: none; font-size: 2em; cursor: pointer; position: absolute; right: 20px; top: 20px; z-index: 1100; }

/* Default container card used across pages */
.dashboard-container { display: flex; max-width: 1200px; width: 100%; background: #fff; border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,0.06); margin: 30px auto; }

@media (max-width: 800px) {
    .menu-toggle-label { display: block; }
    .nav-menu { display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: absolute; top: 100%; left: 0; right: 0; max-width: 100vw; background: white; box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.1); padding: 20px 0; z-index: 999; margin: 0; }
    .nav-menu.active { display: flex; }
    .nav-menu ul { padding: 0; margin: 0; list-style: none; width: 100%; display: flex; flex-direction: column; align-items: center; }
    .nav-menu li { width: auto; text-align: center; padding: 10px 0; }
    .nav-menu li a { display: inline-block; padding: 15px; font-size: 1.2em; text-align: center; }
}

@media (max-width: 1024px) {
    .header-content img { height: 30px; }
    nav ul li { margin-left: 10px; }
}

/* Hero, buttons, and various site sections (unchanged) */
.hero-slanted { background: #005ebc; color: white; text-align: center; padding-top: 40px; padding-bottom: 100px; padding-left: 20px; padding-right: 20px; position: relative; overflow: hidden; }
/* Reduce default hero-slanted bottom padding for product pages; homepage uses .home-hero override */
.hero.hero-slanted { padding-bottom: 72px; }
.hero-slanted::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #ffffff; }
.hero-slanted::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 180px; background: #ffffff; clip-path: polygon(0% 100%, 10% 95%, 20% 100%, 30% 90%, 40% 95%, 50% 85%, 60% 70%, 65% 75%, 70% 50%, 75% 55%, 80% 40%, 85% 45%, 90% 30%, 95% 35%, 100% 10%, 100% 100%); }
.hero-slanted h1 { font-size: 2.6em; line-height: 1.15; margin: 0 0 12px; }
.hero-slanted p { font-size: 1.2em; margin-bottom: 20px; }
.btn-primary { background: #0073e6; color: white; padding: 12px 20px; text-decoration: none; font-weight: 600; border-radius: 8px; display: inline-block; border: none; cursor: pointer; font-size: 1rem; }
.btn-primary:hover, .btn-discover:hover { background: #005bb5; }
/* Back button for settings pages: light gray with dark text */
.btn-back { background: #e5e7eb; color: #111827; padding: 12px 20px; text-decoration: none; font-weight: 600; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; font-size: 1rem; }
.btn-back:hover { background: #d1d5db; color: #111827; text-decoration: none; }
.btn-back:visited { color: #111827; text-decoration: none; }
/* Green success button for Save & Update on settings pages */
.btn-green { background: #28a745; color: #fff; padding: 12px 20px; text-decoration: none; font-weight: 600; border-radius: 8px; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer; font-size: 1rem; }
.btn-green:hover { background: #218838; }
/* Danger button to standardize destructive actions */
.btn-danger { background: #d9534f; color: #fff; padding: 12px 20px; border-radius: 8px; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1rem; }
.btn-danger:hover { background: #c9302c; }
/* Generic larger button helper */
.btn-lg { padding: 14px 24px; font-size: 1rem; font-weight: 700; }
/* Neutral secondary button */
.btn-secondary { background: #e5e7eb; color: #111827; padding: 12px 20px; border-radius: 8px; border: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; font-size: 1rem; text-decoration: none; }
.btn-secondary:link,
.btn-secondary:visited,
.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus { text-decoration: none !important; outline: none; box-shadow: none; }
.btn-secondary:hover { background: #d1d5db; }
/* Gray 'Coming Soon' badge/button for not-yet-available tools */
.btn-soon { background: #e5e7eb; color: #6b7280; padding: 12px 20px; text-decoration: none; font-weight: 600; border-radius: 8px; display: inline-block; border: none; cursor: default; }
.btn-soon:hover { background: #e5e7eb; color: #6b7280; }

/* Styled file input wrapper */
.file-input { position: relative; display: inline-block; }
.file-input input[type="file"] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-input .file-trigger { background: #0073e6; color: #fff; padding: 10px 16px; border-radius: 8px; border: none; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; font-size: 1rem; }
.file-input .file-trigger:hover { background: #005bb5; }
.btn-compact { padding: 10px 16px; font-size: 0.95rem; }
.settings-form input[type="file"]::-webkit-file-upload-button { background: #0073e6; color: #fff; padding: 10px 16px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; font-size: 1rem; margin-right: 10px; }
.settings-form input[type="file"]::file-selector-button { background: #0073e6; color: #fff; padding: 10px 16px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; font-size: 1rem; margin-right: 10px; }
.settings-form input[type="file"]::-webkit-file-upload-button:hover,
.settings-form input[type="file"]::file-selector-button:hover { background: #005bb5; }

/* Make Background section buttons more compact */
.settings-form #BackgroundImage + button.btn-primary { padding: 10px 16px; font-size: 0.95rem; border-radius: 8px; }
.settings-form #backgroundPreview .btn-danger { padding: 10px 16px; font-size: 0.95rem; border-radius: 8px; }
.file-input .file-name { margin-left: 10px; color: #555; font-size: 12px; }

/* Reusable alert styles */
.alert { display: block; padding: 12px 14px; border-radius: 8px; border: 1px solid; margin: 8px 0 14px; font-weight: 600; }
.alert-error { background: #fdecec; border-color: #f2b3b3; color: #7a1c1c; }
.alert-success { background: #e9f9ef; border-color: #b6e7c9; color: #1b6b3a; }
.alert-warning { background: #fff8e5; border-color: #f3d28c; color: #7a5900; }
.alert-info { background: #e8f1fe; border-color: #bcd5fb; color: #0a4ea3; }

/* Collapsible section styling */
details.collapsible { margin: 8px 0 12px; }
details.collapsible summary { font-size: 1.1em; font-weight: 700; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 6px 0; }
details.collapsible summary::-webkit-details-marker { display: none; }
details.collapsible summary::before { content: "▸"; display: inline-block; transform: rotate(0deg); transition: transform 0.2s ease; color: #0073e6; }
details.collapsible[open] summary::before { transform: rotate(90deg); }

/* Simple vertical stack form in modal */
.stack label { font-weight: 600; margin: 6px 0 4px; display: block; }
.inline-check label { font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }

.btn-free-trial { background: linear-gradient(to bottom, #28a745, #218838); color: white; padding: 16px 23px 14px 23px; text-decoration: none; font-weight: bold; border-radius: 8px; display: inline-block; border: 4px solid #1e7e34; box-shadow: 0 4px 6px rgba(0,0,0,0.1); line-height: 1; margin-top: 0; transition: none; }
.btn-free-trial-menu { background: #28a745; color: white; padding: 10px 20px; text-decoration: none; font-weight: bold; border-radius: 5px; display: inline-block; border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transition: background 0.2s; }
.btn-free-trial-menu:hover { background: #218838; }
.btn-login { background: none; color: #333; padding: 10px; font-weight: bold; text-decoration: none; display: block; }
.btn-login:hover { color: #333; }

.toolsuite { padding: 40px 20px; background: white; }
.toolsuite h2 { text-align: center; font-size: 2.5em; margin-bottom: 56px; }
.tool-block { display: flex; align-items: center; gap: 40px; margin-bottom: 60px; }
.tool-block img { width: 50%; max-width: 500px; border-radius: 10px; }
.tool-text { width: 50%; }
.tool-text h3 { font-size: 2em; margin-bottom: 10px; margin-top: 0px; }
.tool-text p { font-size: 1.2em; color: #666; }
/* Alternate starting with image right when an intro sits before the blocks */
.toolsuite .container > .toolsuite-intro ~ .tool-block:nth-child(odd) { flex-direction: row-reverse; }
/* Stack tool blocks vertically on small screens for better readability */
@media (max-width: 820px) {
  .tool-block { flex-direction: column !important; align-items: center; gap: 18px; }
  .tool-block img {
    width: 100%;
    max-width: 520px;
  }
  .tool-text {
    width: 100%;
    text-align: center;
  }
}

.industries { padding: 30px 20px 50px; background: #fff; text-align: center; }
.industries h2 { font-size: 2.5em; margin-bottom: 20px; }
.industries p { font-size: 1.2em; color: #666; margin-bottom: 40px; }
.industry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.industry-block { background: white; padding: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: 0.3s; }
.industry-block:hover { transform: translateY(-5px); }
.industry-block a { display: inline-block; margin-top: 10px; color: #0073e6; font-weight: bold; text-decoration: none; }
.industry-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #8a94a6; margin-bottom: 8px; }
.industry-icon i { font-size: 22px; line-height: 1; color: #8a94a6; }
.btn-discover { display: inline-block; margin-top: 40px; padding: 15px 30px; background: #0073e6; color: white; font-size: 1.2em; font-weight: bold; text-decoration: none; border-radius: 5px; transition: 0.3s; }

.mega-menu { display: none; position: absolute; left: 0; width: 100%; background: white; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 20px 0; z-index: 999; }
.mega-menu.active { display: flex; }
.mega-menu ul { display: flex; justify-content: center; width: 100%; padding: 0; margin: 0; list-style: none; }
.mega-menu ul li { padding: 10px 20px; }
.mega-menu ul li a { text-decoration: none; color: #333; font-weight: bold; }

@media (min-width: 1024px) {
  .hero-slanted { padding-top: 60px; padding-bottom: 120px; background-size: cover; }
}

.hero-chart-points { position: absolute; left: 0; bottom: 0; width: 100%; height: 180px; pointer-events: none; z-index: 2; }
.hero-chart-points span { position: absolute; width: 12px; height: 12px; background: #444444; border: 2px solid #fff; border-radius: 0; transform: translate(-50%, 50%); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.social-proof-stats { background: #f8f8f8; padding: 36px 0 24px 0; }
.stats-grid { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.stat-block { background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.07); padding: 32px 24px 24px; min-width: 260px; max-width: 300px; height: 150px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; margin-bottom: 8px; }
.stat-number { font-size: 2.5em; font-weight: bold; color: #0073e6; margin-bottom: 10px; }
.stat-label { font-size: 1.1em; color: #444; }
.cta-header { margin-left: 32px; font-size: 1.1em; padding: 12px 28px; background: #28a745; color: #fff; box-shadow: 0 2px 8px rgba(40,167,69,0.08); border: none; transition: background 0.2s; }
.cta-header:hover { background: #218838; }
/* Make homepage social-proof stats full-width on small screens */
@media (max-width: 820px) {
  .social-proof-stats .stats-grid {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    padding: 0 16px;
  }
  .social-proof-stats .stat-block {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    box-sizing: border-box;
  }
}

@media (max-width: 600px) {
  .container { display: flex; flex-direction: column; align-items: center; }
  .container div { width: 100%; text-align: center; margin-bottom: 20px; }
  .industry-grid { justify-items: center; }
  .industry-block { width: 100%; max-width: 350px; }
}
.social-proof { background: #005ebc; padding: 20px 0 10px; text-align: center; color: white; }
.social-proof-content { display: flex; flex-direction: column; align-items: center; }
.social-proof-images { width: 50%; overflow: hidden; }
.social-proof-images img { width: 100%; height: auto; object-fit: contain; }
.social-proof h2 { font-size: 2em; }
blockquote { font-size: 1.6em; line-height: 1.6; color: #f8f8f8; max-width: 600px; margin: 0 auto; font-style: italic; text-align: left; }
.stars { color: #FFD700; font-size: 1.5em; margin-top: 10px; text-align: left; letter-spacing: 5px; }
.footer-link { color: #666; text-decoration: none; }
.footer-link:hover { text-decoration: underline; }

/* Footer layout */
.site-footer { background: #f8f8f8; color: #666; padding: 40px 0; }
.footer-flex { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; gap: 20px; max-width: 1100px; margin: 0 auto; }
.footer-col { flex: 0 0 240px; }
.footer-col.footer-guides { flex: 0 0 320px; }
@media (max-width: 600px) {
  .footer-flex { justify-content: center; }
}

/* ===== Dashboard-specific styles consolidated from dashboard.php ===== */
/* Layout tweaks for dashboard */
body.dashboard { background: #f6f8fb; color: #0f172a; }

/* Sidebar */
.sidebar { width: 250px; background: #0073e6; color: #fff; padding: 20px 0; flex-shrink: 0; border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.sidebar ul { list-style: none; padding: 0; margin: 0; }
.sidebar ul li { margin: 0; position: relative; }
.sidebar ul li a { padding: 15px 20px; display: block; font-size: 15px; color: #fff; text-decoration: none; background: transparent; border-left: 3px solid transparent; }
.sidebar ul li a:hover, .has-submenu.open > a { background: rgba(255,255,255,0.12); border-left-color: rgba(255,255,255,0.6); }
.submenu { display: none; list-style: none; padding: 0; background: #005bb5; }
.has-submenu.open .submenu { display: block; }
.submenu li a { padding: 12px 20px 12px 28px; display: block; font-size: 14px; background: #005bb5 !important; color: #fff !important; text-decoration: none; border-left: 4px solid transparent; transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out; }
.submenu li a:hover, .submenu li a.active, .submenu li.active > a { background: #004494 !important; border-left-color: #002f6c !important; }

/* Sidebar icon spacing */
.sidebar .menu-item-icon { margin-right: 10px; }
.sidebar .submenu-item-icon { margin-right: 10px; }
.sidebar .submenu-arrow { margin-left: 8px; }

/* Main */
.main-content { flex-grow: 1; padding: 40px; }
.dashboard-header { display: flex; justify-content: space-between; align-items: center; background: transparent; padding: 0; box-shadow: none; margin-bottom: 20px; border-radius: 0; }
.dashboard-header h1 { margin: 0; font-size: 1.6em; letter-spacing: -0.02em; }
.dashboard-header .user-info { font-weight: bold; color: #64748b; }
.section { background: #fff; padding: 24px; border-radius: 12px; box-shadow: 0 1px 4px rgba(16,24,40,0.06); margin-bottom: 24px; border: 1px solid #e6e9ef; }
.section h2 { margin: 0 0 32px 0; font-size: 1.5em; }

/* ===== Formguard list (table) ===== */
.section-actions { display: flex; align-items: center; justify-content: flex-start; margin: 16px 0 12px; }
.with-icon { display: inline-flex; align-items: center; gap: 8px; }
.empty-state { padding: 32px; border: 1px dashed #e5e7eb; border-radius: 8px; background: #fafafa; text-align: center; }
.empty-state.centered { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: clamp(180px, 28vh, 320px); }
.empty-state .empty-title { font-size: 20px; color: #374151; margin-bottom: 8px; }
.empty-state .empty-subtitle { color: #6b7280; margin-bottom: 16px; }
.table-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table thead tr { background: #f9fafb; }
.data-table th { text-align: left; padding: 12px 16px; font-weight: 600; color: #374151; border-bottom: 1px solid #e5e7eb; }
.data-table td { padding: 12px 16px; border-bottom: 1px solid #f3f4f6; color: #111827; }
.data-table.no-head thead { display: none; }
.text-right { text-align: right; }
.inline { display: inline; }
.actions-group { display: inline-flex; align-items: center; gap: 8px; }

/* Tool grid */
.tool-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.tool-card { background: #fff; padding: 20px 15px 15px 15px; border-radius: 5px; text-align: center; transition: transform 0.3s ease; width: calc(33.33% - 10px); height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e6e9ef; box-sizing: border-box; cursor: pointer; }
.tool-card:hover { transform: translateY(-3px); }
.tool-card a { font-weight: bold; color: #0073e6; text-decoration: none; font-size: 1.1em; margin-top: 8px; }
.tool-icon { font-size: 2em; margin-bottom: 8px; color: #0073e6; }
.tool-description { font-size: 0.9em; color: #666; text-align: center; }

/* Charts */
.chart-container { text-align: center; }
canvas { max-width: 100%; height: 300px; }

/* Stats */
.stats-grid { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
.stat-card { flex: 1; background: #fff; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0 1px 4px rgba(16,24,40,0.06); border: 1px solid #e6e9ef; }
.stat-card h3 { margin: 0 0 8px 0; font-size: 15px; }
.stat-card p { font-size: 1.2em; font-weight: bold; margin: 0; }

/* Tool card ribbon - Coming Soon */
.tool-card { position: relative; overflow: hidden; }
.tool-card .ribbon-soon { position: absolute; top: 18px; right: -62px; width: 200px; height: 22px; line-height: 22px; padding: 0 0 0 22px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #ffffff; background: #ef4444; transform: rotate(45deg); transform-origin: center; box-shadow: 0 2px 6px rgba(0,0,0,0.2); pointer-events: none; z-index: 2; display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 2px; }
@media (max-width: 768px) { .tool-card .ribbon-soon { right: -44px; top: 16px; width: 170px; height: 20px; line-height: 20px; padding-left: 40px; font-size: 10px; } }

/* Responsive (dashboard) */
@media (max-width: 1024px) { .tool-card { width: calc(50% - 10px); } }
@media (max-width: 900px) {
    .sidebar { display: none; position: absolute; top: 100px; left: 0; width: 100%; background: #0073e6; z-index: 1100; padding: 15px 0; border-radius: 0; }
    .sidebar.open { display: block; }
    .sidebar ul { display: flex; flex-direction: column; align-items: center; }
    .sidebar ul li a { width: 100%; font-size: 1.1em; }
}
/* Prevent tiny-width horizontal scrollbars by allowing containers to shrink */
html, body { max-width: 100%; overflow-x: hidden; }
@media (max-width: 768px) {
    .sidebar { display: none; position: absolute; top: 100px; left: 0; width: 100%; background: #0073e6; z-index: 1100; padding: 10px 0; border-radius: 0; }
    .sidebar.open { display: block; }
    .sidebar ul { display: flex; flex-direction: column; align-items: center; }
    .sidebar ul li a { width: 100%; font-size: 1.1em; }
    .tool-card { width: 100%; }
    .stats-grid { flex-direction: column; }
}

/* ===== Flipbook page (index.php under /flipbook) ===== */
.lead { color: #606c7a; font-size: 0.98em; line-height: 1.5; margin: 0 0 20px 0; max-width: 820px; }
.flipbook-grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 24px; }
@media (min-width: 760px) { .flipbook-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .flipbook-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.flipbook-card { background: #fbfbfb; padding: 20px; border-radius: 10px; box-shadow: none; border: none; text-align: center; transition: 0.2s background-color ease; position: relative; display: flex; flex-direction: column; }
.flipbook-cover { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 170px; position: relative; }
.flipbook-link { display: flex; align-items: center; justify-content: center; width: 100%; }
.flipbook-cover .cover-image, .cover-placeholder { width: 52%; aspect-ratio: 3 / 4; height: auto; object-fit: contain; border-radius: 0; box-shadow: none; background: #ffffff; }
.flipbook-cover img { display: block; margin: 0 auto; }
.cover-placeholder { display: none; position: relative; }
.title-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; }
.flipbook-card h3 { margin: 12px 0; font-size: 1.1em; }
.add-flipbook { display: flex; flex-direction: column; justify-content: center; align-items: center; background: #f6f6f6; cursor: pointer; border: none; box-shadow: none; color: #0b63c9; min-height: 260px; }
.add-icon { font-size: 3em; font-weight: bold; color: #0073e6; transition: color 0.2s ease; }
.add-flipbook:hover .add-icon { color: #0b63c9; }
.add-flipbook h3 { color: #333333; margin-top: 12px; }
.primary-button { display: inline-block; margin-top: 16px; background: #0073e6; color: #ffffff; border: none; padding: 12px 20px; border-radius: 0; font-weight: 700; cursor: pointer; text-decoration: none; }
.primary-button:hover { background: #0b63c9; }
.upload-progress { width: 80%; height: 10px; margin-top: 16px; }
.icon-actions { display: flex; justify-content: center; margin-top: 10px; gap: 10px; }
.icon-actions a,
.icon-actions button { color: #111827; font-size: 1.1em; text-decoration: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: #ffffff; border: 1px solid #e2e5ea; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,0.04); transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; cursor: pointer; }
.icon-actions a:hover,
.icon-actions button:hover { background: #f8fafc; color: #111827; border-color: #d5dae4; box-shadow: 0 2px 3px rgba(0,0,0,0.06); }
.icon-actions a i,
.icon-actions button i { color: currentColor; }
.icon-actions a:hover i,
.icon-actions button:hover i { color: currentColor; }
.icon-actions a::after,
.icon-actions button::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #333333; color: #fff; padding: 5px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; margin-bottom: 8px; }
.icon-actions a::before,
.icon-actions button::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: #333333 transparent transparent transparent; opacity: 0; visibility: hidden; margin-bottom: -1px; }
.icon-actions a:hover::after, .icon-actions a:hover::before,
.icon-actions button:hover::after, .icon-actions button:hover::before { opacity: 1; visibility: visible; }
.footer-status a.status-help { color: #ffffff; text-decoration: none; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; z-index: 5; }
/* Reuse same tooltip visuals as flipbook action icons */
.footer-status a.status-help::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #333333; color: #fff; padding: 8px 10px; border-radius: 6px; font-size: 12px; white-space: normal; max-width: 360px; width: max-content; text-align: left; line-height: 1.4; opacity: 0; visibility: hidden; margin-bottom: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.footer-status a.status-help::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: #333333 transparent transparent transparent; opacity: 0; visibility: hidden; margin-bottom: -1px; }
.footer-status a.status-help:hover::after, .footer-status a.status-help:hover::before { opacity: 1; visibility: visible; }
.icon-actions a.delete,
.icon-actions button.delete { color:#b00020; border-color:#f3c2c2; background:#fff7f7; }
.icon-actions a.delete:hover,
.icon-actions button.delete:hover { background:#ffefef; }
.hidden-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#uploadProgress { width: 100%; display: none; }
.footer-status { margin-top: 12px; border-radius: 8px; padding: 12px 14px; font-weight: 600; text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; background: #0073e6; color: #ffffff; position: relative; overflow: visible; }
.footer-status a.delete { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); color: #FFFFFF; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.footer-status a.delete:visited { color: #FFFFFF; }
.footer-status a.delete i { color: #FFFFFF; }
.footer-actions { margin-top: 12px; }
.cover-loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: clamp(24px, 36%, 72px); height: auto; pointer-events: none; display: block; box-shadow: none; background: transparent; }

/* ===== Flipbook settings page ===== */
.card { background: transparent; padding: 0; border-radius: 0; box-shadow: none; border: none; }
.card + .card { margin-top: 20px; }
.settings-form label { font-weight: 600; display: inline-block; margin: 8px 0 6px; }
.settings-form h3 { color: #0073e6; margin: 26px 0 24px !important; font-weight: 700; }
.settings-form .form-group { margin-top: 10px; }
.settings-form input[type="text"],
.settings-form input[type="email"],
.settings-form input[type="number"],
.settings-form select,
.settings-form input[type="file"] { width: 100%; max-width: 420px; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; background: #fff; }

/* ===== Profile page layout refinements ===== */
.profile-form .form-group { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 10px 18px; max-width: 980px; }
.profile-form .form-group label { margin: 0; font-weight: 600; }
.profile-form input[type="text"],
.profile-form input[type="email"] { max-width: 100%; }
@media (max-width: 700px) {
  .profile-form .form-group { grid-template-columns: 1fr; }
}
/* Ensure right-side breathing room for form groups in two-column grids */
.settings-form .grid-2 > .form-group { padding-right: 24px; }
/* Add right gutter for right column items in grid-2 (e.g., Flipbook URL) */
.settings-form .grid-2 > div:nth-child(2n) { padding-right: 24px; }
@media (max-width: 760px) {
  .settings-form .grid-2 > :nth-child(2n) { padding-right: 0; }
}
.settings-form input[type="color"] { width: 38px; height: 34px; padding: 0; border: 1px solid #ddd; border-radius: 6px; background: transparent; cursor: pointer; display: inline-block; }
.settings-form input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 6px; }
.settings-form input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
.settings-form input[type="color"]::-moz-color-swatch { border: none; border-radius: 6px; }
.settings-form label[for="BackgroundColor"] { display: inline-block; min-width: 180px; margin-right: 12px; }
.settings-form label[for="BackgroundImage"] { display: inline-block; min-width: 180px; }
.settings-form #BackgroundImage { max-width: 420px; }
/* Align color input with its label baseline */
.settings-form input[type="color"] { vertical-align: middle; }
.color-row { display: grid; grid-template-columns: 240px 140px 1fr; align-items: center; gap: 14px 8px; margin: 8px 0 14px; }
.color-row label { font-weight: 600; }
.color-row small { color: #666; font-size: 13px; line-height: 1.5; margin-left: 12px; }
@media (max-width: 760px) {
  .color-row { grid-template-columns: 1fr; }
}
.features-list { display: block; }
.feature-row { display: grid; grid-template-columns: 240px 140px 1fr; align-items: center; gap: 14px 8px; margin: 8px 0 14px; }
.feature-row label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.feature-row .spacer { width: 180px; height: 1px; }
.feature-row small { color: #666; font-size: 13px; line-height: 1.5; }
@media (max-width: 760px) { .feature-row { grid-template-columns: 1fr; } .feature-row .spacer { display: none; } }
.features-list .feature-row select { width: 140px; max-width: 140px; }
.features-list .feature-row small { margin-left: 18px; }
/* Link styling inside helper descriptions */
.settings-form .feature-row small a,
.settings-form .color-row small a,
.settings-form .setting-row .below a { color: #0073e6; text-decoration: underline; text-underline-offset: 2px; }
.settings-form .feature-row small a:hover,
.settings-form .color-row small a:hover,
.settings-form .setting-row .below a:hover { color: #005bb5; text-decoration-color: #005bb5; }
/* Ensure number inputs inside feature rows match select widths */
.features-list .feature-row input[type="number"] { width: 140px; max-width: 140px; }
/* Standard textarea look in settings forms */
.settings-form textarea { width: 100%; max-width: 420px; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; background: #fff; }
/* Feedback Builder: display type cards (Embed / Widget / Popup) */
.feedback-display-section .feedback-display-title { margin: 8px 0 6px !important; }
.feedback-display-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 16px; }
.feedback-display-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 14px 16px; cursor: pointer; display: block; background: #fff; }
.feedback-display-card-inner { display: grid; grid-template-columns: 2fr 1fr; column-gap: 16px; align-items: flex-start; }
.feedback-display-main { min-width: 0; }
.feedback-display-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.feedback-display-desc { margin-top: 6px; font-weight: 400; font-size: 13px; line-height: 1.5; color: #333; }
.feedback-display-illustration { display: flex; justify-content: flex-end; }
.feedback-display-illustration-svg { width: 100%; max-width: 140px; height: 72px; display: block; }
.feedback-display-subsetting { margin-top: 14px; }
.feedback-display-subsetting .span-2 { max-width: 220px; }
.feedback-display-subsetting label { display: block; margin: 6px 0 4px; font-weight: 600; }
/* Allow top-aligned rows for multi-line fields */
.setting-row.align-top { align-items: flex-start; }
/* Simple input error utility used by Form Builder */
.input-error { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239,68,68,0.12) inset; }

/* ===== Form Builder page specific styles ===== */
.formbuilder-page .section .layout,
.formbuilder-page .section #previewContainer,
.formbuilder-page .section .actions { width: 100%; max-width: 1100px; margin: 0 auto; }
.formbuilder-page #builderWrap { border: 1px dotted #d6d6d6; padding: 10px; min-height: 150px; flex: 0 0 auto; min-width: 0; box-sizing: border-box; width: 100%; display: block; height: auto; overflow: visible; border-radius: 0; }
.formbuilder-page #builder { width: 100%; box-sizing: border-box; }
.formbuilder-page .field { position: relative; padding: 10px 12px; margin: 10px 0; background: transparent; border: 1px dashed transparent; border-radius: 8px; cursor: grab; transition: border-color 0.15s ease, background-color 0.15s ease; }
.formbuilder-page .field:hover { box-shadow: none; border-color: #94a3b8; background: #f8fafc; }
.formbuilder-page .field:active { cursor: grabbing; }
.formbuilder-page .field-viewport { padding: 0; background: transparent; border: none; border-radius: 0; }
.formbuilder-page .field-viewport label { font-weight: 700; display: block; margin-bottom: 6px; font-size: 14px; color: #334155; }
.formbuilder-page .field-viewport input[type="text"],
.formbuilder-page .field-viewport input[type="date"],
.formbuilder-page .field-viewport textarea { width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; box-sizing: border-box; }
.formbuilder-page .field-viewport .options-stack { display: grid; gap: 6px; }
.formbuilder-page .field-viewport .option-row { display: flex; align-items: center; gap: 8px; }
.formbuilder-page .field-actions { position: absolute; top: -10px; right: -10px; display: none; gap: 8px; z-index: 2; background: rgba(255,255,255,0.98); border: 1px solid #e5e7eb; border-radius: 10px; padding: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.formbuilder-page .field:hover .field-actions { display: inline-flex; }
.formbuilder-page .field-actions .icon-btn { background: transparent; border: none; border-radius: 8px; padding: 6px; font-size: 12px; cursor: pointer; }
.formbuilder-page .field-actions .icon-btn:hover { background: #f3f4f6; }
.formbuilder-page .field-actions .btn-remove { order: 99; color: #ef4444; }
.formbuilder-page .field-editor { display: none; margin-top: 8px; padding: 10px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; }
.formbuilder-page .field.editing .field-editor { display: block; }
.formbuilder-page .field-editor label { font-weight: 600; margin: 6px 0 4px; display: block; }
.formbuilder-page .field-editor .label-input,
.formbuilder-page .field-editor .options-input { width: 100%; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 6px; }
.formbuilder-page .field-editor .inline { display: inline-flex; align-items: center; gap: 8px; }
.formbuilder-page .elements-toolbar { width: 100%; border: 1px solid #e5e7eb; background: #fff; padding: 10px; border-radius: 8px; box-sizing: border-box; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.formbuilder-page .elements-toolbar h3 { margin: 0 6px 0 0; font-size: 16px; color: #111827; }
.formbuilder-page .elements-toolbar .toolbar-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.formbuilder-page .elements-toolbar .toolbar-buttons button { display: inline-flex; align-items: center; gap: 6px; margin: 0; background: #2563eb; color: #fff; border: none; border-radius: 6px; padding: 8px 10px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, box-shadow 0.15s ease; }
.formbuilder-page .elements-toolbar .toolbar-buttons button:hover { background: #1d4ed8; }
.formbuilder-page .label-input,
.formbuilder-page .options-input { width: 100%; box-sizing: border-box; }
.formbuilder-page .builder-actions { display: flex; gap: 8px; margin: 10px 0 20px; }
.formbuilder-page #builderSubmitPreview { margin-top: 12px; padding-left: 12px; padding-bottom: 12px; }
.formbuilder-page .builder-submit { background: var(--fg-button-color); color: #fff; border: 0; border-radius: 6px; padding: 10px 14px; font-size: var(--fg-button-font-size); display: inline-block; }
.formbuilder-page #preview,
.formbuilder-page #builderWrap { --fg-font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --fg-font-size: 16px; --fg-input-radius: 4px; --fg-input-border: #ddd; --fg-button-color: #2ecc71; --fg-button-font-size: 16px; }
.formbuilder-page #builderWrap,
.formbuilder-page #builderWrap input,
.formbuilder-page #builderWrap textarea,
.formbuilder-page #builderWrap select { font-family: var(--fg-font-family); font-size: var(--fg-font-size); }
.formbuilder-page #builderWrap input,
.formbuilder-page #builderWrap textarea { border-radius: var(--fg-input-radius); border: 1px solid var(--fg-input-border); }
.formbuilder-page #previewContainer,
.formbuilder-page #preview { display: none; }
@media (max-width: 1024px) { .formbuilder-page #builderWrap { flex-basis: 100%; } }

/* Live preview title above #builderWrap */
.formbuilder-page .live-preview-title { font-size: 18px; font-weight: 800; margin: 0 0 8px 0; color: #111827; }

/* Formbuilder: force control widths to prevent touching description text */
.formbuilder-page .features-list .feature-row input[type="number"],
.formbuilder-page .features-list .feature-row select { width: 120px !important; max-width: 120px !important; }
.formbuilder-page .features-list .feature-row small { margin-left: 18px !important; }

/* Settings rows with label + long input, description below input */
.settings-list { display: block; }
.setting-row { display: grid; grid-template-columns: 240px 140px 1fr; align-items: center; gap: 14px 8px; margin: 8px 0 14px; }
.setting-row label { font-weight: 600; }
.setting-row .below { grid-column: 2 / 4; color: #555; font-size: 13px; line-height: 1.5; margin: 1px 0 6px; }
.setting-row .span-2 { grid-column: 2 / 4; }
.settings-list .setting-row { padding-right: 24px; }
.settings-list .setting-spacer { height: 10px; }
@media (max-width: 760px) { .setting-row { grid-template-columns: 1fr; padding-right: 0; } .setting-row .below { grid-column: auto; } }
@media (max-width: 760px) {
  /* Ensure descriptions under title/URL use full width on small screens */
  .settings-list .setting-row .below { grid-column: 1 / -1 !important; margin-left: 0 !important; display: block; }
  .settings-list .setting-row .span-2 { grid-column: 1 / -1 !important; }
  /* Nudge feature descriptions slightly right to align with inputs */
  .features-list .feature-row small { margin-left: 0 !important; grid-column: 1 / -1; display: block; }
  .color-row small { margin-left: 0 !important; grid-column: 1 / -1; display: block; }
}
.settings-form input[type="checkbox"] { transform: translateY(1px); }
.field-note { color: #666; font-size: 13px; margin-top: 4px; line-height: 1.5; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px 36px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 18px; }
.grid-3 > label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 14px; }
.divider { height: 1px; background: #eee; margin: 36px 0; }
.divider-white { height: 12px; background: #ffffff; margin: 16px 0; }
.actions { margin-top: 48px; margin-bottom: 8px; display: flex; gap: 12px; align-items: center; }
.link-muted { color: #0073e6; text-decoration: none; }
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); }
.modal-content { background-color: #fefefe; margin: 10% auto; padding: 20px; border: 1px solid #888; width: 90%; max-width: 500px; border-radius: 10px; }
.modal .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }

/* Enhanced modal variants for larger responsive dialogs (Flipbook Stats) */
.modal--center { display: none; align-items: center; justify-content: center; }
.modal-content--wide { width: 92vw; max-width: 1100px; max-height: 90vh; display: flex; flex-direction: column; position: relative; border-radius: 12px; }
.modal-close { position: sticky; top: 10px; margin-left: auto; right: 12px; font-size: 24px; color: #6b7280; cursor: pointer; line-height: 1; z-index: 3; float: right; }
.modal-frame { width: 100%; height: calc(90vh - 40px); min-height: 320px; border: 0; background: #ffffff; }

/* Modal loading overlay */
.modal-loading { position: absolute; inset: 0; background: rgba(255,255,255,0.95); display: none; align-items: center; justify-content: center; z-index: 2; }
.modal-loading .loader { font-size: 36px; color: #0073e6; }

/* Flipbook stats icon */
.stats-badge { position: absolute; right: 8px; top: 8px; z-index: 5; border: none; background: #0073e6; color: #ffffff; width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.stats-badge:hover { background: #005bb5; }
.stats-badge i { pointer-events: none; }
/* Tooltip visuals for the stats icon to match action buttons */
.stats-badge::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: #333333; color: #fff; padding: 5px 8px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; margin-bottom: 8px; z-index: 10; }
.stats-badge::before { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border-width: 6px; border-style: solid; border-color: #333333 transparent transparent transparent; opacity: 0; visibility: hidden; margin-bottom: -1px; z-index: 10; }
.stats-badge:hover::after, .stats-badge:hover::before { opacity: 1; visibility: visible; }

/* Flipbook stats page (iframe content) */
.stats-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.stats-title { margin: 0; font-size: 18px; }
.range-buttons a { margin-right: 6px; text-decoration: none; }

/* Reuse flipbook stats range button styling */
.range a { display: inline-block; margin: 0 4px 0 0; padding: 6px 10px; border: 1px solid #e3e7ef; border-radius: 6px; background: #f8fafc; color: #111; text-decoration: none; font-size: 13px; }
.range a.active { background: #0073e6; color: #fff; border-color: #0073e6; }

/* ===== Homepage helpers ===== */
.container-narrow { max-width: 800px; margin-bottom: 20px; }
.container-medium { max-width: 960px; margin: 0 auto 20px; }
.cta-banner { background: #005ebc; color: white; text-align: center; padding: 60px 0; }

/* ===== FAQs (accordion) ===== */
.faqs { background: #f8f8f8; padding: 50px 20px; }
.faqs .container { max-width: 1100px; margin: 0 auto; }
.faqs h2 { font-size: 2.2em; margin: 0 0 22px; text-align: left; }
.faq-list { display: block; }
.faq-item { background: #efeff1; border-radius: 10px; padding: 0; margin: 14px 0; border: 1px solid #e2e2e6; overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 18px; font-weight: 700; color: #1f2937; display: flex; align-items: center; justify-content: space-between; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "\25BC"; color: #6b7280; font-size: 0.9em; transition: transform 0.2s ease; }
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-answer { padding: 0 18px 18px 18px; color: #4b5563; line-height: 1.6; }
.faq-answer p { margin: 0; }

@media (max-width: 600px) {
  /* Override generic container mobile centering for FAQs */
  .faqs { padding-left: 12px; padding-right: 12px; }
  .faqs .container { display: block; width: 100%; max-width: 100%; margin: 0; }
  .faqs .container div { text-align: left; margin-bottom: 0; }
}

/* ===== About BrandBits section ===== */
.about-brandbits { background: #fff; padding: 50px 20px; }
.about-brandbits h2 { font-size: 2.2em; margin: 0 0 12px; }
.about-brandbits h3 { color: #0a4ea3; margin: 28px 0 8px; font-size: 1.4em; }
.about-brandbits p { color: #333; line-height: 1.7; margin: 0 0 14px; }
.about-brandbits .dash-list { margin: 0 0 16px 18px; padding: 0; }
.about-brandbits .dash-list li { margin: 6px 0; }

/* Generic small USP list for tool landing pages */
.tool-usp-list {
  list-style: none;
  padding-left: 0;
  margin: 12px 0 18px 0;
  color: #606c7a;
}
.tool-usp-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0;
}
.tool-usp-list li::before {
  content: "\2713";
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e7f7ee;
  color: #148a43;
  font-weight: 700;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-top: 2px;
}

/* ===== Pricing page styles ===== */
.pricing { text-align: center; padding: 80px 20px; background: #fff; }
.pricing .container { max-width: 1100px; }
.pricing h1 { font-size: 2.5em; margin: 0 0 20px; }
.pricing .lead { font-size: 1.2em; color: #666; margin-bottom: 60px; text-align: center; max-width: 820px; margin-left: auto; margin-right: auto; }
.pricing-table { display: flex; justify-content: center; gap: 40px; align-items: stretch; flex-wrap: wrap; }
.pricing-card { background: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); text-align: center; width: 300px; display: flex; flex-direction: column; justify-content: flex-start; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.pricing-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.15); }
.pricing-card h2 { font-size: 2em; margin: 0 0 10px; }
.pricing-card p { font-size: 1.1em; color: #666; margin: 0 0 16px; }
.pricing-card .price { font-size: 2.3em; font-weight: 700; color: #0073e6; margin: 8px 0 16px; }
.pricing .btn-primary, .pricing .btn-secondary { text-align: center; }
/* Center and remove underline for pricing card buttons */
.pricing-card a.btn-primary,
.pricing-card a.btn-secondary { text-decoration: none; align-self: center; }

.pricing .pricing-table { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: stretch; justify-items: center; }
@media (min-width: 900px) {
  .pricing .pricing-table { grid-template-columns: repeat(3, max-content); justify-content: center; gap: 32px; }
}
.pricing .pricing-table { gap: 16px; }
@media (max-width: 768px) {
  .pricing .pricing-table { grid-template-columns: 1fr; gap: 20px; }
}
.pricing .pricing-card { width: 100%; max-width: 300px; margin: 0 auto; display: flex; flex-direction: column; }
.pricing .pricing-card h2 { margin: 0; padding-bottom: 24px; }
.pricing .pricing-card p { margin: 0 0 8px 0; }
.pricing .features { list-style: none; padding-left: 0; margin: 18px 0 16px 0; }
.pricing .features li { display: flex; align-items: flex-start; gap: 8px; color: #333; margin: 6px 0; }
.pricing .features li::before { content: "\2713"; display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: #e7f7ee; color: #148a43; font-weight: 700; align-items: center; justify-content: center; font-size: 12px; margin-top: 2px; }
.pricing .price { margin: auto 0 18px 0; }
.pricing .pricing-card a.btn-lg { margin-top: 6px; text-align: center; display: inline-flex; align-items: center; justify-content: center; }
.pricing .pricing-card a.btn-green.btn-lg { width: auto; max-width: 100%; align-self: center; }
.pricing .pricing-card a.btn-primary.btn-lg { width: auto; max-width: 100%; align-self: center; }
.pricing .container { padding-top: 0; margin-top: 0; }

.savings-box { background: #fff; padding: 40px; border-radius: 10px; text-align: center; margin-top: 60px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.server-note { background: #f8f8f8; border: 1px solid #e6e9ef; border-radius: 10px; padding: 28px; margin: 60px 0 24px; }
.server-note h2 { margin: 0 0 12px; font-size: 1.6em; }
.server-note p { margin: 0; color: #555; line-height: 1.7; }
.savings-box h2 { font-size: 2em; margin: 0 0 10px; }
.savings-box p { font-size: 1.1em; color: #333; margin: 0 0 20px; }
.savings-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.savings-table th, .savings-table td { padding: 14px; border-bottom: 1px solid #ddd; text-align: center; font-size: 1.05em; }
.savings-table th { background: #f0f0f0; font-weight: 700; }
.savings-table tr:last-child td { border-bottom: none; }
.savings-amount { font-size: 2.2em; font-weight: 700; color: #0073e6; margin-top: 20px; }

.explanation { text-align: center; padding: 60px 20px; background: #f8f8f8; margin: 0; }
.explanation h2 { font-size: 2.2em; margin-bottom: 20px; }
.explanation p { font-size: 1.1em; color: #333; max-width: 800px; margin: 0 auto 18px; }

@media (max-width: 768px) {
  .pricing-table { flex-direction: column; gap: 20px; }
}

/* ===== Auth (login/register) shared styles ===== */
.auth-hero { position: relative; background-color: #005ebc; padding: 40px 0; }
.container-register { width: 100%; background-color: #fff; border-radius: 10px; padding: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); text-align: center; margin: 0 auto; }
.container-register h1 { color: #333; font-size: 1.8em; margin-bottom: 20px; }
.form-group { margin-bottom: 20px; }
.form-control { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 5px; transition: border-color 0.3s; box-sizing: border-box; font-size: 1em; color: #333; }
.form-control:focus { border-color: #005ebc; outline: none; }
.btn-success { background-color: #28a745; color: #fff; width: 100%; padding: 15px; font-size: 1.2em; border-radius: 5px; transition: background-color 0.2s ease; margin-bottom: 30px; box-sizing: border-box; cursor: pointer; border: none; display: inline-block; }
.btn-success:hover { background-color: #218838; }
.text-success { color: green; }
.text-danger { color: #cc0000; }
@media (min-width: 601px) { .container-register { max-width: 640px; } }
@media (max-width: 600px) { .container-register { max-width: 300px; } }

/* Auth link styles (scoped to auth section only) */
.auth-hero a { color: #0073e6; text-decoration: none; transition: color 0.2s ease, text-decoration-color 0.2s ease; }
.auth-hero a:hover { color: #005bb5; text-decoration: underline; }
.auth-hero a:visited { color: #0073e6; }

/* Server creation page refinements */
.server-explainer { color: #4b5563; line-height: 1.7; max-width: 640px; margin: 0 auto 22px; font-size: 1.02em; text-align: center; }
.server-explainer p { margin: 0 0 10px; }
.subdomain-input-row { display: flex; align-items: stretch; justify-content: center; gap: 0; margin-top: 8px; }
.subdomain-input-row .form-control { max-width: 360px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.domain-suffix { background: #f3f4f6; border: 1px solid #ccc; border-left: 0; color: #374151; padding: 12px 14px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; line-height: 1; white-space: nowrap; display: inline-flex; align-items: center; }
.help-text { display: block; color: #6b7280; font-size: 13px; margin-top: 6px; }
.host-preview-line { margin: 18px 0 22px; text-align: center; }
.host-preview-line strong { color: #111827; }
.server-form .form-group { margin-top: 18px; }
.server-form label { display: block; font-weight: 700; margin: 12px 0 6px; text-align: center; }
.server-form .help-text { text-align: center; }
.server-form .btn-success { margin-top: 14px; }
@media (max-width: 480px) {
    .subdomain-input-row { flex-direction: column; align-items: stretch; gap: 8px; }
    .domain-suffix { text-align: center; border-left: 1px solid #ccc; border-radius: 5px; }
}


/* ===== VPS Progress page styles ===== */
body.vps-progress { font-family: Arial, Helvetica, sans-serif; text-align: center; padding: 50px; background: #f5f5f5; }
.vps-progress .container { max-width: 600px; margin: 0 auto; background: #ffffff; padding: 40px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.vps-progress .spinner { border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 50px; height: 50px; animation: vps-spin 1s linear infinite; margin: 20px auto; }
@keyframes vps-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.vps-progress .progress-bar { width: 100%; height: 20px; background: #f0f0f0; border-radius: 10px; overflow: hidden; margin: 20px 0; }
.vps-progress .progress-fill { height: 100%; background: linear-gradient(90deg, #3498db, #2980b9); width: 0%; transition: width 0.5s ease; }
.vps-progress .status { font-size: 18px; margin: 20px 0; color: #333333; }
.vps-progress .step-details { font-size: 14px; color: #666666; margin: 10px 0; font-style: italic; }
.vps-progress .time { color: #666666; font-size: 14px; }
.vps-progress .step { text-align: left; margin: 10px 0; padding: 10px; border-left: 3px solid #dddddd; }
.vps-progress .step.active { border-left-color: #3498db; background: #f8f9fa; }
.vps-progress .step.completed { border-left-color: #27ae60; color: #27ae60; }
.vps-progress .error { color: #e74c3c; background: #fdf2f2; padding: 15px; border-radius: 5px; margin: 20px 0; border-left: 4px solid #e74c3c; }
.vps-progress .success { color: #27ae60; background: #f0f9f0; padding: 15px; border-radius: 5px; margin: 20px 0; border-left: 4px solid #27ae60; }

/* ===== Flipbook marketing landing (shared) ===== */
.product-hero { background: linear-gradient(135deg, #0a66cc 0%, #004a9f 100%); color: #ffffff; padding: 56px 0 48px; position: relative; overflow: hidden; }
.product-hero::after { content: ""; position: absolute; inset: -20% -10% auto -10%; height: 60%; background: radial-gradient(closest-side, rgba(255,255,255,0.12), rgba(255,255,255,0)); pointer-events: none; }
.two-col { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.two-col .col { flex: 1 1 480px; }
.product-hero h1 { margin: 0 0 10px; font-size: 2.6em; color: #ffffff; letter-spacing: -0.01em; }
.product-hero .sub { color: #e8f1fe; font-size: 1.1em; margin: 0 0 16px; }
.hero-cta { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.checklist { list-style: none; padding: 0; margin: 10px 0 20px; }
.checklist li { margin: 8px 0; }
.product-hero .checklist li { color: #f2f7ff; line-height: 1.85; }
.checklist li::before { content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #28a745; display: inline-block; margin-right: 10px; }
.product-hero .checklist li::before { background: transparent; width: auto; height: auto; box-shadow: none; border-radius: 0; color: #28a745; }
.hero-graphic { width: 100%; max-width: 560px; height: auto; }
/* tighten hero spacing and image size */
.product-hero { padding: 40px 0 32px; }
.hero-graphic { max-width: 440px; max-height: 340px; margin: 0 auto; display: block; }

.section-simple { background: #fff; padding: 56px 0 40px; }
/* Add extra top margin to the first content section after hero */
.section-simple:first-of-type { padding-top: 72px; }
.section-simple h2 { font-size: 2em; margin: 0 0 10px; }
.section-simple .leadish { color: #666; margin: 0 0 20px; font-size: 1.05em; }

.examples-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 22px; align-items: start; justify-items: stretch; }
.examples-row img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); background: #f3f3f3; }
.cover { width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; border: none; background-color: #ffffff; box-shadow: 0 4px 12px rgba(16,24,40,0.10); display: block; background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; }

.split { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
@media (max-width: 899px) { .split .text-col { order: 1; } .split .media-col { order: 2; } }
.split img { width: 100%; height: auto; border-radius: 8px; box-shadow: none; }

.features { text-align: center; }
.features .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 24px; }
.features .item { text-align: left; display: flex; align-items: flex-start; gap: 12px; }
.features .item .feature-icon { width: 28px; height: 28px; color: #8a94a6; flex: 0 0 28px; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.features .item .feature-icon svg { width: 100%; height: 100%; display: block; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.features .item h3 { margin: 0 0 6px; font-size: 1.2em; }
.features .item p { margin: 0; color: #666; }

.cta-center { background: #fff; text-align: center; padding: 50px 0; }
.cta-center h2 { font-size: 2.2em; margin: 0 0 16px; }
.cta-center p { font-size: 1.1em; margin: 0 0 24px; color: #333; }

.illustration { width: 100%; max-width: none; height: auto; display: block; }
.benefits { list-style: none; padding: 0; margin: 12px 0 0; }
.benefits li { margin: 6px 0; color: #444; }
.benefits li::before { content: "\2022"; color: #0073e6; margin-right: 10px; font-weight: 900; }
/* Standard link style for content sections (e.g., benefits lists, paragraphs) */
.section-simple .text-col a { color: #0073e6; text-decoration: underline; text-underline-offset: 2px; }
.section-simple .text-col a:hover { color: #005bb5; text-decoration-color: #005bb5; }
.section-simple .text-col a:visited { color: #0073e6; }

.features .item .feature-icon i { font-size: 22px; color: #8a94a6; line-height: 1; }

@media (min-width: 900px) {
  .product-hero .two-col { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .product-hero .col:last-child { justify-content: flex-end; justify-self: end; }
}

/* ===== Related Guides (Flipbook LP) ===== */
#related-guides .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 18px; align-items: stretch; margin-top: 8px; }
#related-guides .item { background: #ffffff; border: 1px solid #e6e9ef; border-radius: 10px; padding: 16px 18px; box-shadow: 0 1px 4px rgba(16,24,40,0.06); transition: transform 0.15s ease, box-shadow 0.15s ease; }
#related-guides .item:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(16,24,40,0.10); }
#related-guides a { text-decoration: none; color: #111827; display: block; }
#related-guides a:visited { color: #111827; }
#related-guides h3 { margin: 0 0 6px; font-size: 1.15em; color: #0a4ea3; }
#related-guides p { margin: 0; color: #4b5563; line-height: 1.5; }
#related-guides .item:focus-within { outline: 2px solid #99c0ff; outline-offset: 2px; }
#related-guides a:hover h3 { color: #005bb5; text-decoration: none; }
/* Icon + header row */
#related-guides .guide-header { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
#related-guides .guide-icon { width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg, #e9f2ff 0%, #dfe9ff 100%); color: #0a4ea3; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(16,24,40,0.10); flex: 0 0 42px; }
#related-guides .guide-icon i { font-size: 18px; line-height: 1; }
/* CTA */
#related-guides .guide-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; color: #0a4ea3; font-weight: 700; }
#related-guides .guide-cta i { transition: transform 0.15s ease; }
#related-guides a:hover .guide-cta { color: #005bb5; }
#related-guides a:hover .guide-cta i { transform: translateX(2px); }

.product-hero .col:last-child { display: flex; justify-content: flex-end; }
@media (min-width: 900px) {
  .product-hero .two-col { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .product-hero .col:last-child { display:flex; justify-content:flex-end; justify-self:end; }
}

.hero.hero-slanted .col:first-child { text-align: left; }
@media (min-width: 900px) {
  .hero.hero-slanted .two-col { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .hero.hero-slanted .col:last-child { display:flex; justify-content:center; align-items:center; justify-self:center; }
  .hero.hero-slanted .two-col { min-height: 400px; }
  .hero.hero-slanted .col:first-child { align-self: center; display: flex; flex-direction: column; justify-content: center; }
}
@media (min-width: 900px) {
  .hero.hero-slanted { padding-top: 28px; }
}
/* Hero typography refinements */
.hero.hero-slanted h1 { font-size: 2.6em; line-height: 1.15; margin: 0 0 12px; }
.hero.hero-slanted .sub { font-size: 1.15em; line-height: 1.7; }
.hero.hero-slanted .checklist li { line-height: 1.9; }
/* Add breathing room around hero image */
.hero.hero-slanted .hero-graphic { margin-top: 14px; margin-bottom: 2px; }

@media (min-width: 900px) {
  .hero.hero-slanted .two-col { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .hero.hero-slanted .col:last-child { display:flex; justify-content:center; align-items:center; justify-self:center; }
  .hero.hero-slanted .two-col { min-height: 400px; }
  .hero.hero-slanted .col:first-child { align-self: center; display: flex; flex-direction: column; justify-content: center; }
}

/* Restore roomier padding for homepage hero */
.home-hero { padding-top: 70px !important; padding-bottom: 120px !important; }

/* Reduce gap and stacked spacing on small screens */
@media (max-width: 899px) {
  .hero.hero-slanted .two-col { gap: 18px; }
  .hero.hero-slanted { padding-bottom: 56px; }
  .hero.hero-slanted .col:last-child { justify-content: flex-start; }
  .hero.hero-slanted .hero-graphic { margin-top: 6px; margin-bottom: 0; margin-left: 0; max-width: 420px; }
}