/* ==========================================================================
   ranking.css - page components

   The signature of this design is .ledger: strengths and limitations get
   identical width, identical type, identical weight. Only the leading rule
   colour differs. Shrinking the limitations column would turn an editorial
   ranking back into a vendor page - do not do it.
   ========================================================================== */

/* -- 1. Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  padding-top: calc(var(--section) * 0.8);
  overflow: hidden;
}

/* Faint command-grid wash. Ambient only - it must never compete with text. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(0, 227, 253, 0.1), transparent 60%),
    radial-gradient(90% 70% at 88% 0%, rgba(0, 85, 255, 0.14), transparent 62%),
    repeating-linear-gradient(to right, var(--outline-faint) 0 1px, transparent 1px 72px);
  opacity: 0.75;
  pointer-events: none;
}
.hero > .container { position: relative; }

.hero__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-bottom: var(--s-5);
}
.hero__meta li {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.hero__meta li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  background: var(--outline);
  border-radius: 1px;
  margin-right: var(--s-2);
}

.hero h1 { max-width: 17ch; }
.hero .lede { margin-top: var(--s-5); }
.hero__audience { margin-top: var(--s-5); max-width: var(--measure); color: var(--text-dim); }
.hero .callout { margin-top: var(--s-6); }

/* -- 2. Verdicts (At a Glance) ------------------------------------------ */
/* The compressed answer. This is the block a snippet or an AI overview lifts,
   so it is a real definition list: category term, provider verdict. */

.verdicts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-4);
}

.verdict {
  background: var(--s1);
  border: 1px solid var(--outline);
  border-top: 2px solid var(--teal-line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-3);
  align-content: start;
}

.verdict dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
.verdict dd { margin: 0; font-size: 0.96rem; line-height: 1.6; color: var(--text-dim); }
.verdict dd strong { display: block; font-size: 1.18rem; font-weight: 700; color: var(--heading); margin-bottom: var(--s-2); letter-spacing: -0.01em; }

/* -- 3. Criteria -------------------------------------------------------- */

.criteria {
  list-style: none;
  counter-reset: crit;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-4);
}

.criteria > li {
  counter-increment: crit;
  position: relative;
  background: var(--s1);
  border: 1px solid var(--outline);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  padding-top: var(--s-6);
  color: var(--text-dim);
  font-size: 0.96rem;
  line-height: 1.6;
}
.criteria > li::before {
  content: counter(crit, decimal-leading-zero);
  position: absolute;
  top: var(--s-4);
  left: var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--teal);
}
.criteria strong { display: block; margin-bottom: var(--s-2); font-size: 1.02rem; font-weight: 700; color: var(--heading); }

/* On the methodology page the criterion numbers are part of the authored text,
   not a list marker, so the CSS counter is suppressed there to avoid printing
   the number twice. */
.criteria--inline-numbers > li { padding-top: var(--s-5); }
.criteria--inline-numbers > li::before { content: none; }

/* -- 4. Company profiles ------------------------------------------------ */

.rank-list { list-style: none; display: grid; gap: var(--s-5); }

.profile {
  position: relative;
  background: var(--s1);
  border: 1px solid var(--outline);
  border-radius: var(--r-xl);
  padding: var(--s-6);
  display: grid;
  gap: var(--s-5);
  overflow: hidden;
}

.profile__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--rule);
}

/* The rank is the most-scanned element in a ranking, so it has to be readable,
   not a ghost watermark: --outline gave 1.8:1 against the card. --text-muted
   clears AA for large text while still sitting behind the company name. */
.profile__rank {
  font-family: var(--font-mono);
  font-size: 2.25rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text-muted);
  min-width: 2.4ch;
}

.profile__badge { margin-bottom: var(--s-2); }
.profile__name { letter-spacing: -0.02em; }

/* Monogram instead of a third-party logo: no trademark exposure, no external
   requests, and one consistent visual rhythm down the whole list. */
.profile__monogram {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  background: var(--s3);
  border: 1px solid var(--outline);
  border-radius: var(--r);
  padding: var(--s-2) var(--s-3);
  white-space: nowrap;
}

.profile__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--s-4);
  margin: 0;
}
.profile__facts .fact { display: grid; gap: var(--s-1); align-content: start; }
.profile__facts dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.profile__facts dd { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--text); }

.profile__why p:last-child,
.profile__best p:last-child { margin-top: var(--s-2); color: var(--text-dim); }
.profile__why p:last-child { font-size: 1rem; }

/* -- 4a. The ledger: the signature element ------------------------------ */

.ledger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

.ledger__col {
  background: var(--s2);
  border: 1px solid var(--outline);
  border-radius: var(--r-lg);
  border-left-width: 3px;
  padding: var(--s-5);
  display: grid;
  gap: var(--s-3);
  align-content: start;
}
.ledger__col--pro { border-left-color: var(--teal); }
.ledger__col--con { border-left-color: var(--warn); }
.ledger__col--pro .label { color: var(--teal); }
.ledger__col--con .label { color: var(--warn); }

.ledger__list { list-style: none; display: grid; gap: var(--s-4); }
.ledger__list li { font-size: 0.94rem; line-height: 1.6; color: var(--text-dim); }
.ledger__list strong { display: block; color: var(--heading); font-weight: 600; margin-bottom: 2px; }
.ledger__col p { font-size: 0.94rem; line-height: 1.6; color: var(--text-dim); }

@media (max-width: 860px) {
  .ledger { grid-template-columns: 1fr; }
}

.profile__link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--outline);
  border-radius: var(--r);
  padding: var(--s-3) var(--s-5);
  transition: border-color var(--speed) var(--ease), color var(--speed) var(--ease), background var(--speed) var(--ease);
}
.profile__link:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-wash);
  text-decoration: none;
}

@media (max-width: 700px) {
  .profile { padding: var(--s-5); }
  .profile__head { grid-template-columns: auto 1fr; row-gap: var(--s-3); }
  .profile__monogram { grid-column: 2; justify-self: start; }
  .profile__rank { font-size: 1.75rem; }
}

/* -- 5. Comparison table ------------------------------------------------ */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--outline);
  border-radius: var(--r-lg);
  background: var(--s1);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.data-table th,
.data-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-4);
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
}

.data-table thead th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--s0);
  white-space: nowrap;
  border-bottom-color: var(--outline);
}

.data-table tbody th[scope="row"] {
  font-weight: 700;
  color: var(--heading);
  white-space: nowrap;
}

.data-table td { color: var(--text-dim); }
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }

/* Five data columns do not fit a phone. Pinning the company name keeps every
   scrolled cell attributable - the row label is the one thing you cannot
   afford to lose while scrolling sideways. */
.data-table--compare { min-width: 940px; }
.data-table--compare th[scope="row"] {
  position: sticky;
  left: 0;
  background: var(--s1);
  border-right: 1px solid var(--outline);
}
.data-table--compare thead th:first-child {
  position: sticky;
  left: 0;
  background: var(--s0);
  border-right: 1px solid var(--outline);
  z-index: 1;
}

.table-hint {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--s-3);
}
@media (min-width: 1000px) { .table-hint { display: none; } }

/* -- 6. Segments (how to choose) ---------------------------------------- */

.segments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--s-4);
  margin: 0;
}

.segment {
  background: var(--s1);
  border: 1px solid var(--outline);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: grid;
  gap: var(--s-3);
  align-content: start;
}
.segment dt { font-size: 1.06rem; font-weight: 700; color: var(--heading); letter-spacing: -0.01em; }
.segment dd { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--text-dim); }

/* -- 7. FAQ ------------------------------------------------------------- */

.faq__list { display: grid; gap: var(--s-3); max-width: 90ch; }

.faq__item {
  background: var(--s1);
  border: 1px solid var(--outline);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--teal-line); }

.faq__item summary {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; flex: 1; }

.faq__item summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--speed) var(--ease);
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__item summary:hover h3 { color: var(--teal); }

.faq__item > p {
  padding: 0 var(--s-5) var(--s-5);
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: var(--measure);
}

/* -- 8. Closing CTA ----------------------------------------------------- */

.cta-band {
  background: var(--s1);
  border: 1px solid var(--outline);
  border-top: 2px solid var(--teal-line);
  border-radius: var(--r-xl);
  padding: var(--s-7) var(--s-6);
  display: grid;
  gap: var(--s-4);
  justify-items: start;
}
.cta-band h2 { max-width: 20ch; }
.cta-band p { color: var(--text-dim); max-width: var(--measure); }
.cta-band .btn { margin-top: var(--s-2); }

/* -- 9. Subpage helpers ------------------------------------------------- */

.page-head { padding-top: calc(var(--section) * 0.75); padding-bottom: var(--s-6); }
.page-head h1 { max-width: 20ch; }
.page-head .lede { margin-top: var(--s-5); }

/* Definition list used on the submission and contact pages, where the source
   text is a list of labelled items rather than running prose. */
.deflist { display: grid; gap: var(--s-4); max-width: var(--measure); margin: 0; }
.deflist > div {
  background: var(--s1);
  border: 1px solid var(--outline);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  display: grid;
  gap: var(--s-2);
}
.deflist dt { font-weight: 700; color: var(--heading); font-size: 0.98rem; }
.deflist dd { margin: 0; font-size: 0.94rem; line-height: 1.6; color: var(--text-dim); }

/* Numbered checklist for "what to include" style content. */
.steps { list-style: none; counter-reset: step; display: grid; gap: var(--s-4); max-width: var(--measure); }
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: var(--s-8);
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--text-dim);
  min-height: 34px;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--teal);
  background: var(--s2);
  border: 1px solid var(--outline);
  border-radius: var(--r);
}
.steps strong { display: block; color: var(--heading); margin-bottom: 2px; }

/* Plain feature grid for short labelled items that are not a sequence. */
.tiles { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); }
.tiles > li {
  background: var(--s1);
  border: 1px solid var(--outline);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-dim);
}
.tiles strong { display: block; color: var(--heading); margin-bottom: var(--s-2); }

/* Contact page: the address is the page's primary action, so it is set at
   heading scale in mono - it reads as a handle, not as running prose. */
.contact-email {
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 0.8rem + 0.7vw, 1.2rem);
  font-weight: 500;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
.contact-email a { color: var(--teal); font-weight: 600; }