/* ==========================================================================
   home.css — ranking page only: hero, evidence ledger, criteria list,
   provider cards. Everything shared lives in global.css.
   ========================================================================== */

/* ---------- hero ---------- */
.hero { background: var(--night); color: var(--paper); padding: var(--s6) 0 var(--s5); overflow: hidden; }
.hero h1 { color: #f4fbe8; margin-bottom: var(--s4); }
/* colour-only accent, so a span rather than <em>: nothing here is emphasis */
.hero h1 span { color: var(--signal); display: block; }
.hero .lede { color: rgba(217, 242, 184, .88); }
.hero-top { display: grid; gap: var(--s3); margin-bottom: var(--s4); }
@media (min-width: 900px) {
  .hero-top { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s5); }
  .hero-aside { text-align: right; }
}
/* The reference's three-word aside earns its place beside a wide headline;
   stacked on a phone it is just a dead zone between H1 and lede. */
@media (max-width: 899px) { .hero-aside { display: none; } }
.hero-aside p {
  font-family: var(--body);
  font-size: .75rem;
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .13em;
  line-height: 1.9;
  color: rgba(217, 242, 184, .55);
  margin: 0;
  max-width: none;
}
.hero-body { display: grid; gap: var(--s4); }
@media (min-width: 900px) {
  .hero-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: start; }
}
.hero-note {
  border-left: 2px solid var(--signal);
  padding-left: var(--s3);
  font-size: .875rem;
  line-height: 1.65;
  color: rgba(217, 242, 184, .74);
}
.hero-note p { max-width: 46ch; }

/* ---------- evidence ledger: the signature block ---------- */
.ledger {
  margin-top: var(--s5);
  border-top: 1px solid var(--signal);
  display: grid;
  gap: 0;
}
@media (min-width: 700px) { .ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ledger-item { padding: var(--s3) 0; border-bottom: 1px solid rgba(217, 242, 184, .16); }
@media (min-width: 700px) {
  .ledger-item { border-bottom: 0; padding: var(--s3) var(--s4) var(--s2) 0; }
  .ledger-item + .ledger-item { border-left: 1px solid rgba(217, 242, 184, .16); padding-left: var(--s4); }
}
.ledger-num {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 68%;
  font-size: clamp(2.5rem, 6vw, 3.75rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--signal);
  display: block;
}
.ledger-item h2 {
  font-family: var(--body);
  font-size: .8125rem;
  font-weight: 600;
  font-stretch: normal;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1.4;
  color: var(--paper);
  margin: var(--s2) 0 var(--s1);
}
.ledger-item p { font-size: .8125rem; line-height: 1.6; color: rgba(217, 242, 184, .66); margin: 0; max-width: 34ch; }

/* ---------- takeaways ---------- */
.takeaways { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); counter-reset: t; }
@media (min-width: 800px) { .takeaways { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); } }
.takeaways li { border-top: 1px solid var(--ink); padding-top: var(--s2); }
.takeaways p { font-size: .9375rem; margin: 0; max-width: 52ch; }
.takeaways strong { display: block; font-size: 1rem; margin-bottom: var(--s1); }

/* ---------- criteria list (reference "PROJECT ARCHIVE" pattern) ----------
   Right-hand figures are real priority ranks, and the fading weight down the
   list encodes that priority rather than decorating it. */
.criteria { list-style: none; margin: 0; padding: 0; counter-reset: crit; }
.criteria > li {
  counter-increment: crit;
  border-top: 1px solid var(--rule);
  padding: var(--s3) 0;
  display: grid;
  gap: var(--s1);
  align-items: baseline;
}
.criteria > li:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 820px) {
  .criteria > li { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s4); }
  .criteria .crit-desc { grid-column: 1; }
}
.criteria .crit-name {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 66%;
  text-transform: uppercase;
  letter-spacing: -.025em;
  line-height: .95;
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  color: var(--ink);
  margin: 0;
}
.criteria .crit-rank {
  font-family: var(--mono);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 500;
  color: var(--forest);
  letter-spacing: .02em;
  line-height: 1;
  justify-self: start;
}
@media (min-width: 820px) {
  .criteria .crit-rank { grid-row: 1; grid-column: 2; justify-self: end; }
}
.criteria .crit-desc { font-size: .9375rem; margin: 0; max-width: 62ch; color: var(--ink-soft); }
.criteria > li:nth-child(2) .crit-name { color: #1c4415; }
.criteria > li:nth-child(3) .crit-name { color: #2f5a26; }
.criteria > li:nth-child(4) .crit-name { color: #3d6a33; }
.criteria > li:nth-child(5) .crit-name { color: #4f7a42; }

/* ---------- comparison table specifics ----------
   Explicit column minimums: six text columns at 940px squeezed "Best for"
   and "Why shortlisted" into two-word ribbons. Wider here, scrolls on mobile. */
.rank-table table { min-width: 1100px; }
.rank-table thead th:first-child { width: 40px; min-width: 40px; }
.rank-table thead th:nth-child(2) { min-width: 150px; }
.rank-table thead th:nth-child(3) { min-width: 190px; }
.rank-table thead th:nth-child(4) { min-width: 170px; }
.rank-table thead th:nth-child(5) { min-width: 210px; }
.rank-table thead th:nth-child(6) { min-width: 240px; }
.rank-table td p { max-width: none; }
.rank-table .rank-cell {
  font-family: var(--mono);
  font-size: .8125rem;
  font-weight: 500;
  color: var(--forest);
  white-space: nowrap;
}
.rank-table .chip { margin-top: .2rem; }

/* ---------- provider cards ----------
   One template, one visual weight, position 1 included. */
.providers { display: grid; gap: var(--s4); }
.provider {
  border: 1px solid var(--rule);
  border-top: 2px solid var(--forest);
  background: rgba(255, 255, 255, .46);
  border-radius: var(--radius);
  padding: var(--s4) var(--s3);
}
@media (min-width: 700px) { .provider { padding: var(--s4); } }
.provider-head { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
@media (min-width: 700px) {
  .provider-head { grid-template-columns: 3rem minmax(0, 1fr) auto; column-gap: var(--s3); align-items: start; }
  .provider-head .chip { justify-self: end; }
}
.provider-rank {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 66%;
  font-size: 2.25rem;
  line-height: .82;
  letter-spacing: -.03em;
  color: var(--forest);
  margin: 0;
}
.provider-name { margin: 0; }
.provider-name a { text-decoration-color: rgba(14, 42, 12, .3); }
.provider-for {
  font-family: var(--body);
  font-size: .75rem;
  font-weight: 600;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--ink-soft);
  margin: var(--s1) 0 0;
}
.provider-verdict { font-size: .9375rem; margin-bottom: var(--s3); max-width: 78ch; }
.provider dl { margin: 0; border-top: 1px solid var(--rule-soft); }
.provider dt {
  font-family: var(--body);
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-soft);
  padding-top: var(--s2);
}
.provider dd { margin: .2rem 0 0; font-size: .9375rem; padding-bottom: var(--s2); border-bottom: 1px solid var(--rule-soft); }
.provider dd:last-of-type { border-bottom: 0; }
@media (min-width: 820px) {
  .provider dl { display: grid; grid-template-columns: 12rem minmax(0, 1fr); column-gap: var(--s3); }
  .provider dt { padding-top: var(--s2); border-bottom: 1px solid var(--rule-soft); padding-bottom: var(--s2); }
  .provider dd { padding-top: var(--s2); margin-top: 0; }
}
.provider-foot {
  margin-top: var(--s3);
  padding-top: var(--s2);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s3);
  font-size: .8125rem;
}
.provider-foot .src { color: var(--ink-soft); font-size: .75rem; line-height: 1.6; max-width: 78ch; }

/* ---------- pentest stages (SVG-free, CSS-drawn sequence) ---------- */
.stages { list-style: none; margin: 0; padding: 0; counter-reset: stage; display: grid; gap: 0; }
.stages > li {
  counter-increment: stage;
  border-left: 2px solid var(--rule);
  padding: 0 0 var(--s3) var(--s4);
  position: relative;
}
.stages > li:last-child { padding-bottom: 0; border-left-color: transparent; }
.stages > li::before {
  content: counter(stage);
  position: absolute;
  left: -13px;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--signal);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  display: grid;
  place-items: center;
}
.stages h3 { font-size: 1.0625rem; font-stretch: 80%; margin: 0 0 var(--s1); }
.stages p { font-size: .9375rem; margin: 0; }