/* Protocol Her — comparison page styles (/compare). app.css is Tailwind
   compiled from the marketing pages only, so every class specific to this
   page lives here as plain CSS (no build step). Palette and rhythm mirror
   the brand values in tailwind-src/tailwind.config.js and the guide pages. */

/* Visually hidden table caption for screen readers (app.css is compiled
   from pages that never needed one). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------- Educational banner */
/* Same amber strip as the calculator and guides: the ground rules are
   stated before any table cell appears. */
.compare-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(201, 149, 108, 0.1);
  border: 1px solid rgba(201, 149, 108, 0.22);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.58);
}
.compare-banner svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  color: #D4A77F;
}

/* ------------------------------------------------------- Feature table */
/* The table is wider than any phone, so it scrolls inside its own strip;
   the first column stays pinned so the row labels never leave the screen. */
.compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 24px;
  border: 1px solid rgba(242, 196, 206, 0.14);
  background: rgba(255, 255, 255, 0.03);
}
.compare-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  line-height: 1.5;
}
.compare-table th,
.compare-table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(242, 196, 206, 0.1);
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td {
  border-bottom: none;
}

/* Column header row */
.compare-table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}

/* Row label column, pinned during horizontal scroll */
.compare-table th[scope="row"],
.compare-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 168px;
  max-width: 200px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  background: #1A1016;
  border-right: 1px solid rgba(242, 196, 206, 0.12);
  white-space: normal;
}
.compare-table thead th:first-child {
  z-index: 2;
  background: #201319;
}

/* The Protocol Her column reads as ours without shouting */
.compare-table .compare-us {
  background: rgba(242, 196, 206, 0.055);
  color: rgba(255, 255, 255, 0.85);
}
.compare-table thead th.compare-us {
  color: #F2C4CE;
}
.compare-table td {
  color: rgba(255, 255, 255, 0.6);
  min-width: 150px;
}

/* Yes / no / partial marks. Neutral tones only: a missing feature is a
   fact, not a verdict, on either side of the table. */
.compare-yes,
.compare-no,
.compare-mixed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.compare-yes { color: rgba(235, 164, 183, 0.95); }
.compare-no { color: rgba(255, 255, 255, 0.38); }
.compare-mixed { color: rgba(212, 167, 127, 0.95); }
.compare-yes svg,
.compare-no svg,
.compare-mixed svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.compare-cell-note {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.48);
}

/* Sourcing line under the table */
.compare-sources {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(242, 196, 206, 0.12);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.58);
}
.compare-sources a {
  color: #EBA4B7;
  text-decoration: none;
}
.compare-sources a:hover { color: #F2C4CE; }

/* ------------------------------------------------- One-line summaries */
.compare-quotes > * + * {
  margin-top: 40px;
}
.compare-quote {
  border-left: 2px solid rgba(235, 164, 183, 0.5);
  padding: 2px 0 2px 18px;
  margin: 0;
}
.compare-quote p {
  font-family: 'Tenor Sans', serif;
  font-size: 19px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
}
.compare-quote footer {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}