/*
 * Landing shell: features, pricing and footer sections.
 *
 * Extracted from an inline <style> element in index.html so the site-wide
 * CSP (`style-src 'self'` in netlify.toml) does not block it: a <style>
 * ELEMENT is not covered by that directive, a same-origin stylesheet is.
 *
 * Companion to landing-shell.css (base reset, nav, hero).
 */
/* Features */
.ssg-section {
  max-width: 72rem;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.ssg-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.ssg-card {
  border: 1px solid #1e293b;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 1rem;
  padding: 1.75rem;
}
.ssg-card-icon {
  display: inline-flex;
  padding: 0.625rem;
  border-radius: 0.75rem;
  margin-bottom: 1.25rem;
}
.ssg-card-icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ssg-icon-emerald {
  background: rgba(6, 78, 59, 0.6);
  border: 1px solid rgba(6, 78, 59, 0.5);
}
.ssg-icon-emerald svg {
  stroke: #34d399;
}
.ssg-icon-indigo {
  background: rgba(30, 27, 75, 0.6);
  border: 1px solid rgba(30, 27, 75, 0.5);
}
.ssg-icon-indigo svg {
  stroke: #818cf8;
}
.ssg-icon-rose {
  background: rgba(76, 5, 25, 0.6);
  border: 1px solid rgba(76, 5, 25, 0.5);
}
.ssg-icon-rose svg {
  stroke: #fb7185;
}
.ssg-card h2 {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}
.ssg-card p {
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.7;
}

/* Pricing */
.ssg-pricing-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.ssg-pricing-header h2 {
  font-size: 1.875rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 0.75rem;
}
.ssg-pricing-header p {
  color: #94a3b8;
}
.ssg-grid-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.ssg-price-card {
  border: 1px solid #1e293b;
  background: rgba(15, 23, 42, 0.5);
  border-radius: 1rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.ssg-price-card.popular {
  border-color: rgba(180, 83, 9, 0.5);
  background: rgba(69, 26, 3, 0.2);
  position: relative;
}
.ssg-price-card.family {
  border-color: rgba(67, 56, 202, 0.5);
  background: rgba(30, 27, 75, 0.2);
}
.ssg-popular-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.125rem 0.5rem;
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 700;
  color: #fbbf24;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ssg-plan-name {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}
.ssg-plan-name.free {
  color: #94a3b8;
}
.ssg-plan-name.pro {
  color: #fbbf24;
}
.ssg-plan-name.family {
  color: #818cf8;
}
.ssg-plan-price {
  font-size: 1.875rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 0;
}
.ssg-plan-price span {
  font-size: 1rem;
  font-weight: 600;
  color: #94a3b8;
}
.ssg-plan-note {
  font-size: 0.75rem;
  margin-bottom: 1.25rem;
}
.ssg-plan-note.free {
  color: #94a3b8;
}
.ssg-plan-note.pro {
  color: #fbbf24;
}
.ssg-plan-note.family {
  color: #818cf8;
}
.ssg-feature-list {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
  flex: 1;
}
.ssg-feature-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #cbd5e1;
  padding: 0.25rem 0;
}
.ssg-feature-list li svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  fill: none;
  stroke-width: 2;
}
.ssg-feature-list.free li {
  color: #94a3b8;
}
.ssg-feature-list.free li svg {
  stroke: #475569;
}
.ssg-feature-list.pro li svg {
  stroke: #f59e0b;
}
.ssg-feature-list.family li svg {
  stroke: #6366f1;
}
.ssg-plan-btn {
  /* Flex + min-height keeps the plan CTAs at the 44px mobile tap-target
     floor (.claude/rules/mobile-first.md) without changing their padding. */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  width: 100%;
  padding: 0.625rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.ssg-plan-btn.free {
  border: 1px solid #334155;
  color: #cbd5e1;
}
.ssg-plan-btn.pro {
  background: #f59e0b;
  color: #0c0a09;
  box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.2);
}
.ssg-plan-btn.family {
  border: 1px solid #4338ca;
  color: #a5b4fc;
}

/* Footer */
.ssg-footer {
  border-top: 1px solid rgba(30, 41, 59, 0.6);
  background: rgba(2, 6, 23, 0.8);
  padding: 3rem 1.5rem 1.5rem;
}
.ssg-footer-inner {
  max-width: 72rem;
  margin: 0 auto;
}
.ssg-footer-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 2.5rem;
}
@media (min-width: 640px) {
  .ssg-footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.ssg-footer h3 {
  font-size: 0.7rem;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.ssg-footer ul {
  list-style: none;
  padding: 0;
}
.ssg-footer ul li {
  margin-bottom: 0.625rem;
}
.ssg-footer ul li a {
  font-size: 0.875rem;
  color: #94a3b8;
  text-decoration: none;
}
.ssg-footer-bottom {
  border-top: 1px solid #1e293b;
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.ssg-footer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.ssg-footer-logo-icon {
  width: 1.5rem;
  height: 1.5rem;
  background: linear-gradient(135deg, #fbbf24, #f97316);
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ssg-footer-logo-icon svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ssg-footer-logo span {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
}
.ssg-footer-copy {
  font-size: 0.75rem;
  color: #475569;
}