/* ===========================
   Responsive Benefits Table — Enhanced CSS
   =========================== */

/* ---------- Base wrapper (compact, legible) ---------- */
.table-2-wrapper{
  font-size:14px;
  line-height:1.25;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------- Exclusivity: only one view at a time ---------- */
/* Default desktop-first */
.table-2{display:block}
.table-2-cards{display:none}

/* Force exclusivity (protect against other styles) */
@media (min-width:769px){
  .table-2{display:block !important}
  .table-2-cards{display:none !important}
}
@media (max-width:768px){
  .table-2{display:none !important}
  .table-2-cards{display:grid !important; grid-template-columns:1fr; gap:12px}
}

/* Print shows table only */
@media print{
  .table-2{display:block !important}
  .table-2-cards{display:none !important}
  .table-2 th,.table-2 td{padding:6px}
  .table-2-wrapper{font-size:12px}
}

/* ---------- Desktop/table styling (compact) ---------- */
.table-2 table{
  border-collapse:collapse;
  width:100%;
  table-layout:fixed;            /* prevents layout shifts from long text */
}
.table-2 th,
.table-2 td{
  padding:8px;
  vertical-align:top;
  word-wrap:break-word;
}
.table-2 thead th h4{
  margin:6px 0 !important;
  font-size:14px !important;     /* minimize fonts without touching inline colors */
}
.table-2 td p{ margin:4px 0; }

/* Tighter left labels without changing inline text */
.table-2 td[align="left"] strong{
  display:block;
  margin-bottom:2px;
}

/* Subtle row separators for readability (keeps your row bg colors) */
.table-2 tbody tr:not([bgcolor]) td{ border-top:1px solid #f3f5fa; }
.table-2 tbody tr[bgcolor] td{ border-top:1px solid rgba(0,0,0,0.03); }

/* Hover highlight (desktop only) */
@media (hover:hover){
  .table-2 tbody tr:hover td{ background:rgba(39,50,116,0.03); }
}

/* Slight overall scale on desktop to minimize fonts while preserving inline styles */
@media (min-width:769px){
  .table-2{
    transform:scale(.96);
    transform-origin:top left;
  }
}

/* Optional: sticky header for long tables (keeps visuals tidy) */
@media (min-width:1025px){
  .table-2 thead th{
    position:sticky;
    top:0;
    z-index:2;
    background:inherit;          /* respects your current background */
  }
}

/* ---------- Mobile benefit-comparison cards ---------- */
@media (max-width:768px){
  /* Card grid container is already turned on in exclusivity block */

  /* Card shell */
  .benefit-card{
    border:1px solid #e4e7ef;
    border-radius:10px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }

  /* Benefit name as header (copied as-is from table cell) */
  .benefit-card__head{
    background:#f6f8fc;
    padding:10px 12px;
    font-weight:700;
    font-size:15px;
  }

  /* All plans for that benefit */
  .benefit-card__body{
    padding:8px 12px;
  }

  /* Each plan row: plan name | value */
  .plan-row{
    display:grid;
    grid-template-columns:minmax(96px,140px) 1fr; /* flexible plan label column */
    gap:8px;
    padding:10px 0;
    border-bottom:1px solid #f0f2f7;
  }
  .plan-row:last-child{ border-bottom:none; }

  .plan-row__plan{
    font-weight:700;
    color:#273274;
  }
  .plan-row__value{
    font-size:13px;
  }

  /* Keep your inline orange notes compact, unchanged */
  .plan-row__value p[style*="color: #ff9800"]{
    line-height:1.2;
    margin-top:2px;
    margin-bottom:0;
  }

  /* Long inline blocks don’t overflow */
  .benefit-card, .plan-row__value, .plan-row__plan{
    overflow-wrap:break-word;
    word-break:break-word;
  }

  /* Focus styles for keyboard users */
  .benefit-card:focus-within{
    outline:2px solid #273274;
    outline-offset:2px;
  }
}

/* ---------- Motion/accessibility polish ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}