/* Aegis — shared styles for /compare/* pages.
 *
 * Loaded AFTER tools.css, which owns the tokens, nav, footer, .btn, .faq, .related and .endcta.
 * Everything here is specific to comparison pages: the answer-first verdict box, the side-by-side
 * table, the SWOT quadrants and the "which should you pick" rows.
 *
 * These pages exist because a comparison query is a buyer standing at a fork. So the components
 * are ordered to answer rather than tease: .verdict sits above the detail and states the actual
 * conclusion, including when the conclusion is "this comparison does not apply to you".
 */

.guide { max-width: 860px; margin: 0 auto; padding: 8px 24px 40px; }
.guide > section { padding: 34px 0; border-top: 1px solid var(--hairline); }
.guide > section:first-child { border-top: 0; padding-top: 26px; }
.guide h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.65rem; letter-spacing: -0.01em; margin-bottom: 12px; }
.guide h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin: 20px 0 6px; }
.guide p, .guide li { color: #d3d5da; max-width: 70ch; }
.guide p { margin-bottom: 12px; }
.guide ul { margin: 0 0 12px 20px; }
.guide li { margin-bottom: 7px; }
.lede { font-size: 1.12rem; color: #e6e8ec !important; }

/* The answer, before the argument. */
.verdict { background: var(--card-bg); border: 1px solid var(--hairline); border-left: 3px solid var(--signal); border-radius: 0 12px 12px 0; padding: 22px 26px; margin: 8px 0 4px; }
.verdict b.vh { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--signal); display: block; margin-bottom: 9px; }
.verdict p:last-child { margin-bottom: 0; }

/* Wide tables scroll inside their own container so the page body never moves sideways. */
.cmp-wrap { overflow-x: auto; margin: 18px 0; }
table.cmp { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 620px; border: 1px solid #4a4d56; }
table.cmp th { text-align: left; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--steel); padding: 10px 14px; border: 1px solid #4a4d56; }
table.cmp td { padding: 12px 14px; border: 1px solid #4a4d56; color: #d3d5da; vertical-align: top; }
table.cmp td:first-child { font-weight: 600; color: #e6e8ec; }

/* SWOT. The quadrant is the point: strengths/weaknesses describe the product now, opportunities/
   threats describe where it is heading — two different questions, so two rows. */
.swot { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 18px 0; }
.sq { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 10px; padding: 16px 18px; }
.sq b { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 8px; }
.sq.s b { color: var(--ok); }
.sq.w b { color: var(--bad); }
.sq.o b { color: var(--signal); }
.sq.t b { color: var(--warn); }
.sq ul { margin: 0 0 0 17px; }
.sq li { font-size: 0.9rem; margin-bottom: 6px; }

/* "If this is you, pick that." */
.pick { background: var(--card-2); border: 1px solid var(--hairline); border-radius: 10px; padding: 15px 18px; margin-bottom: 10px; }
.pick b { font-family: var(--font-display); display: block; margin-bottom: 5px; color: #e6e8ec; }
.pick p { margin: 0; font-size: 0.94rem; }

/* A named cost of getting it wrong. Amber rail: this is a warning, not an alarm. */
.cost { background: var(--card-bg); border-left: 3px solid var(--warn); border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 14px 0 4px; }
.cost b { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--warn); display: block; margin-bottom: 5px; }
.cost p { margin: 0; font-size: 0.95rem; }

.pull { border-left: 3px solid var(--signal); padding: 4px 0 4px 18px; margin: 20px 0; }
.pull p { font-size: 1.06rem; color: #e6e8ec !important; margin: 0; }

/* Hub index cards. */
.cmp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; margin-top: 20px; }
.cmp-card { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 12px; padding: 20px 22px; text-decoration: none; display: flex; flex-direction: column; gap: 8px; }
.cmp-card:hover { border-color: var(--steel); }
.cmp-card b { font-family: var(--font-display); font-size: 1.08rem; color: #e6e8ec; }
.cmp-card span { font-size: 0.9rem; color: var(--steel); }

@media (max-width: 620px) {
  .swot { grid-template-columns: 1fr; }
  .guide { padding: 8px 18px 32px; }
}