/* our_products.css */

/* Theme vars (fallbacks) */
:root{
  --am-accent: #f09821;
  --am-bg: #07090d;
  --am-text: rgba(255,255,255,.92);
  --am-muted: rgba(255,255,255,.62);
  --am-border: rgba(255,255,255,.10);

  --fpsp-accent: var(--am-accent);
  --fpsp-bg: var(--am-bg);
  --fpsp-text: var(--am-text);
  --fpsp-muted: var(--am-muted);
  --fpsp-border: var(--am-border);
}

/* Safety: never show config */
.fpsp-config{ display:none !important; }

/* Page container */
.fpsp{ color: var(--fpsp-text); }
.fpsp-container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 18px 80px;
}

/* Sections */
.fpsp-section{ margin-top: 46px; }
.fpsp-sectionHeader{ margin-bottom: 18px; }
.fpsp-center{ text-align:center; }

.fpsp-h2{
  margin: 0;
  font-size: 30px;
  letter-spacing: .2px;
}
.fpsp-p{
  margin: 6px 0 0;
  color: var(--fpsp-muted);
  font-size: 14px;
}
.fpsp-accent{ color: var(--fpsp-accent); }

/* Hero layout */
.fpsp-hero{ margin-top: 6px; }

.fpsp-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(240,152,33,.25);
  background: rgba(240,152,33,.10);
  color: var(--fpsp-text);
  font-weight: 800;
  font-size: 13px;
}

.fpsp-title{
  margin: 0;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: .2px;
}
.fpsp-subtitle{
  margin: 10px 0 0;
  color: var(--fpsp-muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

.fpsp-blob{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 380px at 0% 0%, rgba(240,152,33,.16), transparent 60%),
    rgba(255,255,255,.02);
  box-shadow: 0 30px 80px rgba(0,0,0,.38);
}

/* Buttons */
.fpsp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  width: 100%;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  font-weight: 1100;
  cursor: pointer;
  text-decoration:none;
  transition: 140ms ease;
}
.fpsp-btn--primary{
  background: linear-gradient(135deg, var(--fpsp-accent), #d97f12);
  color: #0b0b0f;
  box-shadow: 0 6px 0 rgba(140,80,8,.85);
  margin-bottom: 12px;
}
.fpsp-btn--primary:hover{ transform: translateY(-1px); }
.fpsp-btn--primary.is-disabled{
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}
.fpsp-btn--ghost{
  background: rgba(255,255,255,.03);
  color: var(--fpsp-text);
}

/* PRICING cards (base) */
.fpsp-grid3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
.fpsp-priceCard{
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  box-shadow: 0 30px 80px rgba(0,0,0,.32);
  padding: 16px;
  overflow: hidden;
}

/* FAQ */
.fpsp-faq{
  display: grid;
  gap: 10px;
  max-width: 860px;
  margin: 0 auto;
}
.fpsp-faqItem{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  padding: 12px 14px;
}
.fpsp-faqItem summary{
  cursor: pointer;
  font-weight: 1100;

  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.fpsp-faqItem summary::-webkit-details-marker{ display:none; }
.fpsp-faqBody{
  margin-top: 10px;
  color: rgba(255,255,255,.84);
  font-weight: 800;
  line-height: 1.6;
  font-size: 14px;
}

/* Responsive (base) */
@media (max-width: 1100px){
  .fpsp-grid3{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .fpsp-title{ font-size: 32px; }
}

/* =========================================================
   Our Products page only (portrait covers 400x600 = 2:3)
   Scope: only affects markup wrapped in .am-products
   ========================================================= */

.am-products .fpsp-grid3{
  align-items: stretch;
}

/* Keep 3-col layout on desktop, 2-col on tablet, 1-col on mobile */
@media (max-width: 1100px){
  .am-products .fpsp-grid3{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 640px){
  .am-products .fpsp-grid3{
    grid-template-columns: 1fr;
  }
}

/* Outer card becomes a shell (no padding) */
.am-products .fpsp-priceCard{
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

/* Portrait media container (2:3), with the “real” card look */
.am-products .am-cardMedia{
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  background-size: cover;
  background-position: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.32);
}

/* Bottom fade for readability */
.am-products .am-cardMedia::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 38%,
    rgba(7,9,13,.72) 72%,
    rgba(7,9,13,.92) 100%
  );
  pointer-events:none;
}

/* Whole-card clickable area (behind content) */
.am-products .am-cardHit{
  position:absolute;
  inset:0;
  z-index:0;
  display:block;
  text-decoration:none;
}

/* Content layer */
.am-products .am-cardInner{
  position:absolute;
  inset:0;
  z-index:1;
  padding: 16px;
  display:flex;
  flex-direction:column;
}

/* Top row (badge) */
.am-products .am-cardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

/* Bottom stack */
.am-products .am-cardBottom{
  margin-top: auto;
}

/* Title clamp so cards stay consistent */
.am-products .am-cardTitle{
  margin: 0;
  font-weight: 1100;
  font-size: 18px;
  line-height: 1.18;
  letter-spacing: .2px;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.am-products .am-cardStart{
  margin-top: 8px;
  color: var(--fpsp-muted);
  font-weight: 900;
  font-size: 13px;
}

/* Price */
.am-products .am-cardPrice{
  margin-top: 4px;
  font-weight: 1200;
  font-size: 22px;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* Tags / status row */
.am-products .am-cardTags{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items:center;
  color: rgba(255,255,255,.86);
  font-weight: 900;
  font-size: 13px;
}
.am-products .am-cardTag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.am-products .am-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display:inline-block;
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
}
.am-products .am-dot--live{ background: #2ecc71; }
.am-products .am-dot--testing{ background: #f1c40f; }
.am-products .am-dot--soon{ background: #bdc3c7; }

/* CTA */
.am-products .am-cardCta{
  margin-top: 14px;
}
.am-products .fpsp-btn--primary{
  margin-bottom: 0; /* on cards we don't want the extra gap */
}