/* ============================
   True Wags — Comparison block
   Brand tokens + desktop 3-col
   ============================ */

.compare-tw{
  --c-bg: var(--muted);
  --c-panel: var(--card-bg);
  --c-divider: var(--border);
  --c-text: var(--text-base);
  --c-muted: var(--text-secondary);
  --c-accent: var(--primary-color);   /* purple ticks */
  --c-badge-bg: color-mix(in srgb, var(--accent) 12%, #fff);

  --c-off-fill:#fff;                  /* muted tick */
  --c-off-stroke: var(--border);
  --c-off-check: #cbd5e1;

  background: var(--c-bg);
  color: var(--c-text);
  padding: clamp(28px, 6vw, 56px) 0;
}
.compare-tw .hd-2{ color: var(--primary); text-align:center; }

/* ---------- icons ---------- */
.icon{ width:24px; height:24px; color: var(--primary); opacity:.9; }
.feature[open] .icon--chev{ transform: rotate(180deg); transition:.2s; }

/* ---------- ticks (SVG data URIs) ---------- */
.tick{ width:28px; height:28px; display:inline-block; }
.tick--on{
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14' cy='14' r='14' fill='%236c5ce7'/%3E%3Cpath d='M8.5 14.8l3.3 3.3 7.7-7.7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
.tick--off{
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='14' cy='14' r='13' fill='white' stroke='%23E5E7EB' stroke-width='2'/%3E%3Cpath d='M8.5 14.8l3.3 3.3 7.7-7.7' fill='none' stroke='%23CBD5E1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:contain;
  opacity:.95;
}

/* ========== MOBILE (default) ========== */
.compare-m{ display:block; }
.compare-d{ display:none; }

.compare-m__head{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:center;
  margin:10px 0 8px;
}
.logo-card{
  background: var(--c-panel);
  border: 1px solid var(--c-divider);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  min-height: 120px;
  display:grid; place-items:center; overflow:hidden;
}
.logo-card img{ width:82%; height:auto; display:block; }
.mhead-title{
  text-align:center; line-height:1.25;
  font-size: clamp(1.1rem, 4.6vw, 1.5rem);
  color: var(--primary);
}

/* List */
.compare-m__list{ margin-top:6px; border-top:1px solid var(--c-divider); }
.feature{ border-bottom:1px solid var(--c-divider); padding-bottom:10px; }
.feature__summary{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:16px 4px 12px; cursor:pointer; font-weight:700;
  color: var(--primary); font-size: clamp(1.02rem, 4.2vw, 1.2rem);
}
.feature__summary::-webkit-details-marker{ display:none; }
.feature__summary:focus-visible{
  outline:3px solid color-mix(in srgb, var(--primary-color) 35%, white);
  outline-offset:2px; border-radius:12px;
}
.feature__content{ color: var(--c-muted); padding: 0 2px 10px; font-size:.98rem; line-height:1.55; }

/* Ticks row */
.ticks-row{
  display:grid; grid-template-columns:1fr auto; gap:16px; align-items:center;
  padding:8px 0 10px;
}
.ticks-row__col{ display:flex; align-items:center; min-height:44px; }
.ticks-row__col--brand{
  background: var(--c-panel);
  border: 1px solid var(--c-divider);
  border-radius: 12px;
  padding: 8px 14px;
  box-shadow: var(--shadow-sm);
}
.ticks-row__col--trad{ justify-content:flex-end; }

/* ========== DESKTOP (>=900px) ========== */
@media (min-width:900px){
  .compare-m{ display:none; }
  .compare-d{ display:block; }

  .compare-d__grid{
    display:grid;
    grid-template-columns: 1.2fr .8fr .8fr;  /* features | True Wags | Traditional */
    gap: var(--gap);
    align-items:start;
  }

  /* left: features */
  .compare-d__features{ border-top:1px solid var(--c-divider); }
  .compare-d__features .feature{ border-bottom:1px solid var(--c-divider); }
  .compare-d__features .feature__summary{
    display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    padding:18px 0; cursor:pointer; font-weight:700; color: var(--c-text);
    font-size:1.05rem;
  }

  /* middle/right: cards with vertical ticks */
  .compare-d__col{
    background: var(--c-panel);
    border: 1px solid var(--c-divider);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 18px;
    text-align:center;
  }
  .compare-d__label{ margin:0 0 1rem; font-weight:700; color: var(--c-text); opacity:.9; }

  .brand{ display:flex; justify-content:center; margin-bottom:1rem; }
  .brand__badge{
    display:inline-block; padding:.5rem .75rem; border-radius:999px;
    background: var(--c-badge-bg);
    border:1px solid var(--c-divider);
    color: var(--primary);
    font-size:.78rem; font-weight:700; letter-spacing:.02em;
    box-shadow: var(--shadow-sm);
  }

  .ticks-v{
    list-style:none; margin:0; padding:0;
    display:grid; grid-template-rows: repeat(7, 44px); /* 7 features */
    gap: clamp(10px, 2vw, 14px);
    place-items:center;
  }
}