/* Generated from style.css. Module: home. */
.hero-home-inner {
min-height: 520px;
  grid-template-columns: minmax(0, 760px);
  justify-content: start;
}

.hero-home {
background-color: #040d19;
  background-image:
    linear-gradient(90deg, rgba(4, 13, 25, 0.97) 0%, rgba(4, 13, 25, 0.9) 44%, rgba(4, 13, 25, 0.68) 68%, rgba(4, 13, 25, 0.5) 100%),
    radial-gradient(circle at 86% 88%, rgba(166, 19, 55, 0.14), transparent 18%),
    url("../images/home-hero-safety-desktop-v2.webp?ver=20260613");
  background-position: center, 86% 88%, 80% center;
  background-repeat: no-repeat;
  background-size: cover, auto, cover;
}

.hero-home .hero-home-inner {
position: relative;
  z-index: 1;
}

.hero-search {
display: flex;
  width: min(620px, 100%);
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.hero-search label {
display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 16px;
  color: #66758b;
}

.hero-search input {
width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-size: 15px;
}

.hero-search button {
min-width: 112px;
  border: 0;
  border-left: 1px solid #f1c2ca;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.hero-search button:hover {
background: var(--brand-dark);
}

.hero-stats {
display: grid;
  max-width: 620px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 28px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: rgba(5, 12, 21, 0.58);
}

.hero-home .hero-art {
display: none;
}

.hero-home .hero-art::before,
.hero-home .hero-art::after {
display: none;
}

.hero-panel {
position: absolute;
  left: 28px;
  bottom: 26px;
  width: min(310px, calc(100% - 56px));
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  padding: 16px;
  background: rgba(4, 12, 22, 0.84);
  backdrop-filter: blur(14px);
}

.hero-panel h2 {
margin: 0;
  font-size: 15px;
  line-height: 1.3;
}

.score-row {
display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.score-pill {
border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 7px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.06);
}

.score-pill strong {
display: block;
  color: #fff;
  font-size: 17px;
  line-height: 1;
}

.score-pill span {
display: block;
  margin-top: 6px;
  color: #aebbc9;
  font-size: 11px;
  font-weight: 700;
}

.category-card,
.review-card,
.alternative-card,
.home-priority-card,
.criteria-card {
border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.035);
}

.home-priority-section {
padding-block: 44px;
}

.home-priority-alternatives {
background: #f8fafc;
  border-bottom: 1px solid var(--line-soft);
}

.home-priority-reviews {
background: #fff;
  border-bottom: 1px solid var(--line-soft);
}

.home-priority-grid {
display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.home-priority-card {
display: flex;
  min-width: 0;
  min-height: 218px;
  align-items: flex-start;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.home-priority-card:hover {
transform: translateY(-2px);
  border-color: #ffbdc8;
  box-shadow: var(--shadow);
}

.home-priority-label {
display: inline-flex;
  margin-bottom: 10px;
  color: var(--brand);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-priority-card h3 {
margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.3;
}

.home-priority-card p {
margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.home-priority-card .small-btn {
align-self: flex-start;
  margin-top: auto;
}

.category-card {
display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  min-height: 128px;
  padding: 18px;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.category-card:hover {
transform: translateY(-2px);
  border-color: #ffbdc8;
  box-shadow: var(--shadow);
}

.category-card h3,
.review-card h3,
.alternative-card h3,
.criteria-card h3 {
margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

.category-card p,
.review-card p,
.alternative-card p,
.criteria-card p {
margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.rank-section {
background: #fff;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

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

.rank-site {
display: flex;
  min-width: 190px;
  align-items: center;
  gap: 12px;
  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;
}

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

.review-card {
display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

.home-alternatives {
margin-top: 34px;
}

.alternative-card {
display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.alternative-card > div {
min-width: 0;
}

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

.criteria-card {
min-height: 142px;
  padding: 16px;
}

.criteria-card .mini-icon {
width: 38px;
  height: 38px;
  margin-bottom: 12px;
  font-size: 19px;
}

.guide-band {
display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  align-items: center;
  gap: 28px;
  overflow: hidden;
  border: 1px solid #ffd0d8;
  border-radius: 8px;
  padding: 30px;
  background:
    radial-gradient(circle at 88% 24%, rgba(244, 37, 71, 0.13), transparent 24%),
    linear-gradient(135deg, #fff 0%, #fff5f7 100%);
}

.guide-band h2 {
margin: 0;
  font-size: 25px;
  line-height: 1.2;
}

.guide-band p {
max-width: 760px;
  margin: 10px 0 0;
  color: #596579;
}

.guide-visual {
display: grid;
  width: 172px;
  height: 172px;
  justify-self: center;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  box-shadow: inset 0 0 0 12px #ffe2e7, 0 20px 45px rgba(244, 37, 71, 0.16);
  font-size: 84px;
}

.guide-actions {
display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.review-card-head {
display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.review-card-head h3 {
margin: 0;
  font-size: 18px;
  line-height: 1.25;
}

.review-card-head span {
display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.review-card-metrics {
display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
}

.review-card-metrics div {
border: 1px solid #e5e7eb;
  border-radius: 9px;
  padding: 9px 10px;
  background: #f8fafc;
}

.review-card-metrics dt,
.review-card-metrics dd {
margin: 0;
  font-size: 12px;
}

.review-card-metrics dt {
color: #64748b;
  font-weight: 800;
}

.review-card-metrics dd {
margin-top: 3px;
  color: #0f172a;
  font-weight: 900;
}

.review-card-actions {
display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: auto;
}

.alternatives-hub .review-card-metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}

.alternatives-hub .review-card-metrics div:last-child {
grid-column: 1 / -1;
}

@media (max-width: 1080px) {
.criteria-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}

@media (max-width: 980px) {
.hero-home {
  background-image:
        linear-gradient(180deg, rgba(4, 13, 25, 0.95) 0%, rgba(4, 13, 25, 0.91) 48%, rgba(4, 13, 25, 0.84) 100%),
      url("../images/home-hero-safety-mobile-aph-768.webp?ver=20260613");
      background-position: center, 72% center;
      background-repeat: no-repeat;
      background-size: cover, cover;
  }
}

@media (max-width: 600px) {
.hero-home {
  background-image:
        linear-gradient(180deg, rgba(4, 13, 25, 0.95) 0%, rgba(4, 13, 25, 0.91) 48%, rgba(4, 13, 25, 0.84) 100%),
      url("../images/home-hero-safety-mobile-aph-480.webp?ver=20260613");
  }
}

@media (max-width: 360px) {
.hero-home {
  background-image:
        linear-gradient(180deg, rgba(4, 13, 25, 0.95) 0%, rgba(4, 13, 25, 0.91) 48%, rgba(4, 13, 25, 0.84) 100%),
      url("../images/home-hero-safety-mobile-aph-320.webp?ver=20260613");
  }
}

@media (max-width: 980px) {
.hero-home-inner {
grid-template-columns: 1fr;
    padding-top: 38px;
}
}

@media (max-width: 980px) {
.hero-home .hero-art {
display: none;
}
}

@media (max-width: 980px) {
.card-grid,
  .home-priority-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) {
.hero-search {
display: grid;
}
}

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

.ranking-table table,
.ranking-table thead,
.ranking-table tbody,
.ranking-table tr,
.ranking-table th,
.ranking-table td {
display: block;
}

.ranking-table thead {
display: none;
}

.ranking-table tr {
margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.ranking-table td {
display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.ranking-table td::before {
content: attr(data-label);
  flex: 0 0 94px;
  color: #647084;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.ranking-table td:first-child {
display: block;
}

.ranking-table td:first-child::before {
display: block;
  margin-bottom: 8px;
}

.guide-band {
grid-template-columns: 1fr;
}

.guide-visual {
width: 132px;
  height: 132px;
  font-size: 62px;
}
}

@media (max-width: 520px) {
.category-card {
grid-template-columns: 44px minmax(0, 1fr);
  min-height: 0;
  padding: 15px;
}
}

@media (max-width: 760px) {
.hero-search label {
min-height: 48px;
}
}

@media (max-width: 760px) {
.hero-search button {
min-height: 46px;
    border-left: 0;
    border-top: 1px solid #f1c2ca;
}
}

@media (max-width: 760px) {
.hero-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}

@media (max-width: 760px) {
.card-grid,
  .home-priority-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: 520px) {
.home-priority-section {
padding-block: 34px;
}

.home-priority-card {
min-height: 0;
  padding: 18px;
}
}

@media (max-width: 520px) {
.hero-panel {
left: 16px;
    bottom: 16px;
    width: calc(100% - 32px);
}
}

@media (max-width: 520px) {
.score-row {
grid-template-columns: 1fr;
}
}