:root {
  --color-brand: #0d47a1;
  --color-cta: #ff6d00;
  --font-main: Tahoma, Geneva, sans-serif;
  --text-dark: #222;
  --text-muted: #666;
  --border: #ccc;
  --bg-light: #f4f6fb;
  --bg-card: #fff;
  --brand-light: #e8eef8;
}

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

html, body {
  overflow-x: hidden;
}

body {
  font-family: var(--font-main);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-dark);
  background: #fff;
  margin: 0;
  padding: 0;
}

img, video, iframe, svg, canvas {
  max-width: 100%;
  height: auto;
}

.article-main {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 0 60px;
}

.article-container {
  background: var(--bg-card);
}

.article-hero {
  margin-bottom: 36px;
}

.article-hero img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.article-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-muted);
}

.meta-separator {
  color: var(--border);
}

.article-hero-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-brand);
  line-height: 1.7;
  margin: 16px 0 12px;
}

.article-hero-intro {
  font-size: 18px;
  color: #444;
  line-height: 1.7;
  margin: 0;
  border-left: 4px solid var(--color-brand);
  padding-left: 20px;
}

.article-disclaimer {
  background: var(--brand-light);
  border: 1px solid #c5d3ed;
  border-radius: 6px;
  padding: 14px 18px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 40px;
  color: var(--color-brand);
  font-size: 14px;
}

.article-disclaimer svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-brand);
}

.article-disclaimer p {
  margin: 0;
  line-height: 1.7;
  color: #1a3a7a;
}

.article-body {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.prose-section {
  margin-bottom: 48px;
}

.prose-section h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-brand);
  line-height: 1.7;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--brand-light);
}

.prose-section h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-brand);
  line-height: 1.7;
  margin: 28px 0 10px;
}

.prose-section p {
  margin: 0 0 18px;
  line-height: 1.7;
  color: var(--text-dark);
}

.prose-section p:last-child {
  margin-bottom: 0;
}

.article-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.article-list li {
  padding-left: 24px;
  position: relative;
  line-height: 1.7;
  color: var(--text-dark);
}

.article-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  background: var(--color-brand);
  border-radius: 50%;
}

.score-circles-block {
  background: var(--bg-light);
  border-radius: 8px;
  padding: 32px 24px;
  margin-bottom: 48px;
}

.score-circles-title {
  font-weight: 700;
  color: var(--color-brand);
  text-align: center;
  margin: 0 0 28px;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.score-circles-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}

.score-circle-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.circle-svg {
  display: block;
}

.circle-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-dark);
  text-align: center;
}

.circle-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-brand);
}

.watch-card {
  display: flex;
  gap: 20px;
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}

.watch-card:last-child {
  border-bottom: none;
}

.watch-card-rank {
  font-size: 3rem;
  font-weight: 700;
  color: var(--brand-light);
  line-height: 1;
  min-width: 60px;
  padding-top: 4px;
  user-select: none;
}

.watch-card-content {
  flex: 1;
  min-width: 0;
}

.watch-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
  gap: 12px;
}

.watch-card-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-brand);
  line-height: 1.7;
  margin: 0 0 4px;
}

.watch-card-price {
  font-size: 15px;
  color: var(--text-muted);
  margin: 0;
  font-weight: 400;
}

.watch-card-score {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-shrink: 0;
  background: var(--color-brand);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
}

.watch-card-score .score-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.watch-card-score .score-label {
  font-size: 13px;
  color: rgba(255,255,255,0.75);
}

.watch-card-content img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 16px;
  display: block;
}

.watch-card-content p {
  margin: 0 0 14px;
  line-height: 1.7;
  color: var(--text-dark);
}

.watch-pros-cons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 20px;
}

.pros, .cons {
  padding: 16px;
  border-radius: 6px;
}

.pros {
  background: #e8f5e9;
  border-left: 3px solid #388e3c;
}

.cons {
  background: #fff3e0;
  border-left: 3px solid #f57c00;
}

.pros strong, .cons strong {
  display: block;
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 14px;
  color: var(--text-dark);
}

.pros ul, .cons ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pros ul li, .cons ul li {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-dark);
  padding-left: 16px;
  position: relative;
}

.pros ul li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: #388e3c;
  font-weight: 700;
}

.cons ul li::before {
  content: '-';
  position: absolute;
  left: 0;
  color: #f57c00;
  font-weight: 700;
}

.table-responsive-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.comparison-table thead,
.comparison-table thead th {
  background: var(--color-brand);
  color: #fff;
}

.comparison-table th {
  padding: 12px 14px;
  text-align: left;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
}

.comparison-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dark);
  vertical-align: middle;
}

.comparison-table tbody tr:hover {
  background: var(--bg-light);
  transition: background-color 0.2s;
}

.comparison-table .table-highlight {
  background: var(--brand-light);
}

.comparison-table .table-highlight td {
  color: var(--text-dark);
}

.timeline-block {
  position: relative;
  padding-left: 32px;
  border-left: 3px solid var(--color-brand);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.timeline-item {
  position: relative;
  padding: 0 0 32px 24px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 4px;
  width: 13px;
  height: 13px;
  background: #fff;
  border: 3px solid var(--color-brand);
  border-radius: 50%;
}

.timeline-item-current::before {
  background: var(--color-brand);
}

.timeline-year {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-brand);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.timeline-content strong {
  display: block;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
  color: var(--text-dark);
}

.timeline-content p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #555;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.profile-card {
  background: var(--bg-light);
  border-radius: 8px;
  padding: 24px 20px;
  border-top: 3px solid var(--color-brand);
}

.profile-icon {
  margin-bottom: 14px;
}

.profile-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-brand);
  margin-bottom: 10px;
}

.profile-card p {
  font-size: 14px;
  color: #555;
  margin: 0;
  line-height: 1.7;
}

.calculator-block {
  background: var(--bg-light);
  border-radius: 8px;
  padding: 32px 28px;
  border: 1px solid #c5d3ed;
}

.calculator-intro {
  margin: 0 0 24px;
  color: var(--text-dark);
  font-size: 16px;
  line-height: 1.7;
}

.calculator-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calc-field label {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-brand);
}

.calc-field select {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-main);
  font-size: 15px;
  color: var(--text-dark);
  background: #fff;
  max-width: 100%;
  width: 100%;
}

.calc-field select:focus {
  outline: 2px solid var(--color-brand);
  border-color: var(--color-brand);
}

.calc-btn {
  background: var(--color-cta);
  color: #fff;
  border: none;
  padding: 13px 28px;
  font-family: var(--font-main);
  font-size: 16px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  align-self: flex-start;
  transition: background-color 0.2s;
  text-transform: uppercase;
}

.calc-btn:hover {
  background: #e65100;
}

.calc-btn:focus {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.calc-result {
  margin-top: 20px;
  font-size: 16px;
  color: var(--color-brand);
  font-weight: 700;
  line-height: 1.7;
  min-height: 24px;
}

.article-pullquote {
  margin: 0 0 48px;
}

.article-pullquote blockquote {
  border-left: 5px solid var(--color-brand);
  background: var(--brand-light);
  margin: 0;
  padding: 24px 28px;
  border-radius: 0 8px 8px 0;
}

.article-pullquote blockquote p {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-brand);
  line-height: 1.7;
}

.faq-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.faq-question {
  padding: 16px 20px;
  font-weight: 700;
  font-size: 15px;
  color: var(--color-brand);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-light);
  line-height: 1.7;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-brand);
  border-bottom: 2px solid var(--color-brand);
  transform: rotate(45deg);
  flex-shrink: 0;
  margin-left: 12px;
  transition: transform 0.2s;
}

.faq-item[open] .faq-question::after {
  transform: rotate(-135deg);
}

.faq-answer {
  padding: 16px 20px;
  background: #fff;
  border-top: 1px solid var(--border);
}

.faq-answer p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-dark);
}

@media (max-width: 768px) {
  .article-main {
    width: 100%;
    padding: 24px 16px 40px;
  }

  .article-hero img {
    height: 220px;
    border-radius: 6px;
  }

  .article-hero-title {
    font-size: 1.4rem;
  }

  .article-hero-intro {
    font-size: 16px;
  }

  .watch-card {
    flex-direction: column;
    gap: 12px;
  }

  .watch-card-rank {
    font-size: 2rem;
    min-width: auto;
  }

  .watch-card-header {
    flex-direction: column;
    gap: 10px;
  }

  .watch-card-score {
    align-self: flex-start;
  }

  .watch-card-content img {
    height: 180px;
  }

  .watch-pros-cons {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .score-circles-grid {
    gap: 20px;
  }

  .profile-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 9px 10px;
    font-size: 13px;
  }

  .timeline-block {
    padding-left: 20px;
  }

  .timeline-item {
    padding-left: 18px;
  }

  .calculator-block {
    padding: 20px 16px;
  }

  .calc-btn {
    width: 100%;
    text-align: center;
    align-self: stretch;
  }

  .prose-section h2 {
    font-size: 1.25rem;
  }
}

@media (max-width: 480px) {
  .article-hero-title {
    font-size: 1.2rem;
  }

  .article-hero-meta {
    flex-wrap: wrap;
    font-size: 13px;
  }

  .score-circles-grid {
    gap: 16px;
  }

  .faq-question {
    font-size: 14px;
    padding: 12px 14px;
  }

  .article-pullquote blockquote {
    padding: 16px 16px;
  }

  .article-pullquote blockquote p {
    font-size: 1rem;
  }

  .comparison-table th,
  .comparison-table td {
    font-size: 12px;
    padding: 7px 8px;
    white-space: nowrap;
  }
}

/* ===== TYPOGRAPHY SPACING FIX (APS_ARTICLE_TYPO_REQUIRED_v2) ===== */
/* Defensive guard against universal * { margin: 0 } reset in global.css. */
/* body-scoped via :where() so specificity stays at 0,0,0,1 — beats * but
   loses to any component rule like .tip-box p / .faq-item p. */
body :where(p)              { margin-bottom: 1.1rem; }
body :where(h2)             { margin-top: 2.5rem; margin-bottom: 1rem; }
body :where(h3)             { margin-top: 1.75rem; margin-bottom: 0.75rem; }
body :where(h4)             { margin-top: 1.25rem; margin-bottom: 0.5rem; }
body :where(ul, ol)         { margin-bottom: 1.1rem; padding-left: 1.5rem; }
body :where(li)             { margin-bottom: 0.4rem; }
body :where(blockquote)     { margin: 1.5rem 0; }

/* === Template callout classes (whitelisted in auto.php) === */
/* L'IA insère ces classes avec inline color:#fff; il leur faut donc un bg sombre. */
.highlight-box,
.tip-block,
.info-card,
.note-badge,
.final-quote,
.quote-block {
  background: var(--color-brand);
  color: #fff;
  padding: 18px 22px;
  border-radius: 10px;
  margin: 1.5rem 0;
  box-shadow: 0 2px 8px rgba(13, 71, 161, 0.12);
}

.highlight-box h3,
.highlight-box h4,
.highlight-box p,
.highlight-box ul,
.highlight-box ol,
.highlight-box li,
.tip-block h3,
.tip-block h4,
.tip-block p,
.tip-block ul,
.tip-block ol,
.tip-block li,
.info-card h3,
.info-card h4,
.info-card p,
.info-card ul,
.info-card ol,
.info-card li,
.quote-block p,
.quote-block li {
  color: #fff;
}

.highlight-box a,
.tip-block a,
.info-card a,
.quote-block a {
  color: #ffd180;
  text-decoration: underline;
}

.note-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--color-cta);
  margin: 0;
  box-shadow: none;
}

.final-quote {
  font-style: italic;
  font-size: 1.05rem;
  border-left: 4px solid var(--color-cta);
  padding-left: 24px;
}

.quote-block {
  background: #f5f7fb;
  color: var(--text-dark, #222);
  border-left: 4px solid var(--color-brand);
  font-style: italic;
}
.quote-block p,
.quote-block li {
  color: var(--text-dark, #222);
}

/* === Quiz/calculator widget (.quiz-container) injected per-article by auto.php === */
/* Container has dark linear-gradient bg from inline <style>; force descendants white
   to defeat global.css "p { color: var(--text-dark) }" specificity (rule auto.php #14). */
.quiz-container,
.quiz-container h1,
.quiz-container h2,
.quiz-container h3,
.quiz-container h4,
.quiz-container h5,
.quiz-container h6,
.quiz-container p,
.quiz-container li,
.quiz-container dt,
.quiz-container dd,
.quiz-container td,
.quiz-container th,
.quiz-container span,
.quiz-container label,
.quiz-container strong,
.quiz-container blockquote {
  color: #fff;
}
.quiz-container .quiz-btn,
.quiz-container button {
  color: #2c3e50;
}

/* === Article body image spacing === */
/* Images had margin:0 and following <p> had margin-top:0 (defensive :where rules
   only set margin-bottom). Result: text glued to image. */
.article-body img,
.prose-section img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.75rem auto;
  border-radius: 8px;
}
.article-hero img,
.article-hero-img img {
  margin: 0;
  border-radius: 0;
}

/* === Callout boxes invented by AI (pro-tip / warning-box / danger-box / etc.) === */
/* Layout: SVG icon flush-left, text block flush-right (the AI emits this structure). */
.pro-tip,
.tip-card,
.tips-box,
.expert-tip,
.security-tip,
.info-tip,
.warning-box,
.danger-box,
.attention-box,
.alert-box,
.caution-box {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 22px;
  border-radius: 10px;
  margin: 1.5rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Info / tip variants — brand blue */
.pro-tip,
.tip-card,
.tips-box,
.expert-tip,
.security-tip,
.info-tip {
  background: var(--color-brand);
  color: #fff;
  border-left: 4px solid var(--color-cta);
}

/* Warning / danger variants — red */
.warning-box,
.danger-box,
.attention-box,
.alert-box,
.caution-box {
  background: #b91c1c;
  color: #fff;
  border-left: 4px solid #fbbf24;
}

/* Force descendants white. The * selector has specificity (0,1,0) which loses to
   `.prose-section p { color: var(--text-dark) }` (0,1,1). Listing tags explicitly
   gives (0,1,1) — same as .prose-section p — and source order (later in file) wins. */
.pro-tip h1, .pro-tip h2, .pro-tip h3, .pro-tip h4, .pro-tip h5, .pro-tip h6,
.pro-tip p, .pro-tip li, .pro-tip dt, .pro-tip dd, .pro-tip td, .pro-tip th,
.pro-tip span, .pro-tip strong, .pro-tip em, .pro-tip a, .pro-tip blockquote, .pro-tip label,
.tip-card h1, .tip-card h2, .tip-card h3, .tip-card h4, .tip-card h5, .tip-card h6,
.tip-card p, .tip-card li, .tip-card dt, .tip-card dd, .tip-card td, .tip-card th,
.tip-card span, .tip-card strong, .tip-card em, .tip-card a, .tip-card blockquote, .tip-card label,
.tips-box h1, .tips-box h2, .tips-box h3, .tips-box h4, .tips-box h5, .tips-box h6,
.tips-box p, .tips-box li, .tips-box dt, .tips-box dd, .tips-box td, .tips-box th,
.tips-box span, .tips-box strong, .tips-box em, .tips-box a, .tips-box blockquote, .tips-box label,
.expert-tip h1, .expert-tip h2, .expert-tip h3, .expert-tip h4, .expert-tip h5, .expert-tip h6,
.expert-tip p, .expert-tip li, .expert-tip dt, .expert-tip dd, .expert-tip td, .expert-tip th,
.expert-tip span, .expert-tip strong, .expert-tip em, .expert-tip a, .expert-tip blockquote, .expert-tip label,
.security-tip h1, .security-tip h2, .security-tip h3, .security-tip h4, .security-tip h5, .security-tip h6,
.security-tip p, .security-tip li, .security-tip dt, .security-tip dd, .security-tip td, .security-tip th,
.security-tip span, .security-tip strong, .security-tip em, .security-tip a, .security-tip blockquote, .security-tip label,
.info-tip h1, .info-tip h2, .info-tip h3, .info-tip h4, .info-tip h5, .info-tip h6,
.info-tip p, .info-tip li, .info-tip dt, .info-tip dd, .info-tip td, .info-tip th,
.info-tip span, .info-tip strong, .info-tip em, .info-tip a, .info-tip blockquote, .info-tip label,
.warning-box h1, .warning-box h2, .warning-box h3, .warning-box h4, .warning-box h5, .warning-box h6,
.warning-box p, .warning-box li, .warning-box dt, .warning-box dd, .warning-box td, .warning-box th,
.warning-box span, .warning-box strong, .warning-box em, .warning-box a, .warning-box blockquote, .warning-box label,
.danger-box h1, .danger-box h2, .danger-box h3, .danger-box h4, .danger-box h5, .danger-box h6,
.danger-box p, .danger-box li, .danger-box dt, .danger-box dd, .danger-box td, .danger-box th,
.danger-box span, .danger-box strong, .danger-box em, .danger-box a, .danger-box blockquote, .danger-box label,
.attention-box h1, .attention-box h2, .attention-box h3, .attention-box h4, .attention-box h5, .attention-box h6,
.attention-box p, .attention-box li, .attention-box dt, .attention-box dd, .attention-box td, .attention-box th,
.attention-box span, .attention-box strong, .attention-box em, .attention-box a, .attention-box blockquote, .attention-box label,
.alert-box h1, .alert-box h2, .alert-box h3, .alert-box h4, .alert-box h5, .alert-box h6,
.alert-box p, .alert-box li, .alert-box dt, .alert-box dd, .alert-box td, .alert-box th,
.alert-box span, .alert-box strong, .alert-box em, .alert-box a, .alert-box blockquote, .alert-box label,
.caution-box h1, .caution-box h2, .caution-box h3, .caution-box h4, .caution-box h5, .caution-box h6,
.caution-box p, .caution-box li, .caution-box dt, .caution-box dd, .caution-box td, .caution-box th,
.caution-box span, .caution-box strong, .caution-box em, .caution-box a, .caution-box blockquote, .caution-box label {
  color: #fff;
}

/* The icon (SVG) sits to the left, doesn't shrink */
.pro-tip > svg,
.tip-card > svg,
.tips-box > svg,
.expert-tip > svg,
.security-tip > svg,
.info-tip > svg,
.warning-box > svg,
.danger-box > svg,
.attention-box > svg,
.alert-box > svg,
.caution-box > svg {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 2px;
}

/* Internal text block: <strong> as title */
.pro-tip strong,
.tip-card strong,
.tips-box strong,
.expert-tip strong,
.security-tip strong,
.info-tip strong,
.warning-box strong,
.danger-box strong,
.attention-box strong,
.alert-box strong,
.caution-box strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 4px;
}

/* Internal lists/grids inside .tips-box etc. */
.tips-list,
.tips-grid {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.tips-list li,
.tips-grid li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.tips-list li:last-child,
.tips-grid li:last-child {
  border-bottom: none;
}
.tips-title {
  font-weight: 700;
  margin-bottom: 8px;
}