/* My Palette for Flaticon -- marketing website
   Design tokens mirror src/shared/theme.css from the extension itself, so the site and the
   product it's selling look like one thing. */
:root {
  --fpm-accent: #12a17d;
  --fpm-accent-dark: #0c7f62;
  --fpm-accent-light: #e6f7f2;
  --fpm-text: #1c2733;
  --fpm-text-muted: #6b7785;
  --fpm-border: #e1e6ea;
  --fpm-bg: #ffffff;
  --fpm-bg-soft: #f7f9fa;
  --fpm-radius: 14px;
  --fpm-radius-sm: 8px;
  --fpm-shadow: 0 12px 32px rgba(18, 30, 40, 0.12);
  --fpm-font: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
}

/* Re-tint Bootstrap's own CSS variables -- see the extension's popup.css/dashboard.css for the
   full explanation of why .btn-primary needs its own component-scoped variables redeclared. */
:root {
  --bs-primary: var(--fpm-accent);
  --bs-primary-rgb: 18, 161, 125;
  --bs-link-color: var(--fpm-accent-dark);
  --bs-link-color-rgb: 12, 127, 98;
  --bs-link-hover-color: var(--fpm-accent-dark);
  --bs-body-font-family: var(--fpm-font);
  --bs-border-radius: var(--fpm-radius-sm);
}

.btn-primary {
  --bs-btn-bg: var(--fpm-accent);
  --bs-btn-border-color: var(--fpm-accent);
  --bs-btn-hover-bg: var(--fpm-accent-dark);
  --bs-btn-hover-border-color: var(--fpm-accent-dark);
  --bs-btn-active-bg: var(--fpm-accent-dark);
  --bs-btn-active-border-color: var(--fpm-accent-dark);
  --bs-btn-focus-shadow-rgb: 18, 161, 125;
}

.btn-outline-primary {
  --bs-btn-color: var(--fpm-accent-dark);
  --bs-btn-border-color: var(--fpm-accent);
  --bs-btn-hover-bg: var(--fpm-accent);
  --bs-btn-hover-border-color: var(--fpm-accent);
  --bs-btn-active-bg: var(--fpm-accent-dark);
  --bs-btn-active-border-color: var(--fpm-accent-dark);
}

body {
  font-family: var(--fpm-font);
  color: var(--fpm-text);
  background: var(--fpm-bg);
}

a {
  color: var(--fpm-accent-dark);
}

/* --- Navbar --- */
.fpm-navbar {
  background: #fff;
  border-bottom: 1px solid var(--fpm-border);
}

.fpm-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  color: var(--fpm-text);
}

.fpm-navbar .navbar-brand img {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.fpm-navbar .nav-link {
  font-weight: 600;
  color: var(--fpm-text-muted);
}

.fpm-navbar .nav-link.active,
.fpm-navbar .nav-link:hover {
  color: var(--fpm-accent-dark);
}

.fpm-store-btn[disabled],
.fpm-store-btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  pointer-events: auto;
}

/* --- Hero --- */
.fpm-hero {
  background: linear-gradient(180deg, var(--fpm-accent-light) 0%, #ffffff 65%);
  padding: 64px 0 48px;
}

.fpm-hero h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.fpm-hero .lead {
  color: var(--fpm-text-muted);
  font-size: 1.15rem;
}

.fpm-badge-soft {
  background: var(--fpm-accent-light);
  color: var(--fpm-accent-dark);
  font-weight: 700;
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fpm-hero-shot {
  border-radius: var(--fpm-radius);
  box-shadow: var(--fpm-shadow);
  border: 1px solid var(--fpm-border);
  width: 100%;
}

/* --- Sections --- */
.fpm-section {
  padding: 64px 0;
}

.fpm-section-title {
  font-weight: 800;
  letter-spacing: -0.01em;
}

.fpm-section-lead {
  color: var(--fpm-text-muted);
  max-width: 640px;
}

.fpm-feature-card {
  border: 1px solid var(--fpm-border);
  border-radius: var(--fpm-radius);
  padding: 24px;
  height: 100%;
  background: #fff;
}

.fpm-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--fpm-accent-light);
  color: var(--fpm-accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin-bottom: 14px;
}

.fpm-feature-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
}

.fpm-feature-card p {
  color: var(--fpm-text-muted);
  font-size: 0.92rem;
  margin-bottom: 0;
}

.fpm-how-step {
  display: flex;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--fpm-border);
}

.fpm-how-step:last-child {
  border-bottom: none;
}

.fpm-how-step .num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fpm-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.fpm-how-step h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.fpm-how-step p {
  color: var(--fpm-text-muted);
  margin-bottom: 0;
  font-size: 0.92rem;
}

.fpm-shot {
  border-radius: var(--fpm-radius-sm);
  border: 1px solid var(--fpm-border);
  box-shadow: 0 6px 18px rgba(18, 30, 40, 0.08);
  width: 100%;
  cursor: zoom-in;
}

.fpm-bg-soft {
  background: var(--fpm-bg-soft);
}

.fpm-contact-card {
  border: 1px solid var(--fpm-border);
  border-radius: var(--fpm-radius);
  padding: 28px;
  background: #fff;
  height: 100%;
}

.fpm-contact-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--fpm-accent-light);
  color: var(--fpm-accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 14px;
}

/* --- Policy page prose --- */
.fpm-policy h2 {
  font-size: 1.25rem;
  font-weight: 800;
  margin-top: 2.2rem;
}

.fpm-policy table {
  font-size: 0.9rem;
}

.fpm-policy .table thead th {
  background: var(--fpm-bg-soft);
}

/* --- Footer --- */
.fpm-footer {
  border-top: 1px solid var(--fpm-border);
  padding: 32px 0;
  color: var(--fpm-text-muted);
  font-size: 0.85rem;
}

.fpm-footer a {
  color: var(--fpm-text-muted);
  text-decoration: none;
}

.fpm-footer a:hover {
  color: var(--fpm-accent-dark);
}

.fpm-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  justify-content: center;
}

.fpm-footer-sep {
  opacity: 0.5;
}

.fpm-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--fpm-text-muted);
}