/* =========================================================
   TemplateCat - home.css (CLEAN / DEDUPED)
   - Hero layout + quick facts card
   - Packs grid/cards
   - Compare table wrap + mobile compare helpers
   - Checkout micro band
   - FAQ boxed
   - Lightbox (ONE set)
   ========================================================= */

/* -------------------------
   HERO
   ------------------------- */
.hero{
  padding: 42px 0 26px 0;
}

/* Ensure the right column can actually expand */
.hero-grid > * { min-width: 0; }

.hero-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.home-text {
    text-align: center;
}

.kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 13px;
  color: rgba(0,0,0,.70);
  margin-bottom: 10px;
}
.kicker .dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.18);
  animation: pulse 2.2s infinite;
}

@keyframes pulse{
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.35); }
  70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.hero h1{
  margin: 0;
  font-size: clamp(28px, 5.2vw, 50px);
  letter-spacing: -0.04em;
}

.hero-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}

/* The block that contains Stripe micro + fineprint */
.hero-proof{
  margin-top: 14px;
}

/* Stripe badge = plain micro text (no background, no padding) */
.stripe-badge{
  display: block;
  margin: 10px 0 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 9px;
  line-height: 1.35;
  text-align: left;
  color: #111;
}
.stripe-badge strong{ color:#111; }

/* Fineprint spacing so it’s not “stuck” */
.fineprint{
  margin-top: 14px;
  font-size: 10px;
  color: rgba(0,0,0,.72);
  max-width: 62ch;
}

/* Hero grid: two columns on desktop */
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}

.hero-grid .checkout-micro{
  grid-column: 1 / -1; /* span both columns */
  width: 100%;
  margin-top: 10px;
}

/* Shared card used by hero quick-facts + final CTA */
.hero-card{
  border-radius: var(--radius2);
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Quick facts card */
.quick-facts{
  padding: 18px;
}

.qf-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.qf-head strong{
  font-size: 14px;
  color: rgba(0,0,0,.86);
}

.qf-body{
  display: grid;
  gap: 10px;
}

.qf-body .stat{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.04);
}

.qf-body .stat span{
  color: rgba(0,0,0,.62);
  font-weight: 700;
  font-size: 13px;
  text-align: left;
}

.qf-body .stat b{
  color: rgba(0,0,0,.86);
  font-weight: 900;
  font-size: 13px;
  text-align: right;
}

/* Final CTA hero-card (Ready to grab a pack?) */
.hero-card-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.band .hero-card .hero-actions{
  margin-top: 14px;
}

/* -------------------------
   PACKS GRID + CARDS
   ------------------------- */
.grid-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 14px;
}

.pack-card{
  border-radius: var(--radius2);
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pack-card .thumb{
  border-bottom: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
}

.pack-card .thumb img{
  width: 100%;
  height: auto;
  display: block;
}

.pack-card .card-body{
  padding: 16px;
}

.pack-card h3{
  margin: 0 0 8px 0;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.pack-card .desc{
  margin: 0 0 12px 0;
  font-size: 14px;
  color: rgba(0,0,0,.70);
}

.tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.tag{
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.03);
  font-size: 12px;
  font-weight: 800;
  color: rgba(0,0,0,.72);
}

.card-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* -------------------------
   CHECKOUT MICRO BAND
   ------------------------- */
.checkout-micro{
  padding: 16px 0;
}

.checkout-micro-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 18px;
  padding: 16px 18px;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 14px 40px rgba(0,0,0,0.10);
}

.checkout-micro-left{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}

.checkout-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(34,197,94,.85);
  box-shadow: 0 0 0 4px rgba(34,197,94,.15);
}

.checkout-sub{
  display: block;
  font-size: 13px;
  color: rgba(0,0,0,.55);
  font-weight: 700;
  margin-top: 2px;
}

.checkout-micro-right{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.checkout-chip{
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(0,0,0,.03);
  font-size: 12px;
  font-weight: 900;
  color: rgba(0,0,0,.70);
}

/* -------------------------
   COMPARE (centered + styled wrapper)
   IMPORTANT: your HTML uses .table-wrap (not .compare-wrap)
   ------------------------- */
.compare{ background: transparent; }

/* center just this section's content without affecting other sections */
.section.compare .container{
  text-align: center;
}

/* keep headings + note aligned normally and capped */
.section.compare .section-head,
.section.compare .compare-note{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Base (desktop first) */
.section.compare .table-wrap{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  overflow: hidden; /* no horizontal scroll on desktop */
}

.section.compare .compare-table{
  width: 100%;
  border-collapse: collapse;
}

/* Mobile only */
@media (max-width: 920px){

  .section.compare .table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .section.compare .compare-table{
    min-width: 760px;   /* forces horizontal scroll */
    width: 760px;
  }
  
  .hero-grid .checkout-micro {
      margin-top: 15px;
  }

}



.compare-table thead{
  background: rgba(0,0,0,.02);
}

.compare-table th,
.compare-table td{
  padding: 18px 20px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-size: 14px;
}

.compare-table th{
  font-weight: 800;
}

.compare-table thead th{
  font-size: 15px;
}

.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td{
  border-bottom: none;
}

.compare-table td:not(:first-child),
.compare-table th:not(:first-child){
  border-left: 1px solid rgba(0,0,0,.06);
}

/* Pack header styling */
.pack-col{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pack-col strong{
  font-size: 15px;
}

.pack-col span{
  font-size: 13px;
  color: rgba(0,0,0,.55);
}

.price{
  font-weight: 900;
  color: rgba(0,0,0,.86);
}

/* Highlight Pack #3 column subtly */
.compare-table td:nth-child(4),
.compare-table th:nth-child(4){
  background: rgba(0,0,0,.02);
}

.compare-note{
  margin-top: 18px;
  font-size: 13px;
  color: rgba(0,0,0,.60);
}

/* -------------------------
   FAQ (boxed cards)
   ------------------------- */
.faq{
  display:grid;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}

.faq details{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 50px rgba(0,0,0,.08);
  padding: 14px 16px;
}

.faq summary{
  cursor: pointer;
  font-weight: 800;
  color: rgba(0,0,0,.88);
  list-style: none;
}
.faq summary::-webkit-details-marker{ display:none; }

.faq summary::after{
  content: "＋";
  float: right;
  font-weight: 900;
  opacity: .6;
}
.faq details[open] summary::after{
  content: "—";
  opacity: .6;
}

.faq details p{
  margin: 10px 0 0 0;
  color: var(--muted);
  line-height: 1.6;
}

body.lb-lock{ overflow: hidden; }

/* -------------------------
   RESPONSIVE
   ------------------------- */
@media (max-width: 980px){
  .grid-3{ grid-template-columns: 1fr; }
}

@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero{ padding-top: 34px; }

  .checkout-micro-inner{
    flex-direction: column;
    align-items: flex-start;
  }
  .checkout-micro-right{
    justify-content: flex-start;
  }
}

@media (max-width: 480px){
  .hero-actions{ width: 100%; }
  .hero-actions .btn{ width: 100%; }
}

/* FINAL CTA FIX */
.final-cta{
  padding: 48px 0;
}

.final-cta-card{
  max-width: 900px;
  margin: 0 auto;
}

.final-cta-card .hero-card-body{
  padding: 28px 18px;
}

.final-cta-card .lead{
  margin: 0 0 18px 0;
  color: var(--muted);
  max-width: 70ch;
}

.kicker-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(34,197,94,.85);
  box-shadow: 0 0 0 4px rgba(34,197,94,.15);
  flex-shrink: 0;
}

#packs .section-title {
  display: flex;
  flex-direction: column;
  align-items: left;
  text-align: left;
}

#packs .section-title p {
  margin-left: auto;
  margin-right: auto;
}

.final-cta-card{
  border-radius: 24px;
  width: 100%;
}

.band.final-cta{
  padding: 60px 0;
}

/* ==============================
   FULL-WIDTH: FAQ + FINAL CTA
   ============================== */
#faq .container,
.band.final-cta .container{
  max-width: 1200px;
  width: 100%;
}

#faq .faq{
  width: 100%;
  max-width: none !important;
  margin: 0;
}

.band.final-cta .final-cta-card{
  display: block;
  width: 100%;
  max-width: none !important;
  margin: 0;
}

/* Center all section headers (not hero) */
.section-title{
  text-align: center;
}

.section-title > div{
  margin-left: auto;
  margin-right: auto;
  max-width: 700px;
}

.section-title h2{
  text-align: center;
}

.section-title p{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Align the content under those headers too */
#how .grid-2,
#faq .faq{
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* If .band adds extra inner padding, neutralize it */
#how.band,
#faq.band{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Keep the container as the single source of horizontal padding */
#how.band .container,
#faq.band .container{
  padding-left: var(--pad, 24px);
  padding-right: var(--pad, 24px);
}

.market-hero{
  display:grid;
  gap:14px;
}

.market-feature{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 28px 80px rgba(0,0,0,.45);
  cursor:pointer;
  outline:none;
}

.market-feature:focus-visible{
  box-shadow: 0 0 0 3px rgba(255,255,255,.18), 0 28px 80px rgba(0,0,0,.45);
}

.market-feature img{
  width:100%;
  display:block;
  aspect-ratio: 16/10;
  object-fit: cover;
  transform: scale(1);
  transition: transform .28s ease, filter .28s ease;
}

.market-feature:hover img{
  transform: scale(1.015);
  filter: saturate(1.05);
}

.browserbar{
  position:absolute;
  top:0; left:0; right:0;
  height:44px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  background:rgba(0,0,0,.45);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  z-index:2;
}

.browserbar .dot{
  width:10px; height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.35);
}

.browserbar .url{
  margin-left:10px;
  font-weight:800;
  font-size:.9rem;
  color:rgba(255,255,255,.82);
  opacity:.9;
}

.market-overlay{
  position:absolute;
  right:12px;
  bottom:12px;
  display:flex;
  gap:8px;
  z-index:2;
}

.tag{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.35);
  color:rgba(255,255,255,.92);
  border-radius:999px;
  padding:8px 10px;
  font-weight:900;
  font-size:.85rem;
  backdrop-filter: blur(10px);
}

.tag.soft{
  background:rgba(255,255,255,.08);
}

.market-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:12px;
}

.thumb{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  border-radius:18px;
  overflow:hidden;
  padding:0;
  text-align:left;
  position:relative;
  transition: transform .18s ease, background .18s ease;
}

.thumb:hover{ transform: translateY(-2px); }

.thumb img{
  width:100%;
  display:block;
  object-fit: cover;
}

.thumb-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-top:1px solid rgba(255,255,255,.10);
}

.thumb-meta b{
  color:var(--text);
  font-weight:900;
  font-size:.9rem;
}

.thumb-meta em{
  color:var(--muted);
  font-style:normal;
  font-weight:800;
  font-size:.85rem;
}

.thumb.is-active{
  outline:none;
  border-color: rgba(255,255,255,.30);
  box-shadow: 0 0 0 3px rgba(255,255,255,.12);
}

/* Make it “market” on large screens */
@media (min-width: 1100px){
  .market-hero{ gap:16px; }
  .market-grid{ grid-template-columns: repeat(4, 1fr); }
}

/* Responsive */
@media (max-width: 980px){
  .market-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px){
  .market-grid{ grid-template-columns: 1fr; }
}

/* Beautiful cinematic hero */
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:48px;
  align-items:center;
}

@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; gap:26px; }
}

.hero-visual{
  position:relative;
  max-width: 720px;
  margin-left:auto;
}

/* glow behind */
.hero-visual::before{
  content:"";
  position:absolute;
  inset:-80px -60px -80px -60px;
  background:
    radial-gradient(circle at 30% 30%, rgba(0,140,255,.28), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(255,255,255,.10), transparent 55%);
  filter: blur(40px);
  opacity:.75;
  z-index:-1;
}

.hero-frame{
  width:100%;
  border:1px solid var(--border);
  border-radius:24px;
  overflow:hidden;
  padding:0;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 28px 90px rgba(0,0,0,.42);
  cursor:pointer;
  transform: translateY(0);
  transition: transform .25s ease, box-shadow .25s ease;
}

.hero-frame:hover{
  transform: translateY(-4px);
  box-shadow: 0 32px 105px rgba(0,0,0,.48);
}

.frame-top{
  height:44px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  background: rgba(0,0,0,.42);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
}

.frame-top .dot{
  width:10px; height:10px;
  border-radius:50%;
  background: rgba(255,255,255,.35);
}

.frame-title{
  margin-left:10px;
  font-weight:900;
  font-size:.9rem;
  color: rgba(255,255,255,.82);
}

.hero-frame img{
  width:100%;
  display:block;
  object-fit: contain;
}

.hero-chips{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-start;
}

.chip{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 12px;
  font-weight:900;
  font-size:.9rem;
}

/* Mobile fix: left-align Template Packs title */
@media (max-width: 768px) {
  #packs .section-title h2 {
    text-align: left;
  }
}