
.mc-home-content{
  --mc-bg:#fbf7ef;
  --mc-bg2:#f7f1e6;
  --mc-surface:#ffffff;
  --mc-text:#0f172a;
  --mc-muted:#64748b;
  --mc-line: rgba(15,23,42,.10);
  --mc-shadow: 0 12px 35px rgba(2, 6, 23, .08);
  --mc-radius: 16px;
  --mc-radius2: 20px;
  --mc-brand:#f6b100;
  --mc-brandText:#111827;
  --mc-ok:#22c55e;
  --mc-btn-bg: rgba(255,255,255,.70);
  --mc-btn-text: rgba(15,23,42,.92);
  --mc-btn-border: rgba(15,23,42,.12);
  --mc-btn-hover-bg: rgba(255,255,255,.92);
  --mc-btn-hover-text: rgba(15,23,42,.92);
  --mc-btn-hover-border: rgba(15,23,42,.18);
  --mc-max: 1080px;
}

.mc-home-content *{ box-sizing:border-box; }
.mc-home-content{
  background: var(--mc-bg);
  color: var(--mc-text);
  line-height: 1.6;
}
.mc-home-content a{ color:inherit; text-decoration:none; }

.mc-home-content .wrap{ max-width: var(--mc-max); margin: 0 auto; padding: 0 18px; }
.mc-home-content .section{ padding: 56px 0; }
.mc-home-content .card{
  background: var(--mc-surface);
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-radius2);
  box-shadow: var(--mc-shadow);
}
.mc-home-content .kicker{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.65);
  color: rgba(15,23,42,.80);
  font-weight: 600;
  font-size: 13px;
}
.mc-home-content .dot{
  width:8px; height:8px; border-radius:999px;
  background: var(--mc-brand);
  box-shadow: 0 0 0 6px rgba(246,177,0,.18);
}
.mc-home-content h1, .mc-home-content h2, .mc-home-content h3{ margin:0; letter-spacing:-.02em; }
.mc-home-content p{ margin:0; color: rgba(15,23,42,.78); }

.mc-home-content .btnRow{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.mc-home-content .btn,
.mc-home-content .btnLink,
.mc-home-content .btnPrimary{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--mc-btn-border);
  background: var(--mc-btn-bg);
  color: var(--mc-btn-text);
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.mc-home-content .btn:hover,
.mc-home-content .btnLink:hover,
.mc-home-content .btnPrimary:hover{
  transform: translateY(-1px);
  border-color: var(--mc-btn-hover-border);
  background: var(--mc-btn-hover-bg);
  color: var(--mc-btn-hover-text);
}

.mc-home-content .checks{ margin-top: 16px; display:flex; gap:12px; flex-wrap:wrap; }
.mc-home-content .check{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.65);
  color: rgba(15,23,42,.78);
  font-size: 13px;
  font-weight: 600;
}
.mc-home-content .check svg{ width:18px; height:18px; color: var(--mc-ok); }

/* HERO */
.mc-home-content .hero{ padding: 60px 0 30px; }
.mc-home-content .heroGrid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items: center;
}
.mc-home-content .hero h1{
  font-size: 54px;
  line-height: 1.05;
  font-weight: 900;
  color: rgba(15,23,42,.95);
  margin-top: 16px;
}
.mc-home-content .hero h1 .hl{ color: var(--mc-brand); }
.mc-home-content .heroSub{
  margin-top: 14px;
  font-size: 16px;
  max-width: 48ch;
  color: rgba(15,23,42,.74);
}
.mc-home-content .heroActions{ margin-top: 18px; }

.mc-home-content .preview{
  padding: 18px;
  border-radius: var(--mc-radius2);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: var(--mc-shadow);
}
.mc-home-content .previewTop{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-bottom: 12px;
}
.mc-home-content .pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background: rgba(15,23,42,.03);
  font-size: 12px;
  font-weight: 700;
  color: rgba(15,23,42,.78);
  white-space: nowrap;
}
.mc-home-content .pill .pdf{
  padding: 3px 6px;
  border-radius: 8px;
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.18);
  color: rgba(185,28,28,.92);
  font-weight: 800;
  font-size: 11px;
}
.mc-home-content .previewArt{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,.01));
  overflow:hidden;
  position:relative;
  aspect-ratio: 4 / 3;
}
.mc-home-content .previewArt:before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(500px 240px at 25% 35%, rgba(246,177,0,.28), transparent 60%),
    radial-gradient(520px 240px at 80% 25%, rgba(15,23,42,.08), transparent 60%);
  opacity: .95;
}
.mc-home-content .previewArtInner{ position:relative; padding: 16px; height:100%; display:grid; gap:10px; }
.mc-home-content .fakeCard{
  border-radius: 14px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.10);
  padding: 12px;
  display:grid;
  gap:10px;
}
.mc-home-content .line{ height: 10px; border-radius: 8px; background: rgba(15,23,42,.10); }
.mc-home-content .line.small{ width: 55%; }
.mc-home-content .line.med{ width: 75%; }
.mc-home-content .line.long{ width: 92%; }
.mc-home-content .stars{
  display:flex; gap:4px; align-items:center;
  justify-content:center;
  margin-top: 10px;
}
.mc-home-content .star{
  width: 16px; height: 16px;
  display:inline-block;
  background: conic-gradient(from 0deg, var(--mc-brand), var(--mc-brand));
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: .95;
}

/* Section headings */
.mc-home-content .secHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom: 18px;
}
.mc-home-content .secTitle h2{
  font-size: 28px;
  font-weight: 900;
  color: rgba(15,23,42,.92);
}
.mc-home-content .secTitle p{ margin-top: 8px; max-width: 70ch; }

/* 3 cards */
.mc-home-content .grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.mc-home-content .feat{ padding: 18px; }
.mc-home-content .ico{
  width: 44px; height: 44px;
  border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(246,177,0,.14);
  margin-bottom: 12px;
}
.mc-home-content .ico svg{ width: 22px; height:22px; color: rgba(15,23,42,.88); }
.mc-home-content .feat h3{ font-size: 16px; font-weight: 850; }
.mc-home-content .feat p{ margin-top: 8px; }

/* How it works */
.mc-home-content .steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.mc-home-content .step{ padding: 18px; }
.mc-home-content .num{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.10);
  font-weight: 900;
  color: rgba(15,23,42,.82);
  margin-bottom: 10px;
}

/* Templates */
.mc-home-content .tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.mc-home-content .tab{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.65);
  font-weight: 750;
  font-size: 13px;
  color: rgba(15,23,42,.78);
  cursor: pointer;
  user-select:none;
}
.mc-home-content .tab.active{
  background: rgba(246,177,0,.18);
  border-color: rgba(246,177,0,.35);
  color: rgba(15,23,42,.90);
}
.mc-home-content .gridTemplates{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.mc-home-content .tpl{ padding: 14px; }
.mc-home-content .thumb{
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.01));
  overflow:hidden;
  aspect-ratio: 4 / 3;
  position:relative;
}
.mc-home-content .thumb:before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(500px 240px at 30% 35%, rgba(246,177,0,.22), transparent 60%),
    radial-gradient(520px 240px at 78% 28%, rgba(15,23,42,.08), transparent 60%);
}
.mc-home-content .thumbInner{ position:relative; padding: 12px; display:grid; gap:10px; }
.mc-home-content .badgeRow{ display:flex; gap:6px; flex-wrap:wrap; }
.mc-home-content .badge{
  font-size: 11px;
  font-weight: 800;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.70);
  color: rgba(15,23,42,.72);
}
.mc-home-content .badge.ats{
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.18);
  color: rgba(21,128,61,.92);
}
.mc-home-content .badge.new{
  background: rgba(246,177,0,.18);
  border-color: rgba(246,177,0,.30);
  color: rgba(15,23,42,.80);
}
.mc-home-content .tpl h3{ margin-top: 12px; font-size: 15px; font-weight: 850; }
.mc-home-content .tpl p{ margin-top: 6px; font-size: 13px; }
.mc-home-content .tplActions{ margin-top: 12px; }

/* ATS section */
.mc-home-content .atsGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items:center;
}
.mc-home-content .list{
  margin-top: 12px;
  display:grid;
  gap:10px;
}
.mc-home-content .li{
  display:flex; gap:10px; align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.65);
  color: rgba(15,23,42,.78);
  font-weight: 600;
  font-size: 13px;
}
.mc-home-content .li svg{ width:18px; height:18px; color: var(--mc-ok); margin-top: 1px; flex:0 0 auto; }

.mc-home-content .score{ padding: 18px; }
.mc-home-content .meter{
  margin-top: 10px;
  height: 12px;
  border-radius: 999px;
  background: rgba(15,23,42,.10);
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.10);
}
.mc-home-content .meter > div{
  height: 100%;
  width: 86%;
  background: linear-gradient(90deg, rgba(34,197,94,.70), rgba(246,177,0,.85));
}
.mc-home-content .score small{ display:block; margin-top: 10px; color: rgba(15,23,42,.62); }

/* 6 cards */
.mc-home-content .grid6{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Testimonials */
.mc-home-content .gridTest{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.mc-home-content .quote{ padding: 18px; }
.mc-home-content .who{
  margin-top: 14px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  color: rgba(15,23,42,.72);
  font-weight: 700;
  font-size: 13px;
}
.mc-home-content .rate{ display:flex; gap:4px; }

/* Pricing */
.mc-home-content .priceGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.mc-home-content .price{ padding: 18px; }
.mc-home-content .plan{
  font-weight: 900;
  font-size: 14px;
  color: rgba(15,23,42,.84);
}
.mc-home-content .money{
  font-size: 34px;
  font-weight: 950;
  margin-top: 10px;
}
.mc-home-content .money small{
  font-size: 13px;
  font-weight: 800;
  color: rgba(15,23,42,.60);
}

/* FAQ */
.mc-home-content .faq{ display:grid; gap:10px; }
.mc-home-content details{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  padding: 14px 14px;
}
.mc-home-content summary{
  cursor:pointer;
  font-weight: 850;
  color: rgba(15,23,42,.86);
  list-style: none;
}
.mc-home-content summary::-webkit-details-marker{ display:none; }
.mc-home-content details p{ margin-top: 10px; color: rgba(15,23,42,.72); }

/* Responsive */
@media (max-width: 980px){
  .mc-home-content .heroGrid{ grid-template-columns: 1fr; }
  .mc-home-content .hero h1{ font-size: 44px; }
  .mc-home-content .grid3,
  .mc-home-content .steps,
  .mc-home-content .gridTemplates,
  .mc-home-content .grid6,
  .mc-home-content .gridTest{ grid-template-columns: 1fr; }
  .mc-home-content .atsGrid{ grid-template-columns: 1fr; }
  .mc-home-content .priceGrid{ grid-template-columns: 1fr; }
}

/* Optional images support */
.mc-home-content .previewArt img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 18px;
}

.mc-home-content .thumbInner img{
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  border-radius: 14px;
  border: 1px solid var(--mc-line);
  background: #fff;
}

.mc-home-content .price.is-featured{
  border-color: var(--mc-brand);
  border-width: 2px;
}
