/* ============================================
   TELETOM ARTICLE STYLES
   ============================================ */

.teletom-article {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #374151;
  line-height: 1.75;
  max-width: 860px;
  margin: 40px auto;
  padding: 0 20px;
}

.teletom-article h2 {
  font-size: 28px;
  color: #0b3d91 !important;
  margin-top: 40px;
  margin-bottom: 16px;
  border-left: 4px solid #0b3d91;
  padding-left: 14px;
  font-weight: 700;
}

.teletom-article h3 {
  font-size: 20px;
  color: #1f2937 !important;
  margin-top: 28px;
  margin-bottom: 12px;
  font-weight: 600;
}

.teletom-article p {
  margin: 0 0 14px 0;
  font-size: 16px;
  color: #4b5563;
  line-height: 1.75;
  font-weight: 400;
}

.teletom-article ul,
.teletom-article ol {
  color: #4b5563;
  font-weight: 400;
}

/* === HERO === */
.teletom-hero {
  background: linear-gradient(135deg, #0b3d91 0%, #1e6fd9 100%);
  color: #fff;
  padding: 36px 28px;
  border-radius: 14px;
  margin-bottom: 28px;
}

.teletom-hero h1 {
  font-size: 30px;
  margin: 0 0 10px 0;
  line-height: 1.25;
  color: #ffffff !important;
  font-weight: 700;
}

.teletom-hero p {
  color: #e6efff !important;
  font-size: 16px;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* === HIGHLIGHT VARIANTS === */
.highlight {
  background: #eef4ff;
  border-left: 4px solid #0b3d91;
  padding: 14px 18px;
  border-radius: 8px;
  margin: 18px 0;
  font-size: 15px;
  color: #374151;
  font-weight: 400;
  line-height: 1.65;
}

.highlight-warn {
  background: #fff8ed;
  border-left: 4px solid #f59e0b;
  padding: 14px 18px;
  border-radius: 8px;
  margin: 18px 0;
  font-size: 15px;
  color: #374151;
  font-weight: 400;
  line-height: 1.65;
}

.highlight-success {
  background: #f0faf4;
  border-left: 4px solid #067647;
  padding: 14px 18px;
  border-radius: 8px;
  margin: 18px 0;
  font-size: 15px;
  color: #374151;
  font-weight: 400;
  line-height: 1.65;
}

/* === LIMITS GRID === */
.limits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.limit-card {
  background: #fff7f7;
  border: 1px solid #fbd5d5;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.limit-card .num {
  font-size: 26px;
  font-weight: 700;
  color: #b42318;
  margin-bottom: 4px;
}

.limit-card .label {
  font-size: 13px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.limit-card .desc {
  font-size: 14px;
  color: #374151;
  margin-top: 6px;
  font-weight: 400;
}

/* === COMPARE BOX === */
.compare-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 22px 0;
}

.compare-card {
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e5e7eb;
}

.compare-provider { background: #fff7f7; border-color: #fbd5d5; }
.compare-teletom { background: #f0faf4; border-color: #bde7cc; }

.compare-card h4 {
  margin: 0 0 10px 0;
  font-size: 17px;
  font-weight: 600;
}

.compare-provider h4 { color: #b42318; }
.compare-teletom h4 { color: #067647; }

.compare-card ul {
  margin: 0;
  padding-left: 18px;
  font-size: 14.5px;
  color: #4b5563;
}

.compare-card li {
  margin-bottom: 6px;
  font-weight: 400;
}

/* === FLOW BOX === */
.flow-box {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 22px;
  margin: 22px 0;
}

.flow-box h3 {
  margin-top: 0 !important;
  font-size: 18px;
  font-weight: 600;
  color: #0b3d91 !important;
}

.flow-steps {
  counter-reset: flow;
  list-style: none;
  padding: 0;
  margin: 0;
}

.flow-steps li {
  counter-increment: flow;
  position: relative;
  padding: 12px 14px 12px 54px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid #d1e0ff;
  border-radius: 10px;
  color: #4b5563;
  font-weight: 400;
}

.flow-steps li::before {
  content: counter(flow);
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: #0b3d91;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.flow-steps li:last-child {
  margin-bottom: 0;
}

/* === DOMAIN DEMO === */
.domain-demo {
  background: #0b3d91;
  color: #fff;
  border-radius: 10px;
  padding: 18px 22px;
  margin: 18px 0;
  font-family: "SF Mono", Monaco, Consolas, monospace;
  font-size: 15px;
}

.domain-demo .line {
  margin-bottom: 6px;
}

.domain-demo .line:last-child {
  margin-bottom: 0;
}

.domain-demo .tag {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.domain-demo .url {
  color: #a5d8ff;
}

/* === BENEFIT GRID === */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 18px 0 24px;
}

.benefit-card {
  background: #f3f6ff;
  border: 1px solid #dce6fb;
  border-radius: 10px;
  padding: 16px;
}

.benefit-card .ico { font-size: 22px; margin-bottom: 6px; }
.benefit-card strong { display: block; color: #0b3d91; margin-bottom: 4px; font-weight: 600; }
.benefit-card span { font-size: 14px; color: #4b5563; font-weight: 400; }

/* === MODEL BOXES === */
.model-box {
  border-radius: 12px;
  padding: 22px;
  margin: 20px 0;
  border: 1px solid #e5e7eb;
}

.model-provider { background: #fff7f7; border-color: #fbd5d5; }
.model-self { background: #fffaf0; border-color: #fde4b4; }
.model-teletom { background: #f0faf4; border-color: #bde7cc; }

.model-box h3 { margin-top: 0; }
.model-provider h3 { color: #b42318 !important; }
.model-self h3 { color: #b54708 !important; }
.model-teletom h3 { color: #067647 !important; }

/* === PROS & CONS === */
.pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

.pros-cons > div { background: #fff; border-radius: 8px; padding: 12px 14px; }

.pros-cons .label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.pros { border-left: 3px solid #12b76a; }
.pros .label { color: #067647; }
.cons { border-left: 3px solid #f04438; }
.cons .label { color: #b42318; }

.pros-cons ul { margin: 0; padding-left: 18px; font-size: 14.5px; color: #4b5563; }
.pros-cons li { margin-bottom: 4px; font-weight: 400; }

/* === STEPS === */
.steps {
  counter-reset: step;
  margin: 18px 0;
  padding: 0;
  list-style: none;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 12px 14px 12px 54px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid #d1e0ff;
  border-radius: 10px;
  color: #4b5563;
  font-weight: 400;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: #0b3d91;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* === CTA (Green block in articles) === */
.cta {
  background: linear-gradient(135deg, #067647 0%, #12b76a 100%);
  color: #fff;
  padding: 22px 24px;
  border-radius: 12px;
  margin-top: 30px;
}

.cta h3 {
  color: #fff !important;
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
}

.cta p {
  margin: 0;
  color: #eafaf1 !important;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* === RESPONSIVE === */
@media (max-width: 640px) {
  .pros-cons { grid-template-columns: 1fr; }
  .compare-box { grid-template-columns: 1fr; }
  .teletom-hero h1 { font-size: 24px; }
  .teletom-article h2 { font-size: 22px; }
  .domain-demo { font-size: 13px; padding: 14px 16px; }
}

/* === STATS ROW === */
.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 18px 0;
}
.stat-item {
  background: #f3f6ff;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.stat-item .num {
  font-size: 24px;
  font-weight: 700;
  color: #0b3d91;
  margin-bottom: 4px;
}
.stat-item .label {
  font-size: 13px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* === COMPARE BOX (Roundcube specific overrides) === */
.compare-heavy { background: #fff7f7; border-color: #fbd5d5; }
.compare-roundcube { background: #f0faf4; border-color: #bde7cc; }
.compare-heavy h4 { color: #b42318; }
.compare-roundcube h4 { color: #067647; }

/* === FEATURE GRID === */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 18px 0 24px;
}
.feature-card {
  background: #fff;
  border: 1px solid #dce6fb;
  border-radius: 12px;
  padding: 18px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(11, 61, 145, 0.08);
}
.feature-card .ico { font-size: 26px; margin-bottom: 8px; }
.feature-card strong { display: block; color: #0b3d91; margin-bottom: 6px; font-size: 16px; font-weight: 600; }
.feature-card span { font-size: 14.5px; color: #374151; line-height: 1.55; font-weight: 400; }

/* === PLUGIN BOX === */
.plugin-box {
  background: linear-gradient(135deg, #067647 0%, #12b76a 100%);
  color: #fff;
  border-radius: 14px;
  padding: 26px;
  margin: 24px 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.plugin-box h3 {
  color: #fff !important;
  margin: 0 0 14px 0;
  font-size: 22px;
  font-weight: 600;
}

.plugin-box p {
  color: #eafaf1 !important;
  margin-bottom: 16px;
  font-weight: 400;
}

.plugin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 16px;
}

.plugin-card {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 16px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.plugin-card .ico { 
  font-size: 28px; 
  margin-bottom: 6px; 
}

.plugin-card strong { 
  display: block; 
  color: #fff; 
  margin-bottom: 4px; 
  font-size: 16px; 
  font-weight: 600; 
}

.plugin-card span { 
  font-size: 14px; 
  color: #eafaf1; 
  font-weight: 400; 
}

/* === RESPONSIVE ADDITIONS === */
@media (max-width: 640px) {
  .compare-box, .plugin-grid, .stats-row { grid-template-columns: 1fr; }
  .teletom-hero h1 { font-size: 24px; }
  .teletom-article h2 { font-size: 22px; }
}

/* === MOTTO BOX === */
.motto-box {
  background: #0b3d91;
  color: #fff;
  border-radius: 14px;
  padding: 26px 28px;
  margin: 24px 0;
  text-align: center;
}
.motto-box .label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #a5d8ff;
  margin-bottom: 8px;
  font-weight: 600;
}
.motto-box .text {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
}

/* === LEVELS BOX (Anti-spam levels) === */
.levels-box {
  margin: 24px 0;
}
.level-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  margin-bottom: 14px;
  align-items: stretch;
}
.level-num {
  background: #0b3d91;
  color: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  text-align: center;
}
.level-num .n {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
}
.level-num .t {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 6px;
  color: #a5d8ff;
  font-weight: 600;
}
.level-content {
  border-radius: 12px;
  padding: 18px 20px;
  border: 1px solid #e5e7eb;
}
.level-content h4 {
  margin: 0 0 6px 0;
  font-size: 17px;
  font-weight: 600;
}
.level-content p {
  margin: 0;
  font-size: 15px;
  color: #4b5563;
  line-height: 1.6;
  font-weight: 400;
}
.level-content .tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 8px;
}

/* Level 1 - Red (Spoofed emails) */
.level-1 .level-content { background: #fff7f7; border-color: #fbd5d5; }
.level-1 h4 { color: #b42318; }
.level-1 .tag { background: #fee4e2; color: #b42318; }

/* Level 2 - Orange (Legitimate spam) */
.level-2 .level-content { background: #fff8ed; border-color: #fde4b4; }
.level-2 h4 { color: #b54708; }
.level-2 .tag { background: #fef0c7; color: #b54708; }

/* Level 3 - Dark Red (Attacks) */
.level-3 .level-content { background: #fef2f2; border-color: #fca5a5; }
.level-3 h4 { color: #7f1d1d; }
.level-3 .tag { background: #fecaca; color: #7f1d1d; }

/* === DNS GRID === */
.dns-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.dns-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 14px;
}
.dns-card .tag {
  display: inline-block;
  background: #0b3d91;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}
.dns-card p {
  margin: 0;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.4;
  font-weight: 400;
}

/* === COMPARE BOX (Address vs Alias) === */
.compare-address { background: #f3f6ff; border-color: #dce6fb; }
.compare-alias { background: #f0faf4; border-color: #bde7cc; }
.compare-address h4 { color: #0b3d91; }
.compare-alias h4 { color: #067647; }
.compare-card p {
  margin: 0;
  font-size: 14.5px;
  color: #374151;
  font-weight: 400;
  line-height: 1.5;
}

/* === SCREENSHOT PLACEHOLDER (in case you add images) === */
.screenshot-placeholder {
  background: #f3f4f6;
  border: 2px dashed #9ca3af;
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
  margin: 24px 0;
  color: #6b7280;
}
.screenshot-placeholder .ico {
  font-size: 32px;
  margin-bottom: 8px;
  display: block;
}

/* === SFTP BOX (Web Panel Part 2) === */
.sftp-box {
  background: linear-gradient(135deg, #1e3a8a 0%, #0b3d91 100%);
  color: #fff;
  border-radius: 14px;
  padding: 24px;
  margin: 24px 0;
}
.sftp-box h3 {
  color: #fff !important;
  margin-top: 0;
  font-size: 20px;
  font-weight: 600;
}
.sftp-box p {
  color: #e6efff !important;
  font-weight: 400;
  line-height: 1.6;
}
.sftp-box ul {
  color: #e6efff;
  padding-left: 18px;
  margin-bottom: 16px;
}
.sftp-box li {
  margin-bottom: 6px;
  font-weight: 400;
}

/* === PRICING PAGE STYLES === */
.pricing-hero {
  text-align: center;
  margin-bottom: 40px;
}
.pricing-hero h1 {
  font-size: 36px;
  font-weight: 800;
  color: #0b3d91;
  margin-bottom: 12px;
}
.pricing-hero p {
  font-size: 18px;
  color: #4b5563;
  max-width: 600px;
  margin: 0 auto;
}

.pricing-card {
  background: #ffffff;
  border: 2px solid #0b3d91;
  border-radius: 16px;
  padding: 40px;
  max-width: 700px;
  margin: 0 auto 40px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(11, 61, 145, 0.08);
}
.pricing-label {
  display: inline-block;
  background: #eef4ff;
  color: #0b3d91;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 6px 16px;
  border-radius: 20px;
  margin-bottom: 20px;
}
.pricing-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 8px;
}
.pricing-amount .currency {
  font-size: 32px;
  font-weight: 700;
  color: #0b3d91;
}
.pricing-amount .value {
  font-size: 64px;
  font-weight: 800;
  color: #0b3d91;
  line-height: 1;
}
.pricing-amount .period {
  font-size: 18px;
  color: #6b7280;
  font-weight: 500;
}
.pricing-setup {
  font-size: 16px;
  color: #067647;
  font-weight: 600;
  margin-bottom: 32px;
}

.price-features {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  border-top: 1px solid #e5e7eb;
  padding-top: 32px;
}
.price-features li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 16px;
  font-size: 16px;
  color: #374151;
  line-height: 1.5;
}
.price-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background: #f0faf4;
  color: #067647;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.reinstall-box {
  background: #f3f6ff;
  border: 1px solid #dce6fb;
  border-radius: 12px;
  padding: 24px;
  max-width: 700px;
  margin: 0 auto 40px;
  text-align: center;
}
.reinstall-box h3 {
  color: #0b3d91;
  margin: 0 0 12px 0;
  font-size: 18px;
}
.reinstall-box p {
  margin: 0;
  color: #4b5563;
  font-size: 15px;
  line-height: 1.6;
}
.reinstall-box strong {
  color: #067647;
}

.payment-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 800px;
  margin: 0 auto 40px;
}
.payment-col {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
}
.payment-col h4 {
  color: #0b3d91;
  margin: 0 0 16px 0;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.payment-col p {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 768px) {
  .pricing-hero h1 { font-size: 28px; }
  .pricing-card { padding: 28px 20px; }
  .pricing-amount .value { font-size: 48px; }
  .payment-options { grid-template-columns: 1fr; }
}

/* === TERMS OF SERVICE STYLES === */
.terms-section {
  margin-bottom: 40px;
}
.terms-section h2 {
  font-size: 24px;
  color: #0b3d91;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
}
.terms-section h3 {
  font-size: 18px;
  color: #1f2937;
  margin: 24px 0 12px 0;
}
.terms-section p {
  margin-bottom: 12px;
  line-height: 1.7;
}
.terms-section ul {
  margin: 12px 0;
  padding-left: 24px;
}
.terms-section li {
  margin-bottom: 8px;
  line-height: 1.6;
}
.terms-highlight {
  background: #f3f6ff;
  border-left: 4px solid #0b3d91;
  padding: 16px 20px;
  margin: 20px 0;
  border-radius: 8px;
}
.terms-highlight strong {
  color: #0b3d91;
}
.terms-toc {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 40px;
}
.terms-toc h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #0b3d91;
}
.terms-toc ol {
  margin: 0;
  padding-left: 24px;
}
.terms-toc li {
  margin-bottom: 8px;
  line-height: 1.6;
}
.terms-toc a {
  color: #0b3d91;
  text-decoration: none;
  transition: color 0.2s;
}
.terms-toc a:hover {
  color: #067647;
  text-decoration: underline;
}

/* === RESPONSIVE ADDITIONS (anti-spam) === */
@media (max-width: 640px) {
  .level-row { grid-template-columns: 1fr; }
  .level-num { flex-direction: row; gap: 10px; padding: 12px 16px; }
  .level-num .n { font-size: 24px; }
  .level-num .t { margin-top: 0; }
  .motto-box .text { font-size: 20px; }
  .motto-box { padding: 20px 18px; }
}