/* Marketing surface (matches index.html's family: slate text, 1px borders,
     soft shadow, brass CTA) — see docs/design-style-guide.md §1 */
  :root {
    --primary: #212529;
    --dark: #111827;
    --dark-muted: #4b5563;
    --bg-light: #f8fafc;
    --border-color: #e2e8f0;
    --card-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.03), 0 8px 10px -6px rgba(0, 0, 0, 0.03);
  }
  body { color: var(--dark); background: #ffffff; line-height: 1.6; }

  .plans-header { background: #212529; }

  .btn-primary-clip {
    background-color: var(--brass); color: #111827 !important;
    border: 1px solid var(--brass); font-weight: 700;
    padding: 8px 20px; border-radius: 6px; transition: all 0.2s ease;
  }
  .btn-primary-clip:hover { background-color: var(--brass-hover); border-color: var(--brass-hover); }
  .btn-secondary-clip {
    background-color: #ffffff; color: var(--dark-muted) !important;
    border: 1px solid var(--border-color); font-weight: 600;
    padding: 8px 20px; border-radius: 6px; transition: all 0.2s ease;
  }
  .btn-secondary-clip:hover { background-color: var(--bg-light); color: var(--dark) !important; border-color: var(--dark-muted); }

  /* The comparison table */
  .plans-table-wrap {
    border: 1px solid var(--border-color); border-radius: 12px;
    box-shadow: var(--card-shadow); overflow-x: auto; background: #fff;
  }
  .plans-table { width: 100%; min-width: 660px; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }
  .plans-table th, .plans-table td { padding: 12px 16px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
  .plans-table tbody tr:last-child td { border-bottom: none; }
  .plans-table td:not(:first-child), .plans-table th:not(:first-child) { text-align: center; width: 19%; }
  .plans-table td:first-child { color: var(--dark); }
  .feature-hint { color: #94a3b8; font-size: 0.78rem; display: block; line-height: 1.35; }
  .feature-info-btn {
    border: 0; background: none; padding: 0 2px; margin-left: 2px;
    color: #94a3b8; vertical-align: text-top; line-height: 1; cursor: pointer;
  }
  .feature-info-btn:hover, .feature-info-btn:focus-visible { color: var(--dark); }
  #featureInfoBody p { margin-bottom: 0.6rem; }
  #featureInfoBody p:last-child { margin-bottom: 0; }
  #featureInfoUses h6 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.6px; color: #64748b; font-weight: 700; margin: 0.9rem 0 0.4rem; }

  /* Plan header cells */
  .plan-head { background: var(--bg-light); border-bottom: 2px solid var(--border-color) !important; }
  .plan-name { font-weight: 800; font-size: 1.05rem; color: var(--dark); letter-spacing: -0.01em; }
  .plan-price { font-weight: 800; font-size: 1.5rem; color: var(--dark); }
  .plan-price small { font-weight: 500; font-size: 0.78rem; color: #64748b; }

  /* Highlighted (Pro) column */
  .col-hot { background: #fffdf5; box-shadow: inset 2px 0 0 var(--brass), inset -2px 0 0 var(--brass); }
  th.col-hot { box-shadow: inset 2px 2px 0 var(--brass), inset -2px 0 0 var(--brass); border-radius: 8px 8px 0 0; }
  tr:last-child .col-hot { box-shadow: inset 2px 0 0 var(--brass), inset -2px -2px 0 var(--brass); }
  .hot-chip {
    display: inline-block; background: var(--brass); color: #111827;
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 2px 10px; border-radius: 20px; margin-bottom: 6px;
  }

  /* Section subhead rows */
  .section-row td {
    background: var(--bg-light); color: #64748b; font-size: 0.72rem;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; padding: 8px 16px;
  }

  .check-cell svg { color: var(--brass); }
  .dash-cell { color: #cbd5e1; font-weight: 600; }
  .your-plan-chip {
    display: inline-block; border: 1px solid var(--border-color); color: #64748b;
    font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; padding: 2px 10px; border-radius: 20px; margin-top: 6px;
  }

  .enterprise-band {
    border: 1px solid var(--border-color); border-radius: 12px;
    background: var(--bg-light); box-shadow: var(--card-shadow);
  }