/* UI polish: Guides + Picks (shared) */
.ui-section{
  max-width: var(--max-w, 1100px);
  margin: 3rem auto;
  padding: 0 1rem;
}
.section-head{
  text-align: center;
  max-width: 860px;
  margin: 0 auto 1.25rem;
}
.section-head h2{
  margin: 0 0 .55rem 0;
  font-size: 1.85rem;
}
.section-head p{
  margin: 0;
  opacity: .82;
}

/* Guides */
.guides-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 240px));
  justify-content: center;
  gap: .9rem;
  max-width: var(--max-w, 1120px);
  margin: 0 auto;
}
.guide-card{
  background: rgba(2,6,23,.55);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.guide-card:hover{
  transform: translateY(-2px);
  border-color: rgba(34,211,238,.32);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}
.guide-thumb{width:100%; height:150px; object-fit:cover; display:block;}
.guide-body{padding:.9rem .95rem 1rem; display:flex; flex-direction:column; gap:.55rem;}
.guide-title{
  margin: 0;
  font-size: 1.0rem;
  line-height: 1.25;
}
.guide-desc{
  margin: 0;
  opacity: .86;
}
.guide-meta{
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  font-size: .9rem;
  opacity: .82;
}
.badge{
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.35);
  padding: .22rem .6rem;
  border-radius: 999px;
}
.guide-cta{
  margin-top: auto;
  display: flex;
  gap: .65rem;
  flex-wrap: wrap;
}
.guide-cta .btn{
  flex: 1;
  min-width: 160px;
  justify-content: center;
}

/* Picks */
.picks-header{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin-top: 2.2rem;
  margin-bottom: 1.15rem;
}
.picks-title{ margin: 0; font-size: 1.65rem; }
.picks-lede{ max-width: 900px; margin: 0 auto 1rem; text-align:center; }

.picks-grid{
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: var(--max-w, 1100px);
  margin: 0 auto 2.2rem;
}
.pick-card{
  border-radius: 16px;
}
.pick-card .card-img{
  height: 165px;
  overflow: hidden;
  border-bottom: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.55);
}
.pick-card .card-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.pick-title{
  margin: .9rem 1.05rem 0;
  font-size: 1.05rem;
}
.pick-specs{
  margin: .6rem 1.05rem 0;
  padding-left: 1.15rem;
  opacity: .9;
}
.pick-specs li{ margin: .25rem 0; }

.pick-card .btn-row{
  padding: .95rem 1.05rem 1.1rem;
}
.rank-badge{
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(2,6,23,.72);
  border: 1px solid rgba(34,211,238,.38);
  padding: .3rem .6rem;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .06em;
  font-size: .75rem;
  backdrop-filter: blur(6px);
}


/* Top picks (links only) */
.toplinks{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  justify-content:center;
  max-width: var(--max-w, 1120px);
  margin: .9rem auto 0;
  padding: .9rem;
  border-radius: 14px;
  background: rgba(10,14,24,.55);
  border: 1px solid rgba(148,163,184,.18);
}
.toplink{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  padding:.62rem .8rem;
  border-radius: 12px;
  background: rgba(2,6,23,.45);
  border: 1px solid rgba(148,163,184,.18);
  color:#e5e7eb;
  text-decoration:none;
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.1;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.toplink:hover{
  transform: translateY(-1px);
  border-color: rgba(34,211,238,.45);
  background: rgba(0,255,210,0.10);
}
.toplink .pill{
  font-size: .74rem;
  letter-spacing: .08em;
  font-weight: 900;
  padding: .22rem .5rem;
  border-radius: 999px;
  background: rgba(2,6,23,.70);
  border: 1px solid rgba(34,211,238,.34);
}

/* Compact CTA inside guide cards */
.guide-card .btn{
  padding: .48rem .72rem;
  font-size: .86rem;
}


/* Trust / E‑E‑A‑T */
.lt-disclaimer{opacity:.9;}
.meta-links a{transition: opacity .15s ease;}
.meta-links a:hover{opacity:.85;}
.author-box .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem .9rem;
  border-radius: 999px;
  border:1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.35);
  color: var(--text-main);
  text-decoration:none;
  font-weight:700;
  font-size:.92rem;
}
.author-box .btn:hover{border-color: rgba(56,189,248,.55); background: rgba(2,6,23,.55);}
.content-prose h2{margin:1.2rem 0 .55rem; font-size:1.35rem;}
.content-prose ul{padding-left:1.1rem; margin:.5rem 0 1rem;}
.content-prose p{line-height:1.75; color: rgba(248,250,252,.92);}



/* Guide insights: checklist + updates */
.guide-insights .insights-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  align-items: stretch;
}
@media (max-width: 900px){
  .guide-insights .insights-grid{ grid-template-columns: 1fr; }
}
.guide-insights .insights-card{
  background: rgba(12,18,30,.55);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  padding: 1rem 1rem .9rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.guide-insights h2{
  margin: .1rem 0 .65rem;
  font-size: 1.1rem;
  letter-spacing: .2px;
}
.guide-insights ul{
  margin: 0;
  padding-left: 1.05rem;
  line-height: 1.55;
}
.guide-insights li{
  margin: .35rem 0;
  color: rgba(248,250,252,.92);
}
.guide-insights .updates-date{
  margin: -.2rem 0 .55rem;
  opacity: .85;
  font-size: .95rem;
}
.guide-insights .updates{
  padding-left: 1.05rem;
}

/* Top 3 cards (guides) */
.top3-section{ margin-top: 1.8rem; }
.top3-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 245px));
  gap: .95rem;
  justify-content:center;
  max-width: var(--max-w, 1120px);
  margin: 0 auto;
  width: 100%;
}
.top3-card{
  background: rgba(2,6,23,.55);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  overflow:hidden;
  text-decoration:none;
  color:#fff;
  display:flex;
  flex-direction:column;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.top3-card:hover{
  transform: translateY(-2px);
  border-color: rgba(34,211,238,.32);
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}
.top3-thumb{
  width:100%;
  height: 128px;
  object-fit: cover;
  display:block;
}
.top3-body{
  padding: .85rem .95rem 1rem;
  display:flex;
  flex-direction:column;
  gap: .55rem;
}
.top3-body h3{
  margin:0;
  font-size: 1.02rem;
  line-height: 1.22;
  letter-spacing: .2px;
}
.top3-body ul{
  margin:0;
  padding-left: 1.1rem;
  line-height: 1.45;
  font-size: .92rem;
  opacity: .92;
}
.top3-cta{
  margin-top: .2rem;
  align-self:flex-start;
  display:inline-flex;
  padding: .55rem .85rem;
  border-radius: 999px;
  background: rgba(249,115,22,.95);
  color: #06121f;
  font-weight: 900;
  letter-spacing:.01em;
}

/* Header responsive (shared across pages) */
@media (max-width: 900px){
  .header-inner{ flex-direction: column; gap: .65rem; height: auto; padding: .85rem 1rem; }
  header nav{ flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 640px){
  .guides-grid{ grid-template-columns: repeat(auto-fit, minmax(170px, 210px)); }
  .guide-thumb{ height: 88px; }
  .top3-thumb{ height: 116px; }
  .top3-body{ padding: .78rem .85rem .9rem; }
  .top3-body ul{ font-size: .9rem; }
}



/* Global responsive helpers */
img{ max-width: 100%; height: auto; }
table{ width: 100%; }
@media (max-width: 640px){
  table{ font-size: .92rem; }
}

/* Responsive refinements */
@media (max-width: 900px){
  .guides-grid{grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); justify-content: stretch;}
  .ui-section{margin: 2.2rem auto;}
}
@media (max-width: 560px){
  .guides-grid{grid-template-columns: 1fr;}
  .guide-thumb{height: 165px;}
}

.guide-thumb img{width:100%;height:138px;object-fit:cover;display:block;}

.top3-thumb img{width:100%;height:150px;object-fit:cover;display:block;}

@media (max-width: 720px){
  .guides-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .top3-grid{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .guide-thumb img{ height: 120px; }
  .top3-thumb img{ height: 160px; }
}
@media (max-width: 480px){
  .guides-grid{ grid-template-columns: repeat(1, minmax(0, 1fr)); }
}


/* Comparison tables (SEO + CRO) */
.comp-wrapper{
  margin-top: 1.25rem;
  margin-bottom: 1.5rem;
}
.comp-table-wrap{
  overflow:auto;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 16px;
  background: rgba(10,14,24,.50);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.comp-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.comp-table th,
.comp-table td{
  padding: .85rem .9rem;
  border-bottom: 1px solid rgba(148,163,184,.16);
  vertical-align: top;
}
.comp-table th{
  text-align:left;
  font-size: .9rem;
  letter-spacing: .02em;
  opacity: .9;
  background: rgba(2,6,23,.30);
  position: sticky;
  top: 0;
  z-index: 1;
}
.comp-table tr:last-child td{ border-bottom: none; }
.comp-table .rank{
  font-weight: 900;
  letter-spacing: .06em;
  white-space: nowrap;
  opacity: .95;
}
.comp-table .muted{
  display:block;
  margin-top: .25rem;
  opacity: .8;
  line-height: 1.5;
  font-size: .95rem;
}
.comp-table .cta-cell{ white-space: nowrap; }
.comp-note{
  max-width: 860px;
  margin: .7rem auto 0;
  text-align:center;
  opacity: .82;
  font-size: .92rem;
  line-height: 1.6;
}
/* Smaller buttons inside tables (works with existing .btn) */
.btn.btn-sm{
  padding: .55rem .8rem !important;
  font-size: .88rem !important;
  border-radius: 999px !important;
}