:root{
  --ink:#0f172a; --muted:#64748b; --ring:#e2e8f0; --brand:#0ea5e9;
  --bgc:#f8fafc; --ok:#16a34a; --badgeStart:#e0f2fe; --badgeEnd:#bfdbfe;
}

/* ===== Enhanced Industry Header ===== */
.industry-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
}

.industry-header-top {
  margin-bottom: 8px;
}

.editor-pick-label {
  font-size: 0.875rem;
  color: var(--muted);
  font-weight: 500;
}

.industry-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 16px 0;
  line-height: 1.2;
}

.industry-badges {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.badge-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0b1220;
  background: #fff;
  border: 1px solid var(--ring);
}

.badge-editor-pick,
.badge-verified {
  color: #0b1220;
}

.shield-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.industry-subtitle {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.industry-intro {
  font-size: 1rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 16px 0;
  max-width: 800px;
}

.hero-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--muted);
  margin-top: 16px;
}

.last-updated {
  color: var(--muted);
}

.trust-note {
  color: var(--muted);
}

.trust-note a {
  color: var(--brand);
  text-decoration: none;
}

.trust-note a:hover {
  text-decoration: underline;
}

/* ===== Providers Section wrapper & divider ===== */
.section-divider{
  border:0; height:1px; background:#e5e7eb; margin:16px 0 18px 0;
}

/* Benefit bullets - appears right after hero */
.benefit-bullets {
  margin: 24px 0 16px 0;
  padding: 0;
}

.benefit-bullets ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.benefit-bullets li {
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 0.95rem;
  color: #475569;
  position: relative;
  padding-left: 32px;
}

.benefit-bullets li::before {
  content: "✓";
  position: absolute;
  left: 12px;
  top: 12px;
  color: #0ea5e9;
  font-weight: 700;
  font-size: 1rem;
}

/* Conversion-first: providers near top */
.providers--prominent {
  margin-top: 12px;
}

.providers--prominent .provider-card {
  border-color: #e2e8f0;
  box-shadow: 0 1px 0 rgba(16,24,40,.04);
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-head h2 {
  margin: 0;
}

.section-actions {
  /* Future filter/sort hooks */
  display: none; /* Hidden until needed */
}

.providers-section{
  background:#fff;
  border:1px solid #eef2f6;
  border-radius:12px;
  padding:16px 16px 8px 16px;
  margin:4px 0 18px 0;
}

/* ===== Provider list/cards ===== */
.provider-list{
  list-style:none; margin:10px 0 10px 0; padding:0; display:grid; gap:12px;
}

/* ~15% tighter vertical padding (was ~14px 16px); switch to flex for vertical centering */
.provider-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  background:#fff;
  border:1px solid var(--ring);
  border-radius:14px;
  padding:12px 14px;               /* tighter */
  box-shadow:0 8px 18px rgba(2,8,23,.05);
  transition:transform .18s ease, box-shadow .18s ease;
}

/* Hover state */
.provider-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
}

/* Visible numeric rank before each card */
.provider-rank {
  flex: 0 0 28px;
  text-align: right;
  font-weight: 700;
  color: #334155;
  font-size: 1.05rem;
  opacity: 0.9;
}

.provider-left{
  display:flex;
  align-items:center;
  gap:14px;
  flex:1;
  min-width:0;
}

.provider-logo{
  flex:0 0 120px; height:120px; border:1px solid var(--ring); border-radius:12px; background:#fff;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}

.provider-logo img{max-width:112px; max-height:112px}

.logo-fallback{
  width:112px; height:112px; display:flex; align-items:center; justify-content:center;
  font-weight:800; color:#fff; background:#1f2a37; border-radius:10px; font-size:2rem;
}

/* Text area */
.provider-main{min-width:0}

.provider-title-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

.provider-name{font-weight:700; font-size:1.5rem; text-decoration:none; color:var(--ink)}

.provider-name:hover{color:var(--brand)}

.provider-bullets{margin:6px 0 0 0; padding-left:18px; color:var(--muted); font-size:.95rem}

.provider-bullets li{margin-bottom:4px}

/* Right column: center the score+CTA vertically and stack */
.provider-cta{
  display:flex;
  flex-direction:column;
  align-items:center;             /* horizontal center */
  justify-content:center;         /* vertical center relative to card */
  gap:10px;
  min-width:120px;
}

/* Score stack with small label */
.score-stack{display:flex; flex-direction:column; align-items:center; gap:4px}

.score-label{font-size:.72rem; color:#475569; letter-spacing:.02em}

/* Badges */
.badge{
  border:1px solid var(--ring);
  border-radius:999px;
  padding:6px 10px;               /* slightly larger for a pill badge feel */
  font-size:.9rem;
  color:#0b1220;
  background:#fff;
  font-weight:700;
}

.badge.featured{background:#f0fdf4; border-color:#bbf7d0; color:#166534}

/* Score visual variants */
.score-outline{background:#fff;}

.badge.score{
  font-size:1.5rem;
  padding:8px 14px;
}

.score-gradient{
  border:1px solid #c7ddfb;
  background: linear-gradient(180deg, var(--badgeStart), var(--badgeEnd));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

/* Visit button */
.btn-primary{
  display:inline-block; padding:10px 14px; border-radius:10px;
  border:1px solid #0284c7; background:#0ea5e9; color:#fff; text-decoration:none; font-weight:700;
  cursor:pointer;
  font-family:inherit;
}

.btn-primary:hover{background:#0284c7}

/* Methodology panel (unchanged but keep here for consistency) */
.methodology-section{
  background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:22px 26px; margin-top:24px; margin-bottom:40px;
}

.methodology-title{font-size:1.25rem; font-weight:700; margin-bottom:8px}

.methodology-intro{font-size:.95rem; color:#475569; margin-bottom:12px}

.methodology-content{font-size:0.9rem; color:#1e293b;}

.methodology-content p{margin:0 0 10px; line-height:1.5;}

.methodology-content p:first-child{font-size:0.95rem; color:#475569; margin-bottom:12px;}

.methodology-content strong{font-weight:600; color:#0f172a; display:block; margin-bottom:2px;}

.methodology-list{list-style:none; padding:0; margin:0 0 12px 0; font-size:.9rem; color:#1e293b}

.methodology-list li{margin-bottom:6px; position:relative; padding-left:22px}

.methodology-list li::before{content:"✔"; position:absolute; left:0; top:0; color:#0ea5e9; font-size:.8rem; line-height:1.2rem}

.methodology-footer{font-size:.85rem; color:#64748b; margin-top:10px; border-top:1px solid #e5e7eb; padding-top:10px}

/* =======================
   MOBILE LAYOUT (industry)
   =======================
   NOTE: Desktop/tablet rules above remain unchanged.
   These overrides apply ONLY on small screens.
*/
@media (max-width: 720px) {
  /* Benefit bullets on mobile */
  .benefit-bullets ul {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  
  .benefit-bullets li {
    padding: 10px 14px;
    padding-left: 28px;
    font-size: 0.9rem;
  }
  
  /* Section wrapper: slightly tighter padding on mobile */
  .providers-section{
    padding: 12px;
    border-radius: 10px;
    margin: 6px 0 16px 0;
  }

  /* Card becomes a single column with right column stacked under text */
  .provider-card{
    flex-direction: column;       /* stack vertically */
    align-items: stretch;
    gap: 12px;
    padding: 12px;                /* compact but comfortable */
  }

  /* Logo + title row stay inline, but with smaller logo box */
  .provider-logo{
    flex: 0 0 52px;
    height: 52px;
    border-radius: 10px;
  }

  .provider-logo img{
    max-width: 48px;
    max-height: 48px;
  }

  .logo-fallback{
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }

  /* Title + bullets spacing */
  .provider-title-row{
    gap: 6px;
  }

  .provider-bullets{
    font-size: .92rem;            /* slightly smaller text on mobile */
    margin-top: 4px;
  }

  .provider-bullets li{
    margin-bottom: 3px;
  }

  /* Right column: place score + CTA side-by-side, full width */
  .provider-cta{
    flex-direction: row;          /* horizontal row */
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;                 /* allow shrink */
    margin-top: 2px;
  }

  /* Score cluster on the left; label stays small */
  .score-stack{
    flex-direction: column;
    align-items: flex-start;      /* left align on mobile */
    gap: 2px;
  }

  .score-label{
    font-size: .7rem;
  }

  .badge.score{
    padding: 5px 9px;             /* compact pill */
    font-size: .88rem;
  }

  /* CTA button grows to a comfy tap target on the right */
  .btn-primary{
    padding: 12px 14px;
    border-radius: 12px;
    font-size: .96rem;
    flex: 0 0 auto;
  }

  /* Divider tighter on mobile */
  hr.section-divider{
    margin: 12px 0 14px 0;
    height: 1px;
  }

  /* Methodology section mobile spacing */
  .methodology-section{
    padding: 18px;
  }

  /* Rank number mobile sizing */
  .provider-rank {
    flex: 0 0 22px;
    font-size: 0.95rem;
  }

  /* Industry header mobile styles */
  .industry-header {
    margin-bottom: 24px;
    padding-bottom: 20px;
  }

  .industry-title {
    font-size: 2rem;
    margin-bottom: 12px;
  }

  .industry-badges {
    gap: 8px;
    margin-bottom: 16px;
  }

  .badge-with-icon {
    font-size: 0.85rem;
    padding: 5px 10px;
  }

  .shield-icon {
    width: 14px;
    height: 14px;
  }

  .industry-subtitle {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  .industry-intro {
    font-size: 0.95rem;
    margin-bottom: 12px;
  }

  .hero-meta {
    flex-direction: column;
    gap: 8px;
    font-size: 0.8rem;
  }
}