/* Only rules specific to sideloadly-errors.html; shared defaults load first. */

body.cf-homepage { font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; color: #333; margin: 0; padding: 0; line-height: 1.6; background: #ffffff; }

.cf-section { padding: 54px 0; border-bottom: 1px solid #ececec; scroll-margin-top: 96px; }

.cf-section.gray { background: #fafbfc; }

h1 { font-size: 2.6rem; font-weight: 700; line-height: 1.2; margin-bottom: 15px; letter-spacing: -0.5px; }

p { font-size: 1.05rem; line-height: 1.8; color: #444; margin-bottom: 20px; overflow-wrap: break-word; }

ul.cf-list, ol.cf-list { margin: 0 0 24px; padding-left: 24px; }

ul.cf-list li, ol.cf-list li { margin-bottom: 12px; font-size: 1.05rem; line-height: 1.7; color: #444; }

strong { color: #2d2d2d; }

code { font-family: Consolas, Monaco, monospace; font-size: 0.94em; background: #f3f4f6; padding: 2px 5px; border-radius: 4px; }

.cf-skip-link { position: absolute; left: -9999px; top: 8px; background: #111; color: #fff !important; padding: 10px 14px; z-index: 20000; border-radius: 4px; text-decoration: none !important; }

.cf-skip-link:focus { left: 10px; }

.cf-hero { background: #ffffff; padding: 58px 0 48px; text-align: center; border-bottom: 1px solid #ececec; }

.cf-breadcrumbs { font-size: 0.9rem; color: #6b7280; margin-bottom: 14px; }

.cf-breadcrumbs a { color: #5f6b76; text-decoration: none; }

.cf-breadcrumbs a:hover { color: #27ae60; }

.cf-meta-bar { font-size: 0.88rem; color: #6b7280; margin-bottom: 15px; display: inline-block; }

.cf-hero-lead { font-size: 1.15rem; color: #555; max-width: 780px; margin: 0 auto 22px; }

.cf-hero-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }

.cf-badge { background: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd; padding: 6px 16px; border-radius: 20px; font-size: 0.85rem; font-weight: 500; }

.hero-image { max-width: 100%; height: auto; max-height: 400px; border-radius: 12px; box-shadow: 0 14px 28px rgba(0,0,0,0.12); object-fit: contain; margin-top: 30px; }

.cf-btn-primary { display: inline-block; background: #27ae60; color: #ffffff !important; padding: 14px 28px; font-size: 1rem; font-weight: 600; border-radius: 6px; text-decoration: none !important; box-shadow: 0 4px 12px rgba(39,174,96,0.22); transition: all 0.2s ease; }

.cf-btn-primary:hover { background: #219150; transform: translateY(-2px); }

.cf-btn-secondary { display: inline-block; color: #555 !important; padding: 10px 16px; font-size: 0.95rem; font-weight: 500; text-decoration: underline !important; }

.cf-btn-secondary:hover { color: #111 !important; }

.cf-cta-row { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 25px; }

.cf-notice-box { background: #f0f7fc; border-left: 4px solid #3498d9; padding: 20px 24px; border-radius: 4px; margin: 24px 0; }

.cf-notice-box p:last-child { margin-bottom: 0; }

.cf-warning-box { background: #fffaf0; border-left: 4px solid #d99b23; padding: 20px 24px; border-radius: 4px; margin: 24px 0; }

.cf-warning-box p:last-child { margin-bottom: 0; }

.cf-success-box { background: #f2fbf5; border-left: 4px solid #27ae60; padding: 20px 24px; border-radius: 4px; margin: 24px 0; }

.cf-success-box p:last-child { margin-bottom: 0; }

.cf-diagnostic { background: #ffffff; border: 1px solid #e3e7eb; border-radius: 8px; padding: 20px 22px; margin: 22px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }

.cf-diagnostic p { margin-bottom: 10px; }

.cf-diagnostic p:last-child { margin-bottom: 0; }

.cf-table-wrap { overflow-x: auto; margin: 28px 0; border: 1px solid #dedede; border-radius: 6px; -webkit-overflow-scrolling: touch; }

.cf-comparison { width: 100%; min-width: 600px; border-collapse: collapse; text-align: left; background: #fff; }

.cf-comparison th, .cf-comparison td { padding: 16px 14px; border-bottom: 1px solid #dedede; vertical-align: top; }

.cf-comparison th { font-weight: 600; color: #333; }

.cf-comparison thead { background: #f4f7f9; }

.cf-comparison tbody tr:last-child > * { border-bottom: 0; }

.cf-comparison a { font-weight: 600; }

.cf-jump-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 26px 0 8px; }

.cf-jump-link { display: block; border: 1px solid #e1e5e9; border-radius: 8px; padding: 14px 16px; text-decoration: none !important; color: #333; background: #fff; font-weight: 600; transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s; }

.cf-jump-link:hover { color: #1f7d46; border-color: #b8ddc6; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transform: translateY(-1px); }

.cf-jump-link span { display: block; font-size: 0.86rem; color: #707983; font-weight: 400; margin-top: 3px; }

.cf-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }

.cf-related-card { border: 1px solid #e2e6ea; border-radius: 8px; padding: 20px; background: #fff; }

.cf-related-card h3 { margin: 0 0 8px; font-size: 1.12rem; }

.cf-related-card p { margin: 0 0 14px; font-size: 0.98rem; }

@media (max-width: 767px) {
  h1 { font-size: 2.05rem; }
  h2 { font-size: 1.65rem; }
  .cf-hero { padding: 42px 0 36px; }
  .cf-section { padding: 42px 0; scroll-margin-top: 135px; }
  .header-inner { flex-direction: column; text-align: center; gap: 10px; }
  nav ul { justify-content: center; }
  .cf-jump-grid, .cf-related { grid-template-columns: 1fr; }
  .cf-comparison { min-width: 520px; }
  .cf-notice-box, .cf-warning-box, .cf-success-box, .cf-diagnostic { padding: 18px; }
}

@media (max-width: 420px) {
  .container { padding: 0 16px; }
  h1 { font-size: 1.85rem; }
  .cf-comparison { min-width: 480px; }
  .footer-links a { display: inline-block; margin: 4px 7px; }
}

.cf-content-image { 
  max-width: 100%; 
  height: auto; 
  border-radius: 8px; 
  box-shadow: 0 8px 24px rgba(0,0,0,0.08); 
  display: block; 
  margin: 36px auto; 
}