/* life360-alternative page-specific CSS - scoped under .life360-page to avoid affecting other pages */
.life360-page .so-intro-section { padding: 3rem 1.25rem; max-width: 1100px; margin: 0 auto; }
.life360-page .so-intro-section h2 { font-size: clamp(1.4rem, 3.6vw, 2rem); margin-bottom: 1.25rem; color: var(--navy); }
.life360-page .so-grid-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.life360-page .so-card { background: #fff; border-radius: 14px; padding: 1.25rem; box-shadow: 0 6px 18px rgba(13,31,60,0.06); border: 1px solid rgba(13,31,60,0.04); }
.life360-page .so-card h3 { margin-bottom: 0.5rem; color: var(--navy); font-size: 1.05rem; }
.life360-page .so-card p { color: #374151; line-height: 1.6; font-size: 0.98rem; }

/* two-column on wider screens */
@media (min-width: 760px) {
  .life360-page .so-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .life360-page .so-intro-section { padding: 4rem 2rem; }
}

/* Differentiator / map background - make more spacious */
.life360-page .so-diff-section { padding: 4rem 1.25rem; }
@media (min-width:760px) { .life360-page .so-diff-section { padding: 5rem 2rem; } }
.life360-page .so-diff-inner { max-width: 980px; margin: 0 auto; text-align: center; }
.life360-page .so-diff-inner .so-section-eyebrow { color: var(--teal); font-weight:700; letter-spacing:0.08em; }
.life360-page .so-diff-inner .so-section-title { font-size: clamp(1.4rem, 3.8vw, 2.25rem); margin-top: 0.5rem; }
.life360-page .so-diff-inner .so-section-sub { margin-top: 1rem; color: #374151; max-width: 760px; margin-left: auto; margin-right: auto; }

/* Comparison section */
.life360-page .so-compare-section { padding: 3rem 1.25rem; max-width:1100px; margin: 0 auto; }
.life360-page .compare-wrapper { background: #fff; border-radius: 12px; padding: 1rem; border: 1px solid rgba(13,31,60,0.06); box-shadow: 0 6px 20px rgba(13,31,60,0.04); }
.life360-page .so-compare-table { width: 100%; overflow: auto; }
.life360-page table.compare { width: 100%; border-collapse: collapse; min-width: 640px; }
.life360-page table.compare thead th { text-align: left; padding: 12px 16px; background: #f7fbf9; color: var(--navy); font-weight:700; border-bottom: 1px solid rgba(13,31,60,0.06); }
.life360-page table.compare tbody td { padding: 12px 16px; border-bottom: 1px solid rgba(13,31,60,0.04); vertical-align: middle; }
.life360-page table.compare tbody tr:last-child td { border-bottom: none; }

/* Small badges / yes indicators */
.life360-page .badge-yes { display: inline-block; background: var(--teal); color: #fff; padding: 6px 10px; border-radius: 999px; font-weight:600; font-size:0.95rem; }
.life360-page .badge-varies { display:inline-block; background: #e6eef8; color: var(--navy); padding: 6px 10px; border-radius: 999px; font-weight:600; font-size:0.95rem; }

/* Mobile: stack comparison into readable rows */
@media (max-width: 640px) {
  .life360-page table.compare { min-width: 0; border: none; }
  .life360-page table.compare thead { display: none; }
  .life360-page table.compare tbody tr { display: block; border: 1px solid rgba(13,31,60,0.06); border-radius: 10px; margin-bottom: 12px; padding: 10px; }
  .life360-page table.compare tbody td { display: block; padding: 6px 0; border: none; }
  .life360-page table.compare tbody td.cap { font-weight:700; color: var(--navy); margin-bottom:6px; }
}

/* CTA polishing */
.life360-page .so-cta-section { padding: 3rem 1.25rem 4.5rem; text-align:center; }
.life360-page .so-cta-inner { max-width:820px; margin:0 auto; background: linear-gradient(180deg, #ffffff, #f8fffb); padding: 2rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(13,31,60,0.06); }
.life360-page .so-cta-inner h2 { margin-bottom: 0.5rem; font-size: 1.6rem; }
.life360-page .so-cta-inner p { margin-bottom: 1rem; color: #374151; }
.life360-page .so-cta-inner .so-btn-primary { font-size: 1.03rem; padding: 12px 24px; border-radius: 10px; }

/* keep footer spacing consistent with page */
.life360-page .so-footer { padding-top: 2rem; }

/* Accessibility focus styles */
.life360-page a:focus, .life360-page button:focus { outline: 3px solid rgba(26,163,122,0.18); outline-offset: 3px; }

/* Minor hero adjustments for stack/spacing when small */
@media (max-width: 480px) {
  .life360-page .so-hero { padding: 2.5rem 1.25rem 3.5rem; min-height: 420px; }
  .life360-page .so-hero h1 { font-size: clamp(2rem, 9vw, 3rem); }
}