/*
 * Styles for /phished-vs-hoxhunt/.
 *
 * Everything is scoped under .HoxhuntCompare so the bare element selectors the
 * design uses (section, table, p, ul, details) cannot reach the shared header
 * and footer. The site already sets html{font-size:62.5%} and loads Quicksand,
 * so the rem sizes and the font stack carry over from the original design
 * unchanged; the webfont import and the global reset are therefore dropped.
 */

.HoxhuntCompare {
  background: linear-gradient(135deg, #08142E 0%, #142447 100%);
  color: #fff;
  font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.8rem;
  line-height: 1.6;
  padding-bottom: 8px;
}

/* Zero-specificity reset: the rules below still win without !important. */
.HoxhuntCompare :where(h1, h2, h3, p, ul, ol, li, figure, table) {
  margin: 0;
  padding: 0;
}

.HoxhuntCompare a { color: #50BCBD; }

.HoxhuntCompare .wrap { max-width: 920px; margin: 0 auto; padding: 0 24px; }

/* ---- hero ---- */
.HoxhuntCompare .hero { padding: 40px 0 24px; }
.HoxhuntCompare .hero h1 { font-size: 4rem; line-height: 1.2; font-weight: 700; margin-bottom: 18px; }
.HoxhuntCompare .hero h1 .accent { color: #50BCBD; }
.HoxhuntCompare .hero p.lede { font-size: 1.9rem; color: #D2D6DF; max-width: 760px; margin-bottom: 20px; }
.HoxhuntCompare .reviewed { font-size: 1.4rem; color: #A5AEBF; font-weight: 600; margin-bottom: 28px; }

/* The diagrams are inline SVG so their <text> can use the page's Quicksand
   webfont; an <img>-loaded SVG renders in its own document and cannot. Width is
   fluid and height follows the viewBox, so they scale instead of letterboxing. */
.HoxhuntCompare .figure { margin: 0 0 36px; }
.HoxhuntCompare .figure svg { width: 100%; height: auto; display: block; border-radius: 16px; }
.HoxhuntCompare .figure text { font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif; }

/* ---- sections ---- */
.HoxhuntCompare section { padding: 34px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.HoxhuntCompare section:first-of-type { border-top: none; }
.HoxhuntCompare h2 { font-size: 2.8rem; font-weight: 700; margin-bottom: 16px; line-height: 1.3; }
.HoxhuntCompare h2 .accent { color: #50BCBD; }
.HoxhuntCompare h3 { font-size: 2.1rem; font-weight: 700; margin: 22px 0 10px; }
.HoxhuntCompare p { margin-bottom: 16px; color: #EDEFF5; }
.HoxhuntCompare strong { color: #fff; font-weight: 700; }
.HoxhuntCompare ul { margin: 0 0 16px 22px; }
.HoxhuntCompare li { margin-bottom: 8px; color: #EDEFF5; }

/* The shared stylesheet drops native markers (ol,ul{list-style:none}) and draws
   its own dot with ul li:before in #1f3460, which is all but invisible on this
   dark ground. Restore the native discs the design expects: they inherit the
   list item colour, so they come out the same near-white as the text. */
.HoxhuntCompare ul { list-style: disc; }
.HoxhuntCompare ul li::before { content: none; }

/* ---- framework stat cards ---- */
.HoxhuntCompare .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0; }
.HoxhuntCompare .stat-card { background: #1F3460; border-radius: 14px; padding: 22px 16px; text-align: center; }
.HoxhuntCompare .stat-card .num { font-size: 3.4rem; font-weight: 700; color: #50BCBD; line-height: 1; margin-bottom: 8px; }
.HoxhuntCompare .stat-card .lbl { font-size: 1.3rem; color: #A5AEBF; font-weight: 600; }

/* ---- comparison table ---- */
.HoxhuntCompare .table-scroll { overflow-x: auto; border-radius: 14px; margin: 20px 0; background: #1F3460; }
.HoxhuntCompare table { width: 100%; border-collapse: collapse; font-size: 1.5rem; min-width: 640px; table-layout: fixed; }
/* fixed layout + explicit widths so the two vendor columns are exactly equal */
.HoxhuntCompare table col.col-label { width: 22%; }
.HoxhuntCompare table col.col-vendor { width: 39%; }
.HoxhuntCompare thead th {
  text-align: left; padding: 16px 18px; font-size: 1.3rem; text-transform: uppercase;
  letter-spacing: .04em; color: #A5AEBF; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 700;
}
.HoxhuntCompare thead th.brand { color: #50BCBD; }
.HoxhuntCompare tbody td,
.HoxhuntCompare tbody th {
  padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: #EDEFF5; vertical-align: top; text-align: left; font-weight: 400;
  overflow-wrap: break-word; word-break: normal; hyphens: auto;
}
.HoxhuntCompare tbody th { color: #fff; font-weight: 600; }
.HoxhuntCompare tbody tr:last-child td,
.HoxhuntCompare tbody tr:last-child th { border-bottom: none; }

/* ---- choose lists ---- */
.HoxhuntCompare .choose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 24px 0; }
.HoxhuntCompare .choose-card { background: #1F3460; border-radius: 14px; padding: 24px; }
.HoxhuntCompare .choose-card h3 { margin-top: 0; font-size: 1.9rem; }
.HoxhuntCompare .choose-card.phished h3 { color: #50BCBD; }
.HoxhuntCompare .choose-card ul { margin-left: 18px; }
.HoxhuntCompare .choose-card li { font-size: 1.5rem; margin-bottom: 10px; }

/* ---- FAQ ---- */
.HoxhuntCompare details { background: #1F3460; border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; }
.HoxhuntCompare summary { font-size: 1.7rem; font-weight: 700; cursor: pointer; color: #fff; list-style: none; }
.HoxhuntCompare summary::-webkit-details-marker { display: none; }
.HoxhuntCompare summary::before { content: '+ '; color: #50BCBD; font-weight: 700; }
.HoxhuntCompare details[open] summary::before { content: '– '; }
.HoxhuntCompare details p { margin-top: 12px; margin-bottom: 0; color: #D2D6DF; font-size: 1.5rem; }

/* ---- about box ---- */
.HoxhuntCompare .about-box { background: #1F3460; border-radius: 14px; padding: 24px; font-size: 1.5rem; color: #D2D6DF; }
.HoxhuntCompare .about-box p { color: inherit; }
.HoxhuntCompare .about-box p:last-child { margin-bottom: 0; }

/* ---- closing call to action ---- */
.HoxhuntCompare .cta-box {
  background: linear-gradient(135deg, #123A5E 0%, #0E2F4E 100%);
  border: 1px solid #50BCBD; border-radius: 14px; padding: 32px; text-align: center;
}
.HoxhuntCompare .cta-box h2 { font-size: 2.4rem; margin-bottom: 12px; }
.HoxhuntCompare .cta-box p { max-width: 560px; margin: 0 auto 24px; color: #D2D6DF; font-size: 1.6rem; }
.HoxhuntCompare .cta-button {
  display: inline-block; background: #50BCBD; color: #08142E;
  font-size: 1.6rem; font-weight: 700; text-decoration: none;
  padding: 14px 32px; border-radius: 8px;
  transition: background-color .15s ease-in-out;
}
.HoxhuntCompare .cta-button:hover,
.HoxhuntCompare .cta-button:focus { background: #6FD2D3; color: #08142E; }

/* ---- narrow screens ---- */
@media (max-width: 767px) {
  .HoxhuntCompare .hero h1 { font-size: 3rem; }
  .HoxhuntCompare .hero p.lede { font-size: 1.7rem; }
  .HoxhuntCompare h2 { font-size: 2.2rem; }
  .HoxhuntCompare .stat-row { grid-template-columns: 1fr; }
  .HoxhuntCompare .choose-grid { grid-template-columns: 1fr; }
  .HoxhuntCompare .cta-box { padding: 24px 20px; }
  .HoxhuntCompare .cta-button { display: block; }

  /* Both diagrams are drawn on a 900-unit viewBox, so letting them fit a phone
     scales their 13px labels down to roughly 4.7px. Hold a floor and let the
     reader pan instead, the way the comparison table already behaves. At 700px
     those labels land near 10px. Desktop is untouched: the diagrams are wider
     than this floor there, so the min-width never applies. */
  .HoxhuntCompare .figure { overflow-x: auto; }
  .HoxhuntCompare .figure svg { min-width: 700px; }
}