/*
 * Styles for /phished-vs-sosafe/.
 *
 * Everything is scoped under .SosafeCompare 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.
 */

.SosafeCompare {
  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. */
.SosafeCompare :where(h1, h2, h3, p, ul, ol, li, figure, table) {
  margin: 0;
  padding: 0;
}

.SosafeCompare a { color: #50BCBD; }

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

/* ---- hero ---- */
.SosafeCompare .hero { padding: 40px 0 24px; }
.SosafeCompare .hero h1 { font-size: 4rem; line-height: 1.2; font-weight: 700; margin-bottom: 18px; }
.SosafeCompare .hero h1 .accent { color: #50BCBD; }
.SosafeCompare .hero p.lede { font-size: 1.9rem; color: #D2D6DF; max-width: 760px; margin-bottom: 20px; }
.SosafeCompare .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. */
.SosafeCompare .figure { margin: 0 0 36px; }
.SosafeCompare .figure svg { width: 100%; height: auto; display: block; border-radius: 16px; }
.SosafeCompare .figure text { font-family: 'Quicksand', 'Helvetica Neue', Arial, sans-serif; }

/* ---- hero VS snapshot ---- */
/* Real text and <ul> markup, so the selectors below also have to undo the page's
   general paragraph margins and its restored list discs. */
.SosafeCompare .vs-snapshot {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  background: #152A4E; border-radius: 16px; padding: 28px 32px; margin: 0 0 36px;
}
.SosafeCompare .vs-card {
  flex: 1 1 0; max-width: 330px; border-radius: 14px; padding: 20px 24px;
  background: linear-gradient(180deg, #123A5E 0%, #0E2F4E 100%); border: 2px solid #50BCBD;
}
.SosafeCompare .vs-card.is-competitor { background: #1F3460; border-color: #5C6A85; }
.SosafeCompare .vs-card .vs-name {
  display: flex; align-items: center; gap: 10px;
  color: #fff; font-size: 2.4rem; font-weight: 700; margin: 0 0 14px;
}
.SosafeCompare .vs-card .check {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: #50BCBD; color: #08142E; font-size: 1.8rem;
}
.SosafeCompare .vs-card.is-competitor .check { background: #5C6A85; color: #152A4E; }
.SosafeCompare .vs-card ul { list-style: none; margin: 0; padding: 0; }
.SosafeCompare .vs-card li { font-size: 1.3rem; font-weight: 600; color: #9FD9D9; padding: 4px 0; margin: 0; }
.SosafeCompare .vs-card.is-competitor li { color: #A5AEBF; }
.SosafeCompare .vs-badge {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 68px; height: 68px; border-radius: 50%;
  background: #08142E; border: 2px solid #50BCBD;
  color: #50BCBD; font-size: 2rem; font-weight: 700;
}

/* ---- sections ---- */
.SosafeCompare section { padding: 34px 0; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.SosafeCompare section:first-of-type { border-top: none; }
.SosafeCompare h2 { font-size: 2.8rem; font-weight: 700; margin-bottom: 16px; line-height: 1.3; }
.SosafeCompare h2 .accent { color: #50BCBD; }
.SosafeCompare h3 { font-size: 2.1rem; font-weight: 700; margin: 22px 0 10px; }
.SosafeCompare p { margin-bottom: 16px; color: #EDEFF5; }
.SosafeCompare strong { color: #fff; font-weight: 700; }
.SosafeCompare ul { margin: 0 0 16px 22px; }
.SosafeCompare 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. */
.SosafeCompare ul { list-style: disc; }
.SosafeCompare ul li::before { content: none; }

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

/* ---- comparison table ---- */
.SosafeCompare .table-scroll { overflow-x: auto; border-radius: 14px; margin: 20px 0; background: #1F3460; }
.SosafeCompare 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 */
.SosafeCompare table col.col-label { width: 22%; }
.SosafeCompare table col.col-vendor { width: 39%; }
.SosafeCompare 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;
}
.SosafeCompare thead th.brand { color: #50BCBD; }
.SosafeCompare tbody td,
.SosafeCompare 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;
}
.SosafeCompare tbody th { color: #fff; font-weight: 600; }
.SosafeCompare tbody tr:last-child td,
.SosafeCompare tbody tr:last-child th { border-bottom: none; }
/* The table and the diagram scroll sideways on phones, so both are tab stops
   for keyboard users and need a focus ring they can see on the dark ground. */
.SosafeCompare .table-scroll:focus-visible,
.SosafeCompare .figure:focus-visible { outline: 2px solid #50BCBD; outline-offset: 3px; }
.SosafeCompare caption {
  caption-side: top; text-align: left; padding: 16px 18px 4px;
  font-size: 1.3rem; font-weight: 600; color: #A5AEBF;
}

/* ---- screenshot ---- */
.SosafeCompare .screenshot { margin: 8px 0 20px; }
.SosafeCompare .screenshot img { display: block; width: 100%; height: auto; border-radius: 16px; }
.SosafeCompare .screenshot figcaption { margin-top: 10px; font-size: 1.4rem; color: #A5AEBF; text-align: center; }

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

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

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

/* ---- closing call to action ---- */
.SosafeCompare .cta-box {
  background: linear-gradient(135deg, #123A5E 0%, #0E2F4E 100%);
  border: 1px solid #50BCBD; border-radius: 14px; padding: 32px; text-align: center;
}
.SosafeCompare .cta-box h2 { font-size: 2.4rem; margin-bottom: 12px; }
.SosafeCompare .cta-box p { max-width: 560px; margin: 0 auto 24px; color: #D2D6DF; font-size: 1.6rem; }
.SosafeCompare .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;
}
.SosafeCompare .cta-button:hover,
.SosafeCompare .cta-button:focus { background: #6FD2D3; color: #08142E; }

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

  /* Real text reflows, so stack the two cards instead of panning like the SVG did. */
  .SosafeCompare .vs-snapshot { flex-direction: column; gap: 16px; padding: 20px; }
  .SosafeCompare .vs-card { max-width: none; width: 100%; }
  .SosafeCompare .vs-badge { width: 52px; height: 52px; font-size: 1.7rem; }

  /* 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. */
  .SosafeCompare .figure { overflow-x: auto; }
  .SosafeCompare .figure svg { min-width: 700px; }
}