/* ==========================================================================
   Homepage. Loaded after brand.css on index.html only.
   Order: video wordmark hero -> Post It (paying customers) -> Pros on Camera
   (black band) -> Find Your Next Gig (text only) -> How It Works.
   ========================================================================== */

/* The header now sits in the page flow, so the hero no longer needs room under it */
html:root body .video-hero{ padding-top:8px !important; }

.mq-inner{ max-width:1200px; margin:0 auto; }
html:root body .mq-eyebrow{
  font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--b-green-dark);
  text-align:center; margin-bottom:10px;
}
html:root body .mq-title{
  font-family:var(--b-display) !important; font-weight:700 !important; text-transform:none !important;
  letter-spacing:-.05em !important; line-height:1 !important; text-align:center; color:var(--b-ink) !important;
  font-size:clamp(42px, 6.4vw, 96px) !important; margin:0 0 16px;
}
html:root body .mq-title span{ color:var(--b-green) !important; font-family:inherit !important; }
html:root body .mq-title-xl{ font-size:clamp(50px, 8.8vw, 132px) !important; letter-spacing:-.055em !important; }
html:root body .mq-sub{ text-align:center; font-size:clamp(17px, 1.6vw, 20px); font-weight:500; color:var(--b-muted); margin:0 auto; max-width:640px; }

/* Buttons: one shape, three colors */
html:root body .mq-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:52px; padding:0 26px;
  border-radius:999px; font-size:16px !important; font-weight:700 !important; text-decoration:none !important;
  border:none; cursor:pointer; white-space:nowrap; transition:transform .15s ease, background .15s ease;
}
html:root body .mq-btn svg{ width:18px; height:18px; stroke:currentColor; }
html:root body .mq-btn:hover{ transform:translateY(-1px); }
html:root body .mq-btn:focus-visible{ outline:2px solid var(--b-green); outline-offset:3px; }
html:root body .mq-btn-green{ background:var(--b-green); color:#fff !important; }
html:root body .mq-btn-green:hover{ background:#00a63d; }
html:root body .mq-btn-dark{ background:var(--b-ink); color:#fff !important; }
html:root body .mq-btn-white{ background:#fff; color:var(--b-ink) !important; }
html:root body .mq-link{ font-size:15px; font-weight:700; color:var(--b-ink) !important; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--b-green); text-decoration-thickness:2px; }
html:root body .mq-link-light{ color:#fff !important; }

/* ---------- Post It: the paying customers' section ---------- */
.mq-post{ padding:clamp(56px,7vw,96px) 20px clamp(48px,6vw,80px); background:var(--b-paper); }

/* Price rail: what it actually costs, stated once and clearly */
.mq-ladder{ margin:34px auto 0; max-width:900px; }
.mq-ladder-rail{
  display:flex; align-items:stretch; gap:0; background:var(--b-ink); color:#fff;
  border-radius:22px; overflow:hidden;
}
.mq-rate{
  display:flex; align-items:center; gap:14px; padding:22px 28px; flex:0 0 auto;
  border-right:1px solid rgba(255,255,255,.14);
}
html:root body .mq-rate-num{ font-family:var(--b-display); font-weight:700; font-size:46px; line-height:1; letter-spacing:-.05em; color:#3ddc7a; }
.mq-rate-unit{ font-size:13.5px; line-height:1.3; font-weight:600; color:rgba(255,255,255,.72); }
.mq-ladder-steps{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); }
.mq-ladder-steps > div{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:20px 10px; border-left:1px solid rgba(255,255,255,.14);
}
.mq-ladder-steps > div:first-child{ border-left:none; }
.mq-ladder-steps b{ font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.6); }
.mq-ladder-steps span{ font-size:22px; font-weight:700; letter-spacing:-.03em; }
.mq-secure{ display:flex; align-items:center; justify-content:center; gap:8px; margin:14px 0 0; font-size:14px; color:var(--b-muted); }
.mq-secure svg{ width:16px; height:16px; stroke:currentColor; }

/* What are you posting: one tile per type, each straight to its form */
html:root body .mq-tiles-title{
  font-family:var(--b-display) !important; font-weight:700 !important; font-size:clamp(22px,2.4vw,30px) !important;
  letter-spacing:-.035em; text-align:center; margin:46px 0 22px; color:var(--b-ink);
}
.mq-tiles{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; max-width:1140px; margin:0 auto; }
html:root body .mq-tile{
  display:flex; flex-direction:column; text-decoration:none !important; color:inherit !important;
  background:#fff; border:1px solid var(--b-line); border-radius:22px; padding:30px 26px 24px;
  box-shadow:0 1px 2px rgba(20,21,26,.04), 0 22px 44px -34px rgba(20,21,26,.32);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
html:root body .mq-tile:hover{
  transform:translateY(-4px); border-color:var(--b-green);
  box-shadow:0 1px 2px rgba(20,21,26,.05), 0 32px 56px -32px rgba(20,21,26,.40);
}
html:root body .mq-tile:focus-visible{ outline:2px solid var(--b-green); outline-offset:3px; }
html:root body .mq-tile-title{
  font-family:var(--b-display); font-size:26px; font-weight:700; letter-spacing:-.04em; line-height:1.1;
  color:var(--b-ink); margin-bottom:12px; padding-bottom:14px; border-bottom:1px solid var(--b-line);
}
.mq-tile-desc{ font-size:15px; line-height:1.5; color:#4a473f; }
.mq-tile-eg{ display:block; margin-top:10px; font-size:13.5px; line-height:1.45; color:var(--b-muted); font-style:italic; }
.mq-tile-go{
  margin-top:auto; padding-top:20px; display:inline-flex; align-items:center; gap:7px;
  font-size:15px; font-weight:700; color:var(--b-green-dark);
}
.mq-tile-arrow{ width:16px; height:16px; stroke:currentColor; transition:transform .18s ease; }
html:root body .mq-tile:hover .mq-tile-arrow{ transform:translateX(4px); }

/* What every listing includes, whichever type it is */
.mq-perks{
  list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px 34px;
  max-width:1000px; margin:34px auto 0; padding:26px 20px 0; border-top:1px solid var(--b-line);
}
.mq-perks li{ display:flex; gap:9px; font-size:15.5px; line-height:1.45; color:#4a473f; }
.mq-perks li svg{ width:18px; height:18px; flex:0 0 18px; stroke:var(--b-green); margin-top:2px; }
.mq-perks li strong{ color:var(--b-ink); font-weight:600; }

/* ---------- 2. Pros on Camera (black, like the hero footage) ---------- */
.mq-pros{ background:var(--b-ink); color:#fff; padding:clamp(52px,7vw,90px) 20px; }
html:root body .mq-pros .mq-eyebrow{ color:#3ddc7a; }
html:root body .mq-pros .mq-title{ color:#fff !important; }
html:root body .mq-pros .mq-sub{ color:rgba(255,255,255,.75); }
.mq-pros .hp-grid{ margin-top:34px; }
html:root body .mq-pros .hp-card{ height:clamp(300px, 30vw, 400px) !important; border-radius:18px; }
html:root body .mq-pros .hp-thumb img:not(.hp-bg){ object-fit:cover; }
html:root body .mq-pros .hp-skel{ height:clamp(300px, 30vw, 400px); background:linear-gradient(90deg,#1c1c1a,#262623,#1c1c1a); background-size:200% 100%; }
html:root body .mq-pros .hf-empty{ color:rgba(255,255,255,.7); }
.mq-pros-foot{ display:flex; flex-direction:column; align-items:center; gap:16px; margin-top:30px; }
html:root body .mq-yours{
  display:block; max-width:760px; margin:34px auto 0; padding:16px 22px; border:1px solid rgba(255,255,255,.18); border-radius:16px;
  text-align:center; font-size:16px; color:rgba(255,255,255,.8) !important; text-decoration:none !important;
}
html:root body .mq-yours b{ color:#3ddc7a; font-weight:700; }
html:root body .mq-yours:hover{ border-color:#3ddc7a; }

/* ---------- 3. Find Your Next Gig (text only) ---------- */
html:root body .mq-find{ background:var(--b-paper) !important; padding:clamp(56px,8vw,100px) 16px clamp(48px,6vw,80px) !important; }
html:root body .mq-find .hf-truths{ margin-top:18px; }
html:root body .mq-find .hf-search{ margin-top:30px; }
html:root body .mq-find .hf-foot{ margin-top:26px; }

/* ---------- 4. How It Works ---------- */
.mq-how{ padding:clamp(56px,7vw,96px) 20px 10px; background:#fff; border-top:1px solid var(--b-line); }
.mq-lanes{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:44px; margin-top:40px; }
.mq-lane{ display:flex; flex-direction:column; }
html:root body section.mq-how .mq-lane h3{
  font-family:var(--b-display) !important; font-weight:700 !important; text-transform:none;
  font-size:23px !important; letter-spacing:-.035em !important; margin:0 0 20px; padding-bottom:16px;
  border-bottom:2px solid var(--b-ink);
}
.mq-steps{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:16px; }
.mq-steps li{ display:flex; gap:12px; font-size:16px; line-height:1.5; color:#4a473f; }
.mq-steps li b{ color:var(--b-ink); font-weight:600; }
.mq-step-n{
  flex:0 0 26px; width:26px; height:26px; border-radius:50%; background:var(--b-ink); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; margin-top:1px;
}
.mq-lane .mq-link{ margin-top:auto; align-self:flex-start; }
.mq-share{
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin:56px 0 0; padding:26px 30px; border-radius:20px; background:var(--b-paper); border:1px solid var(--b-line);
}
.mq-share strong{ display:block; font-size:19px; letter-spacing:-.02em; }
.mq-share span{ color:var(--b-muted); font-size:15px; }

/* The footer follows straight on from How It Works */
html:root body.home footer.site-footer, html:root body footer.site-footer{ margin-top:64px !important; }

/* How It Works stays three side-by-side columns; on phones the columns swipe sideways */
.mq-secure-top{ margin-top:22px; }
@media (max-width:980px){
  .mq-lanes{ gap:24px; margin-top:30px; }
  html:root body section.mq-how .mq-lane h3{ font-size:19px !important; }
  .mq-steps li{ font-size:15px; }
}
@media (max-width:640px){
  .mq-lanes{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:82%; overflow-x:auto; scroll-snap-type:x mandatory; margin:26px -20px 0; padding:0 20px 10px; scrollbar-width:none; }
  .mq-lanes::-webkit-scrollbar{ display:none; }
  .mq-lane{ scroll-snap-align:start; }
}
@media (max-width:980px){
  .mq-tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .mq-perks{ grid-template-columns:1fr; justify-items:center; }
  .mq-perks li{ max-width:420px; }
}
@media (max-width:860px){
  html:root body .mq-btn{ height:50px; padding:0 22px; }
  .mq-ladder-rail{ flex-direction:column; }
  .mq-rate{ justify-content:center; border-right:none; border-bottom:1px solid rgba(255,255,255,.14); padding:18px 20px; }
}
@media (max-width:560px){
  .mq-tiles{ grid-template-columns:1fr; gap:14px; }
  html:root body .mq-tile{ padding:22px 20px 20px; }
  .mq-perks{ justify-items:start; gap:12px; }
  .mq-perks li{ max-width:none; }
}
@media (max-width:520px){
  .mq-ladder-steps{ grid-template-columns:1fr; }
  .mq-ladder-steps > div{ flex-direction:row; justify-content:space-between; padding:14px 22px; border-left:none; border-top:1px solid rgba(255,255,255,.14); }
  .mq-ladder-steps > div:first-child{ border-top:none; }
}
@media (max-width:640px){
  html:root body .mq-pros .hp-card{ height:360px !important; }
  .mq-share{ padding:20px; }
  .mq-share .mq-btn{ width:100%; }
}