/* article-specific rules only — base template in article-base.css */

/* IQ NOTE override — peach version (replaces base orange) */
.iq-note { background: #fff7f4; border-left: 3px solid var(--accent); border-radius: 0 var(--r) var(--r) 0; padding: 1rem 1.25rem; margin: 1.5rem 0; font-size: 0.92rem; color: var(--ink2); line-height: 1.7; border-top: none; border-right: none; border-bottom: none }
.iq-note strong { color: var(--ink) }

/* COMPARISON TABLE */
.comp-wrap { overflow-x: auto; margin: 1.5rem 0 2rem }
.comp-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; background: #fff; border: 1px solid #e5e5e2; border-radius: var(--rl); overflow: hidden }
.comp-table th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; padding: 0.85rem 1.1rem; text-align: left; border-bottom: 1px solid #e5e5e2; background: var(--s2) }
.comp-table th.th-og { background: rgba(232,86,42,0.08); color: var(--accent) }
.comp-table th.th-ms { background: rgba(0,120,212,0.06); color: #005a9e }
.comp-table td { padding: 0.85rem 1.1rem; border-bottom: 1px solid #f0f0ed; vertical-align: top; line-height: 1.6; color: var(--ink2) }
.comp-table tr:last-child td { border-bottom: none }
.comp-table td:first-child { font-weight: 500; color: var(--ink); font-size: 0.85rem; width: 25% }
.comp-table td.td-og { background: rgba(232,86,42,0.03) }
.comp-table td.td-ms { background: rgba(0,120,212,0.03) }

/* DECISION FRAMEWORK */
.decide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0 }
.decide-card { padding: 1.25rem 1.4rem; border-radius: var(--rl); border: 1px solid #e5e5e2 }
.decide-card.dc-ms { background: rgba(0,120,212,0.04); border-color: rgba(0,120,212,0.2) }
.decide-card.dc-og { background: rgba(232,86,42,0.04); border-color: rgba(232,86,42,0.2) }
.decide-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; margin-bottom: 0.9rem }
.dc-ms .decide-label { color: #005a9e }
.dc-og .decide-label { color: var(--accent) }
.decide-item { font-size: 0.88rem; color: var(--ink2); line-height: 1.65; margin-bottom: 0.55rem; display: flex; gap: 0.5rem }
.decide-item::before { content: '→'; flex-shrink: 0; color: var(--ink4) }

/* FAQ (border-divider style — different from manufacturing's box faq) */
.faq-block { margin: 2rem 0 }
.faq-item { border-bottom: 1px solid #e5e5e2; padding: 1.1rem 0 }
.faq-item:first-child { border-top: 1px solid #e5e5e2 }
.faq-q { font-size: 0.95rem; font-weight: 500; color: var(--ink); margin-bottom: 0.5rem }
.faq-a { font-size: 0.88rem; color: var(--ink2); line-height: 1.7 }

/* SIDEBAR (uses .sdb-* instead of .sb-*) */
.art-sidebar { position: sticky; top: 2rem }
.sdb-block { background: #fff; border: 1px solid #e5e5e2; border-radius: var(--rl); padding: 1.4rem; margin-bottom: 1.2rem }
.sdb-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink4); margin-bottom: 1rem; font-weight: 500 }
.sdb-links { display: flex; flex-direction: column; gap: 0.6rem }
.sdb-link { font-size: 0.83rem; color: var(--ink2); text-decoration: none; line-height: 1.4; transition: color 0.2s }
.sdb-link:hover { color: var(--accent) }
.sdb-link strong { color: var(--ink); display: block; font-weight: 500 }
.sdb-cta { background: var(--navy); border-radius: var(--rl); padding: 1.5rem; color: #fff }
.sdb-cta-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); margin-bottom: 0.6rem }
.sdb-cta h4 { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; line-height: 1.3; margin-bottom: 0.7rem }
.sdb-cta p { font-size: 0.82rem; color: rgba(255,255,255,0.6); line-height: 1.6; margin-bottom: 1rem }
.sdb-cta-btn { display: block; background: var(--accent); color: #fff; text-decoration: none; padding: 0.65rem 1rem; border-radius: var(--r); font-size: 0.83rem; font-weight: 500; text-align: center; transition: opacity 0.15s }
.sdb-cta-btn:hover { opacity: 0.88 }

/* BOTTOM CTA (card style — overrides base navy band) */
.art-cta { background: var(--navy); border-radius: var(--rl); padding: 2rem; margin-top: 2.5rem; color: #fff; text-align: left }
.art-cta-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.35); margin-bottom: 0.6rem }
.art-cta h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; margin-bottom: 0.7rem }
.art-cta p { font-size: 0.88rem; color: rgba(255,255,255,0.65); line-height: 1.65; margin-bottom: 1.2rem; max-width: none }
.art-cta-btn { display: inline-block; background: var(--accent); color: #fff; text-decoration: none; padding: 0.65rem 1.3rem; border-radius: var(--r); font-size: 0.88rem; font-weight: 500; transition: opacity 0.15s }
.art-cta-btn:hover { opacity: 0.88 }

@media (max-width: 900px) {
  .art-layout { gap: 3rem }
  .decide-grid { grid-template-columns: 1fr }
  .foot-i { grid-template-columns: 1fr 1fr !important }
}
@media (max-width: 600px) {
  .art-hero { padding: 3.5rem 1.25rem 3rem }
  .art-layout { padding: 2.5rem 1.25rem }
  .art-h1 { font-size: 1.75rem }
  .comp-table { font-size: 0.8rem }
  .foot-i { grid-template-columns: 1fr !important }
}