.card-hdr      { background:var(--bg2); border-bottom:1px solid var(--border); padding:.75rem 1.25rem; }
.text-sm       { font-size:.88rem; color:var(--muted); line-height:1.75; margin-bottom:1.25rem; }
.text-pre      { white-space:pre-line; }
.grid-3        { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:1rem; }
.grid-2-cols   { grid-template-columns:repeat(2,1fr); }
.grid-2-cols-centered { grid-template-columns:repeat(2,1fr); max-width:640px; margin:2rem auto 0; }
.process-5     { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-top:3rem; }
.process-cell  { text-align:center; }
.process-emoji { font-size:1.75rem; margin-bottom:.75rem; }

.sel-card-wp      { background:var(--bg2); border:1px solid rgba(0,119,204,.2); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.sel-card-astro   { background:var(--bg2); border:1px solid rgba(45,212,191,.2); border-radius:16px; overflow:hidden; display:flex; flex-direction:column; }
.sel-hdr-wp       { background:rgba(0,119,204,.06); border-bottom:1px solid rgba(0,119,204,.15); padding:1.5rem; }
.sel-hdr-astro    { background:rgba(45,212,191,.05); border-bottom:1px solid rgba(45,212,191,.15); padding:1.5rem; }
.sel-label-wp     { font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent2); margin-bottom:.5rem; }
.sel-label-astro  { font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); margin-bottom:.5rem; }
.sel-h3           { font-size:1.1rem; font-weight:700; color:var(--white); line-height:1.2; }
.sel-body         { padding:1.5rem; flex:1; display:flex; flex-direction:column; }
.sel-body .text-sm { flex:1; }
.sel-body .svc-link { margin-top:auto; }

.check-list       { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1.25rem; }
.check-item       { display:flex; align-items:flex-start; gap:.5rem; font-size:.85rem; color:var(--text); }
.check-arrow-wp   { color:var(--accent); flex-shrink:0; margin-top:.1rem; }
.check-arrow-astro { color:var(--teal); flex-shrink:0; margin-top:.1rem; }

.tech-tags        { display:flex; flex-wrap:wrap; gap:.35rem; }
.tech-tag-wp      { font-size:.72rem; padding:.2rem .6rem; border-radius:5px; background:rgba(0,119,204,.07); border:1px solid rgba(0,119,204,.18); color:var(--accent2); }
.tech-tag-astro   { font-size:.72rem; padding:.2rem .6rem; border-radius:5px; background:rgba(45,212,191,.07); border:1px solid rgba(45,212,191,.18); color:var(--teal); }

.compare-wrap     { margin-top:2rem; background:var(--bg2); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.compare-table    { width:100%; border-collapse:collapse; font-size:.85rem; }
.compare-thead tr { border-bottom:1px solid var(--border); }
.compare-th-label { padding:.875rem 1.25rem; text-align:left; color:var(--muted); font-weight:500; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; }
.compare-th-wp    { padding:.875rem 1rem; text-align:center; color:var(--accent2); font-weight:600; }
.compare-th-astro { padding:.875rem 1rem; text-align:center; color:var(--teal); font-weight:600; }
.compare-td-label { padding:.75rem 1.25rem; color:var(--muted); font-size:.82rem; }
.compare-td-val   { padding:.75rem 1rem; text-align:center; color:var(--text); font-size:.82rem; }
.compare-tr-even  { background:rgba(255,255,255,.01); }
.compare-tr-border { border-bottom:1px solid var(--border); }

.tech-card         { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:.875rem 1rem; }
.tech-card-header  { display:flex; align-items:center; gap:.5rem; margin-bottom:.75rem; }
.tech-card-name    { font-size:.88rem; font-weight:600; color:var(--white); flex:1; }
.tech-card-desc    { font-size:.72rem; color:var(--muted); margin-bottom:.75rem; }
.tech-card-metrics { display:flex; flex-direction:column; gap:.35rem; }
.tech-metric-row   { display:flex; align-items:center; gap:.625rem; }
.tech-metric-lbl   { font-size:.67rem; color:var(--subtle); width:90px; flex-shrink:0; }
.tech-metric-bar   { flex:1; height:3px; background:var(--surface2); border-radius:2px; overflow:hidden; }
.tech-tag          { font-size:.62rem; font-weight:600; padding:.18rem .5rem; border-radius:4px; border:1px solid transparent; }
.tech-tag-accent   { background:rgba(77,163,232,.1); color:var(--accent2); border-color:rgba(77,163,232,.2); }
.tech-tag-teal     { background:rgba(45,212,191,.1); color:var(--teal); border-color:rgba(45,212,191,.2); }
.tech-metric-fill  { height:100%; border-radius:2px; }
.tech-metric-val   { font-size:.65rem; font-weight:600; width:28px; text-align:right; }
.tech-metric-fill.tech-tone-green { background:var(--green); }
.tech-metric-fill.tech-tone-yellow { background:var(--yellow); }
.tech-metric-fill.tech-tone-red { background:var(--red); }
.tech-metric-val.tech-tone-green { color:var(--green); }
.tech-metric-val.tech-tone-yellow { color:var(--yellow); }
.tech-metric-val.tech-tone-red { color:var(--red); }
.tech-w-10         { width:10%; }
.tech-w-70         { width:70%; }
.tech-w-75         { width:75%; }
.tech-w-95         { width:95%; }
.tech-w-99         { width:99%; }

.sel-card-link     { display:block; text-decoration:none; }

@media (max-width: 768px) {
  .process-5 { grid-template-columns:repeat(2,1fr); gap:1.5rem; }

  .compare-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .compare-table { min-width:520px; font-size:.78rem; }
  .compare-th-label,
  .compare-td-label { padding:.65rem .75rem; }
  .compare-th-wp,
  .compare-th-astro,
  .compare-td-val { padding:.65rem .5rem; }

  .tech-card { padding:.75rem; }
  .tech-metric-lbl { width:75px; font-size:.62rem; }
  .sel-card-wp,
  .sel-card-astro { border-radius:12px; }

  .features-grid { grid-template-columns:1fr 1fr; }

  .grid-3,
  .grid-3-gap,
  .sel-card-wp,
  .sel-card-astro { width:100%; }

  div.grid-3 { grid-template-columns:1fr !important; }
  div.grid-3-gap { grid-template-columns:1fr !important; }
}

@media (max-width: 480px) {
  .process-5 { grid-template-columns:1fr; }
  .features-grid { grid-template-columns:1fr; }
  .compare-table { font-size:.72rem; }
  .sel-h3 { font-size:1rem; }
}
