/* LoomiTV — plans.html page-specific styles.
   Reuses css/landing.css (.pricing/.toggle-group/.plan-grid/.plan-card/
   .faq-*) and css/why-us.css (.page-hero/.cta-band) wholesale — this file
   only covers what's unique to this page: the toggle-row layout (no
   heading sharing the row here, unlike index.html's #pricing), the
   "what's included" list, the activation steps, and a .support-card
   block copied from css/installation-guide.css's pattern (not linking
   that whole stylesheet just for one component). */

:root{ --maxw:1160px; }

/* This page's toggle-row has only the Solo/Duo/Family toggle in it (no
   heading — that role is already filled by the page-hero above), so
   center it instead of space-between-ing against nothing. */
.pricing .toggle-row{ justify-content:center; }

.included-list{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:14px 32px;
  max-width:900px; margin:0 auto;
}
.included-list li{
  display:flex; align-items:flex-start; gap:10px;
  color:var(--muted); font-size:15px; line-height:1.5; padding:4px 0;
}
.included-list li::before{
  content:'✓'; color:var(--gold); font-weight:700; flex-shrink:0;
}

.activation-steps{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:32px;
}
.activation-step h3{ font-size:19px; margin-bottom:10px; }
.activation-step p{ color:var(--muted); font-size:14.5px; line-height:1.6; }

/* Support card — mirrors css/installation-guide.css's .support-card. */
.support-card{
  display:flex; gap:20px; align-items:flex-start;
  background:linear-gradient(150deg, rgba(227,166,62,0.09), var(--bg-card));
  border:1px solid rgba(227,166,62,0.25); border-radius:16px; padding:32px;
  margin-bottom:40px;
}
.support-icon{
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  background:rgba(227,166,62,0.14); border:1px solid rgba(227,166,62,0.3);
  display:flex; align-items:center; justify-content:center;
}
.support-icon svg{ width:22px; height:22px; stroke:var(--gold); }
.support-body h2{ font-size:20px; margin-bottom:8px; }
.support-body p{ color:var(--muted); font-size:14px; line-height:1.6; margin-bottom:18px; max-width:480px; }
.support-body .btn-trial{ margin-bottom:16px; }
.support-response{ font-size:12.5px; color:var(--muted-2); margin-bottom:0 !important; }
.support-response strong{ color:var(--muted); }

@media (max-width:900px){
  .included-list{ grid-template-columns:1fr; }
  .activation-steps{ grid-template-columns:1fr; gap:28px; }
}

@media (max-width:768px){
  .support-card{ flex-direction:column; padding:20px; gap:14px; }
  .support-body h2{ font-size:18px; }
}