/* Generated from style.css. Module: ranking. */
.rankings-hub {
background: #f4f7fb;
}

.ranking-fit-grid,
.ranking-similar-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ranking-fit-grid > div,
.ranking-similar-card {
min-width: 0;
padding: 18px;
border: 1px solid var(--line);
border-radius: 12px;
background: #fff;
}

.ranking-fit-grid h3,
.ranking-similar-card h3 {
margin: 0 0 12px;
}

.ranking-similar-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ranking-similar-card dl {
display: grid;
gap: 12px;
margin: 0 0 16px;
}

.ranking-similar-card dl div {
display: grid;
gap: 4px;
}

.ranking-similar-card dt {
font-size: 12px;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
color: #647084;
}

.ranking-similar-card dd {
margin: 0;
}

.ranking-related-live-cam-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ranking-collection-page .ranking-comparison-table {
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}

.ranking-collection-page .ranking-comparison-table table {
min-width: 1080px;
}

.ranking-collection-page .ranking-comparison-table th:nth-child(2),
.ranking-collection-page .ranking-comparison-table td:nth-child(2) {
min-width: 170px;
}

.ranking-collection-page .ranking-comparison-table th:nth-child(3),
.ranking-collection-page .ranking-comparison-table td:nth-child(3) {
min-width: 240px;
white-space: normal;
}

.ranking-collection-page .ranking-comparison-table .table-actions {
min-width: 190px;
}

@media (max-width: 760px) {
.ranking-fit-grid,
.ranking-similar-grid,
.ranking-related-live-cam-grid {
grid-template-columns: minmax(0, 1fr);
}

.ranking-collection-page .ranking-comparison-table table,
.ranking-collection-page .ranking-comparison-table thead,
.ranking-collection-page .ranking-comparison-table tbody,
.ranking-collection-page .ranking-comparison-table tr {
display: table;
}

.ranking-collection-page .ranking-comparison-table thead {
display: table-header-group;
}

.ranking-collection-page .ranking-comparison-table tbody {
display: table-row-group;
}

.ranking-collection-page .ranking-comparison-table tr {
display: table-row;
margin: 0;
border: 0;
background: transparent;
}

.ranking-collection-page .ranking-comparison-table th,
.ranking-collection-page .ranking-comparison-table td,
.ranking-collection-page .ranking-comparison-table td:first-child {
display: table-cell;
min-width: 90px;
padding: 12px;
vertical-align: top;
white-space: normal;
}

.ranking-collection-page .ranking-comparison-table td::before,
.ranking-collection-page .ranking-comparison-table td:first-child::before {
display: none;
content: none;
}
}

.rankings-hub-hero {
background:
    radial-gradient(circle at 82% 18%, rgba(244, 37, 71, 0.36), transparent 28%),
    radial-gradient(circle at 55% 105%, rgba(40, 120, 212, 0.2), transparent 30%),
    linear-gradient(135deg, #06111d 0%, #0b1726 58%, #090e16 100%);
}

.rankings-hub-stats div:first-child {
background:
    linear-gradient(135deg, rgba(244, 37, 71, 0.82), rgba(215, 19, 51, 0.68)),
    rgba(255, 255, 255, 0.08);
}

.rankings-featured-grid {
display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.ranking-featured-card {
min-height: 288px;
}

.rankings-criteria-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}

.latest-ranking-table strong {
color: #0f172a;
}

.ranking-table {
overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.ranking-collection-page {
background: #f4f7fb;
}

.ranking-collection-page > .section {
padding: 24px 0;
}

.ranking-collection-page > .section + .section {
padding-top: 12px;
}

.ranking-group-section .section-heading {
margin-bottom: 14px;
}

.ranking-group-table {
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.035);
}

.ranking-groups-grid {
display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.ranking-group-card {
min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.05);
}

.ranking-group-card-head {
min-height: 132px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 88% 16%, rgba(244, 37, 71, 0.1), transparent 25%),
    #fff;
}

.ranking-group-card-head h2 {
margin: 0;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.18;
}

.ranking-group-card-head p {
margin: 9px 0 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.ranking-card-list {
display: grid;
  gap: 8px;
  padding: 10px;
}

.ranking-empty-note {
margin: 0;
  border: 1px dashed #dbe4ef;
  border-radius: 12px;
  padding: 14px;
  background: #f8fafc;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.ranking-card-row {
display: grid;
  grid-template-columns: 30px 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}

.ranking-card-row .rank-badge {
width: 30px;
  height: 30px;
}

.ranking-card-row .site-logo {
width: 38px;
  height: 38px;
  font-size: 12px;
}

.ranking-site-logo.has-image {
overflow: hidden;
  border: 1px solid #dbe4ef;
  background: #fff;
  padding: 3px;
}

.ranking-site-logo img {
display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 7px;
}

.ranking-card-row strong {
min-width: 0;
  overflow-wrap: anywhere;
  color: #0f172a;
  font-size: 14px;
  line-height: 1.25;
}

.ranking-text-link {
display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  padding: 7px 10px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.ranking-text-link:hover {
background: var(--brand-dark);
}

.ranking-row-actions {
display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.ranking-text-link-secondary {
border: 1px solid #dbe3ee;
  background: #fff;
  color: var(--brand);
}

.ranking-text-link-secondary:hover {
border-color: #ffbdc8;
  background: #fff7f8;
  color: var(--brand-dark);
}

.ranking-more {
border-top: 1px solid var(--line-soft);
}

.ranking-more summary {
display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
  list-style: none;
}

.ranking-more summary::-webkit-details-marker {
display: none;
}

.ranking-more summary::after {
content: "+";
  color: var(--brand);
  font-size: 16px;
  line-height: 1;
}

.ranking-more[open] summary::after {
content: "-";
}

.ranking-card-list-more {
padding-top: 0;
}

.ranking-alternative-grid {
display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ranking-alt-card {
display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.035);
}

.ranking-alt-card h3 {
margin: 0;
  color: #0f172a;
  font-size: 17px;
  line-height: 1.25;
}

.ranking-alt-card p {
margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.6;
}

.ranking-method-box {
display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.8fr);
  gap: 24px;
  border: 1px solid #ffd4dc;
  border-radius: 14px;
  padding: 24px;
  background:
    radial-gradient(circle at 86% 18%, rgba(244, 37, 71, 0.12), transparent 26%),
    #fff;
  box-shadow: var(--shadow);
}

.ranking-method-box h2 {
margin: 0;
  color: #0f172a;
  font-size: 27px;
}

.ranking-method-box p {
margin: 12px 0 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.7;
}

.ranking-method-points {
display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ranking-method-points span {
position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 11px 12px 11px 34px;
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.ranking-method-points span::before {
content: "";
  position: absolute;
  top: 14px;
  left: 13px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
}

.ranking-hero-stats {
display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 660px;
  margin-top: 18px;
}

.ranking-hero-stats span {
display: grid;
  gap: 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(7, 18, 31, 0.72);
}

.ranking-hero-stats strong {
color: #fff;
  font-size: 22px;
  line-height: 1;
}

.ranking-hero-stats small {
color: #bad0e8;
  font-size: 12px;
  font-weight: 800;
}

.ranking-criteria-grid {
display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ranking-criteria-card {
min-height: 142px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.035);
}

.ranking-criteria-card span {
display: inline-flex;
  min-height: 28px;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  background: #eef6ff;
  color: #175fba;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.ranking-criteria-card p {
margin: 12px 0 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.65;
}

.ranked-site-list {
display: grid;
  gap: 18px;
}

.ranked-site-card {
overflow: hidden;
  border: 1px solid #dbe4ef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.055);
}

.ranked-site-head {
padding: 20px 22px;
  border-bottom: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 92% 20%, rgba(244, 37, 71, 0.1), transparent 24%),
    linear-gradient(135deg, #fff, #f8fafc);
}

.ranked-site-title {
display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.ranked-site-number {
display: inline-grid;
  min-width: 54px;
  min-height: 42px;
  place-items: center;
  border-radius: 12px;
  background: #06111d;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
}

.ranked-site-logo {
width: 46px;
  height: 46px;
  flex-basis: 46px;
}

.ranked-site-title h3 {
margin: 0;
  color: #0f172a;
  font-size: 24px;
  line-height: 1.15;
}

.ranked-site-title p {
margin: 7px 0 0;
  max-width: 920px;
  color: #475569;
  font-size: 14px;
  line-height: 1.6;
}

.ranked-signal-grid {
display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: #fbfcfe;
}

.ranked-signal-grid div {
min-width: 0;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 11px;
  background: #fff;
}

.ranked-signal-grid dt,
.ranked-signal-grid dd {
margin: 0;
}

.ranked-signal-grid dt {
color: #64748b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.ranked-signal-grid dd {
margin-top: 6px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.ranked-site-copy {
display: grid;
  grid-template-columns: 0.82fr 1.25fr 0.95fr;
  gap: 14px;
  padding: 20px 22px;
}

.ranked-site-copy > div {
min-width: 0;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 15px;
  background: #fff;
}

.ranked-site-copy h4 {
margin: 0;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.ranked-site-copy p {
margin: 8px 0 0;
  color: #334155;
  font-size: 14px;
  line-height: 1.65;
}

.ranked-site-actions {
display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 22px 22px;
}

.ranking-comparison-table .rank-site {
min-width: 210px;
}

.ranking-related-columns {
display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ranking-related-columns h3 {
margin: 0 0 12px;
  color: #0f172a;
  font-size: 20px;
}

.ranking-related-grid {
display: grid;
  gap: 12px;
}

.ranking-related-card {
display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.035);
}

.ranking-related-card span {
color: var(--brand);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.ranking-related-card strong {
color: #0f172a;
  font-size: 16px;
  line-height: 1.25;
}

.ranking-related-card small {
color: #64748b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.ranking-related-card:hover {
border-color: #ffb8c4;
  transform: translateY(-1px);
}

.rank-site {
display: flex;
  align-items: center;
  gap: 12px;
  min-width: 190px;
  font-weight: 800;
}

.rank-badge {
display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 999px;
  background: #fff1d7;
  color: #9d6709;
  font-weight: 900;
}

.ranking-links {
display: grid;
  gap: 12px;
}

.ranking-hero-inner {
grid-template-columns: minmax(0, 1fr) 210px;
}

.ranking-quick-picks-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ranking-quick-pick-card {
position: relative;
}

.ranking-quick-pick-card p {
margin: 10px 0 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.6;
}

.ranking-quick-pick-card .detail-actions {
margin-top: 16px;
}

.rank-cell {
display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.rank-square {
display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border-radius: 7px;
  background: var(--navy);
  color: #fff;
  font-weight: 900;
}

@media (max-width: 980px) {
.category-hub-stats,
  .hub-popular-grid,
  .rankings-featured-grid,
  .hub-small-grid,
  .hub-criteria-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 980px) {
.ranking-method-box,
  .ranking-hero-inner,
  .review-hero-inner,
  .category-detail-hero-inner,
  .category-detail-grid,
  .category-safety-card,
  .not-found-hero-inner,
  .guide-detail-layout,
  .detail-body {
grid-template-columns: 1fr;
}
}

@media (max-width: 980px) {
.ranking-groups-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 980px) {
.ranking-quick-picks-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 980px) {
.card-grid,
  .reviews-grid,
  .alternatives-list,
  .category-quick-picks,
  .ranking-alternative-grid,
  .choice-grid,
    .related-links,
    .review-alt-grid,
    .alt-quick-grid,
    .alt-note-grid,
    .alt-related-grid,
    .review-featured-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 760px) {
.card-grid,
  .reviews-grid,
  .alternatives-list,
  .category-quick-picks,
  .ranking-alternative-grid,
  .ranking-method-points,
  .snapshot-grid,
  .criteria-grid,
  .two-col,
  .choice-grid,
    .hub-popular-grid,
    .rankings-featured-grid,
    .hub-small-grid,
    .hub-card-metrics,
    .hub-criteria-grid,
    .quick-grid,
    .metric-grid,
    .method-grid,
    .summary-grid,
    .pros-grid,
    .safety-checks,
    .score-basis-grid,
    .criteria-list,
    .evidence-grid,
    .review-alt-grid,
    .decision-grid,
    .alt-note-grid,
    .alt-related-grid,
    .reviews-filter-bar,
    .review-directory-grid,
    .methodology-evaluate-grid,
    .methodology-label-grid,
    .methodology-process-grid,
    .methodology-limits-grid,
    .methodology-related-grid,
    .disclosure-overview-grid,
    .disclosure-two-column,
    .disclosure-list-grid,
    .editorial-principles-grid,
    .editorial-content-grid,
    .editorial-workflow-grid,
    .editorial-no-list,
    .not-found-grid-four,
    .not-found-grid-three,
    .not-found-ranking-list,
    .problem-grid,
    .guide-featured-grid,
    .guide-topic-grid,
    .guide-checklist-grid,
    .guide-type-grid,
    .guide-compare-grid,
    .safety-meaning-grid,
    .safety-two-column,
    .safety-risk-grid,
    .safety-checklist,
    .safety-type-grid,
    .safety-related-grid,
    .static-info-layout,
    .static-contact-form,
    .reviews-hub .method-grid,
    .review-category-grid,
    .review-featured-grid,
    .related-links {
grid-template-columns: 1fr;
}
}

@media (max-width: 760px) {
.ranking-groups-grid {
grid-template-columns: 1fr;
}
}

@media (max-width: 760px) {
.ranking-hero-stats,
  .ranking-criteria-grid,
  .ranked-signal-grid,
  .ranked-site-copy,
  .ranking-related-columns {
grid-template-columns: 1fr;
}
}

@media (max-width: 760px) {
.ranked-site-head,
  .ranked-signal-grid,
  .ranked-site-copy,
  .ranked-site-actions {
padding-right: 16px;
    padding-left: 16px;
}
}

@media (max-width: 760px) {
.ranked-site-title {
grid-template-columns: auto minmax(0, 1fr);
}
}

@media (max-width: 760px) {
.ranked-site-logo {
grid-column: 1;
}
}

@media (max-width: 760px) {
.ranked-site-title > div {
grid-column: 1 / -1;
}
}

@media (max-width: 760px) {
.ranked-site-title h3 {
font-size: 21px;
}
}

@media (max-width: 760px) {
.ranked-site-actions .small-btn {
width: 100%;
}
}

@media (max-width: 760px) {
.ranking-group-card-head {
min-height: 0;
    padding: 16px;
}
}

@media (max-width: 760px) {
.ranking-card-row {
grid-template-columns: 28px 42px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
}
}

@media (max-width: 760px) {
.ranking-card-row .rank-badge {
width: 28px;
    height: 28px;
}
}

@media (max-width: 760px) {
.ranking-card-row .site-logo {
width: 42px;
    height: 42px;
}
}

@media (max-width: 760px) {
.ranking-card-row strong {
font-size: 15px;
}
}

@media (max-width: 760px) {
.ranking-text-link {
justify-self: stretch;
    min-height: 38px;
    margin-top: 4px;
}
}

@media (max-width: 760px) {
.ranking-row-actions {
grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  width: 100%;
}
}

@media (max-width: 420px) {
.ranking-row-actions {
grid-template-columns: 1fr;
}
}

@media (max-width: 760px) {
.ranking-table,
  .preview-table,
  .ratings-table,
  .alternative-table {
border: 0;
    background: transparent;
}
}

@media (max-width: 760px) {
.ranking-table table,
  .ranking-table thead,
  .ranking-table tbody,
  .ranking-table tr,
  .ranking-table th,
  .ranking-table td,
  .preview-table table,
  .preview-table thead,
  .preview-table tbody,
  .preview-table tr,
  .preview-table th,
  .preview-table td,
  .ratings-table table,
  .ratings-table thead,
  .ratings-table tbody,
  .ratings-table tr,
  .ratings-table th,
  .ratings-table td,
  .alternative-table table,
  .alternative-table thead,
  .alternative-table tbody,
  .alternative-table tr,
  .alternative-table th,
  .alternative-table td {
display: block;
}
}

@media (max-width: 760px) {
.ranking-table thead,
  .preview-table thead,
  .ratings-table thead,
  .alternative-table thead {
display: none;
}
}

@media (max-width: 760px) {
.ranking-table tr,
  .preview-table tr,
  .ratings-table tr,
  .alternative-table tr {
margin-bottom: 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
}
}

@media (max-width: 760px) {
.ranking-table td,
  .preview-table td,
  .ratings-table td,
  .alternative-table td {
display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--line-soft);
}
}

@media (max-width: 760px) {
.ranking-table td::before,
  .preview-table td::before,
  .ratings-table td::before,
  .alternative-table td::before {
content: attr(data-label);
    flex: 0 0 94px;
    color: #647084;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}
}

@media (max-width: 760px) {
.ranking-table td:first-child,
  .preview-table td:first-child,
  .ratings-table td:first-child,
  .alternative-table td:first-child {
display: block;
}
}

@media (max-width: 760px) {
.ranking-table td:first-child::before,
  .preview-table td:first-child::before,
  .ratings-table td:first-child::before,
  .alternative-table td:first-child::before {
display: block;
    margin-bottom: 8px;
}
}

/* Live cam ranking layout refinement: keep every existing word and link visible. */
.live-cam-ranking-page > .section {
padding: 20px 0;
}

.live-cam-ranking-page > .section + .section {
padding-top: 8px;
}

.live-cam-ranking-page .ranking-similar-grid {
align-items: stretch;
}

.live-cam-ranking-page .ranking-similar-card {
display: flex;
min-width: 0;
height: 100%;
flex-direction: column;
border-color: #e5e7eb;
border-radius: 14px;
padding: 22px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.live-cam-ranking-page .ranking-similar-card dl {
flex: 1;
}

.live-cam-ranking-page .ranking-similar-card .detail-actions {
margin-top: auto;
}

.live-cam-ranking-page .ranking-similar-card .small-btn:not(.fill) {
border-color: #f42547;
background: #fff;
color: #d71333;
}

.live-cam-ranking-page .ranking-criteria-section {
background: #f1f5f9;
}

.live-cam-ranking-page .ranking-criteria-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}

.live-cam-ranking-page .ranking-criteria-card {
min-height: 0;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 16px 18px;
background: #fff;
box-shadow: none;
}

.live-cam-ranking-page .ranking-criteria-card span {
font-size: 12px;
}

.live-cam-ranking-page .ranking-method-box {
grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
gap: 20px;
border-color: #e5e7eb;
padding: 22px;
background: #fff;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.live-cam-ranking-page .ranking-method-points {
gap: 8px;
}

.live-cam-ranking-page .ranking-method-points span {
min-width: 0;
padding: 9px 10px 9px 30px;
}

.live-cam-ranking-page .ranking-faq-section .faq-list {
display: grid;
gap: 12px;
}

.live-cam-ranking-page .ranking-faq-card {
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 18px 20px;
background: #fff;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.035);
}

.live-cam-ranking-page .ranking-faq-question {
margin: 0;
color: #0f172a;
font-size: 16px;
line-height: 1.4;
}

.live-cam-ranking-page .ranking-faq-card p {
margin: 9px 0 0;
color: #475569;
line-height: 1.65;
}

.live-cam-ranking-page .ranking-related-live-cam-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}

.live-cam-ranking-page .ranking-related-card {
min-width: 0;
border-color: #e5e7eb;
border-radius: 12px;
padding: 16px 18px;
box-shadow: none;
}

.live-cam-ranking-page .ranking-related-card small {
color: #d71333;
font-size: 12px;
}

.live-cam-ranking-page .ranking-groups-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
}

.live-cam-ranking-page .ranking-group-card {
min-width: 0;
height: 100%;
border-color: #e5e7eb;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.live-cam-ranking-page .ranking-group-card-head {
min-height: 0;
padding: 20px 20px 14px;
background: #fff;
}

.live-cam-ranking-page .ranking-group-card-head h2 {
font-size: 19px;
line-height: 1.3;
}

.live-cam-ranking-page .ranking-group-card-head p {
margin-top: 7px;
font-size: 13px;
line-height: 1.5;
}

.live-cam-ranking-page .ranking-card-list {
gap: 0;
padding: 6px 12px;
}

.live-cam-ranking-page .ranking-card-row {
grid-template-columns: 28px 30px minmax(0, 1fr) auto;
min-height: 46px;
gap: 8px;
border: 0;
border-bottom: 1px solid #eef2f7;
border-radius: 0;
padding: 7px 4px;
box-shadow: none;
}

.live-cam-ranking-page .ranking-card-row:last-child {
border-bottom: 0;
}

.live-cam-ranking-page .ranking-card-row .rank-badge {
width: 26px;
height: 26px;
font-size: 11px;
}

.live-cam-ranking-page .ranking-card-row .site-logo {
width: 28px;
height: 28px;
font-size: 10px;
}

.live-cam-ranking-page .ranking-card-row strong {
overflow-wrap: break-word;
font-size: 13px;
}

.live-cam-ranking-page .ranking-row-actions {
gap: 4px;
}

.live-cam-ranking-page .ranking-text-link {
min-height: 26px;
border: 1px solid #f6a7b5;
border-radius: 999px;
padding: 3px 7px;
background: #fff;
color: #d71333;
font-size: 11px;
line-height: 1.2;
}

.live-cam-ranking-page .ranking-text-link:hover {
border-color: #f42547;
background: #fff7f8;
color: #b7102b;
}

.live-cam-ranking-page .ranking-more {
border-top: 1px solid #eef2f7;
}

.live-cam-ranking-page .ranking-more-label {
display: block;
padding: 8px 16px 2px;
color: #64748b;
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
}

.live-cam-ranking-page .ranking-card-list-more {
padding-top: 2px;
}

.live-cam-ranking-page .ranking-light-alternatives-section .ranking-alternative-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}

.live-cam-ranking-page .ranking-light-alternatives-section .ranking-alt-card {
min-width: 0;
gap: 9px;
border-color: #e5e7eb;
border-radius: 12px;
padding: 16px 18px;
box-shadow: none;
}

.live-cam-ranking-page .ranking-light-alternatives-section .small-btn.fill,
.live-cam-ranking-page .ranking-comparison-table .small-btn.fill {
border: 1px solid #f6a7b5;
background: #fff;
color: #d71333;
}

.live-cam-ranking-page .ranking-light-alternatives-section .small-btn {
min-height: 30px;
padding: 6px 10px;
}

.live-cam-ranking-page .ranking-comparison-table {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.live-cam-ranking-page img,
.live-cam-ranking-page .small-btn,
.live-cam-ranking-page .ranking-text-link {
max-width: 100%;
}

@media (max-width: 980px) {
.live-cam-ranking-page .ranking-similar-grid,
.live-cam-ranking-page .ranking-related-live-cam-grid,
.live-cam-ranking-page .ranking-light-alternatives-section .ranking-alternative-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.live-cam-ranking-page .ranking-criteria-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.live-cam-ranking-page .ranking-method-box {
grid-template-columns: minmax(0, 1fr);
}
}

@media (max-width: 760px) {
.live-cam-ranking-page > .section {
padding: 16px 0;
}

.live-cam-ranking-page .ranking-groups-grid,
.live-cam-ranking-page .ranking-similar-grid,
.live-cam-ranking-page .ranking-related-live-cam-grid,
.live-cam-ranking-page .ranking-light-alternatives-section .ranking-alternative-grid {
grid-template-columns: minmax(0, 1fr);
}

.live-cam-ranking-page .ranking-similar-card,
.live-cam-ranking-page .ranking-group-card-head,
.live-cam-ranking-page .ranking-method-box,
.live-cam-ranking-page .ranking-faq-card,
.live-cam-ranking-page .ranking-related-card,
.live-cam-ranking-page .ranking-light-alternatives-section .ranking-alt-card {
padding: 16px;
}

.live-cam-ranking-page .ranking-card-row {
grid-template-columns: 28px 28px minmax(0, 1fr);
min-height: 44px;
}

.live-cam-ranking-page .ranking-row-actions {
grid-column: 2 / -1;
display: flex;
width: auto;
flex-wrap: wrap;
justify-content: flex-start;
}

.live-cam-ranking-page .ranking-text-link {
justify-self: auto;
min-height: 26px;
margin-top: 0;
white-space: normal;
}

.live-cam-ranking-page .ranking-method-points {
grid-template-columns: minmax(0, 1fr);
}
}

@media (max-width: 600px) {
.live-cam-ranking-page .ranking-criteria-grid {
grid-template-columns: minmax(0, 1fr);
}
}

/* Live cam Quick Comparison: responsive cards replace the visual table. */
.live-cam-ranking-page .quick-comparison-section {
margin: 0;
}

.live-cam-ranking-page .comparison-card-list {
display: grid;
gap: 16px;
max-width: 100%;
}

.live-cam-ranking-page .comparison-card {
min-width: 0;
max-width: 100%;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 20px;
background: #fff;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.live-cam-ranking-page .comparison-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
}

.live-cam-ranking-page .comparison-site {
display: flex;
min-width: 0;
align-items: center;
gap: 12px;
}

.live-cam-ranking-page .comparison-rank-group,
.live-cam-ranking-page .comparison-site-name {
min-width: 0;
}

.live-cam-ranking-page .comparison-field-label,
.live-cam-ranking-page .comparison-score .score-label,
.live-cam-ranking-page .signal-label {
display: block;
margin-bottom: 5px;
color: #64748b;
font-size: 11px;
font-weight: 800;
letter-spacing: .03em;
text-transform: uppercase;
}

.live-cam-ranking-page .comparison-rank {
display: inline-flex;
width: 32px;
height: 32px;
flex: 0 0 32px;
align-items: center;
justify-content: center;
border-radius: 999px;
background: #fff1d7;
color: #9d6709;
font-size: 13px;
font-weight: 900;
}

.live-cam-ranking-page .comparison-logo,
.live-cam-ranking-page .comparison-logo .site-logo {
display: grid;
width: 40px;
height: 40px;
flex: 0 0 40px;
place-items: center;
}

.live-cam-ranking-page .comparison-logo .site-logo {
overflow: hidden;
border: 1px solid #e5e7eb;
border-radius: 10px;
}

.live-cam-ranking-page .comparison-logo img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}

.live-cam-ranking-page .comparison-title {
margin: 0;
overflow-wrap: break-word;
color: #0f172a;
font-size: 18px;
line-height: 1.3;
}

.live-cam-ranking-page .comparison-score {
flex: 0 0 auto;
text-align: right;
}

.live-cam-ranking-page .comparison-score strong {
color: #0f172a;
font-size: 22px;
line-height: 1;
}

.live-cam-ranking-page .comparison-signals {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-bottom: 16px;
}

.live-cam-ranking-page .signal-item {
min-width: 0;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 10px 12px;
background: #f8fafc;
}

.live-cam-ranking-page .signal-pill {
display: inline-flex;
max-width: 100%;
align-items: center;
border-radius: 999px;
padding: 5px 10px;
font-size: 13px;
font-weight: 700;
white-space: normal;
overflow-wrap: break-word;
}

.live-cam-ranking-page .comparison-best-for {
margin-top: 12px;
border-top: 1px solid #e5e7eb;
padding-top: 14px;
}

.live-cam-ranking-page .comparison-best-for h4,
.live-cam-ranking-page .comparison-links h4 {
margin: 0 0 8px;
color: #334155;
font-size: 14px;
}

.live-cam-ranking-page .comparison-best-for p {
margin: 0;
color: #0f172a;
line-height: 1.65;
}

.live-cam-ranking-page .comparison-links {
display: flex;
margin-top: 14px;
align-items: center;
flex-wrap: wrap;
gap: 8px;
border-top: 1px solid #e5e7eb;
padding-top: 14px;
}

.live-cam-ranking-page .comparison-links h4 {
width: 100%;
}

.live-cam-ranking-page .comparison-links a {
max-width: 100%;
min-height: 34px;
white-space: normal;
overflow-wrap: anywhere;
}

@media (max-width: 900px) {
.live-cam-ranking-page .comparison-signals {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 600px) {
.live-cam-ranking-page .comparison-card {
border-radius: 14px;
padding: 16px;
}

.live-cam-ranking-page .comparison-card-top {
align-items: flex-start;
flex-direction: column;
}

.live-cam-ranking-page .comparison-site {
width: 100%;
}

.live-cam-ranking-page .comparison-score {
text-align: left;
}

.live-cam-ranking-page .comparison-signals {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.live-cam-ranking-page .comparison-links {
align-items: stretch;
flex-direction: column;
}

.live-cam-ranking-page .comparison-links a {
width: 100%;
text-align: center;
}
}

@media (max-width: 380px) {
.live-cam-ranking-page .comparison-signals {
grid-template-columns: minmax(0, 1fr);
}
}