/* v5: the v3 page, cleaned up a little. The brief asks for the business name and a style.
   Loaded last. */

/* ---- hero: a little less around the headline ---- */
.hero{padding-bottom:26px}

/* ---- brief: name first, then one style for everything ---- */
.brief{align-items:start;padding-top:38px}
.brief .form-row{max-width:none}
.brief .form-row label{font-size:14.5px}
.brief .form-row .w2 input{font-family:Rubik;font-weight:700;font-size:19px}
.brief .form-row .w2 input::placeholder{font-weight:500}
.brief-side{align-self:center}
.sty-wrap{margin-top:16px}
.sty-h{display:block;font-size:14.5px;font-weight:700;color:var(--ink-soft);margin-bottom:8px}
.sty-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sty{border:0;background:none;padding:0;cursor:pointer;display:grid;gap:7px;text-align:center;font:inherit;color:var(--ink);min-width:0}
.sty-c{display:block;aspect-ratio:4/3;border-radius:12px;outline:3px solid transparent;outline-offset:3px;transition:transform .15s,outline-color .15s}
.sty:hover .sty-c{transform:translateY(-3px)}
.sty.on .sty-c{outline-color:var(--flag)}
.sty-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4cqw;padding:6cqw 8cqw;text-align:center}
.sty-in .lmk{font-size:11cqw}
.sty-name{font-size:12cqw;line-height:1.1;font-weight:800;overflow-wrap:anywhere}
.sty-l{font-family:Rubik;font-weight:600;font-size:14.5px;color:var(--flag);display:inline-flex;justify-content:center;align-items:center;gap:4px;line-height:1.2}
.sty-l svg{width:14px;height:14px;stroke-width:3;display:none;flex:none}
.sty.on .sty-l{font-weight:800}
.sty.on .sty-l svg{display:block}

/* ---- the fourth content style ---- */
.cc.st-luxe{--cbg:#131517;--cink:#f3eee5;--cf:Heebo}
.cc.st-luxe::before{inset:3.2cqw;border:.45cqw solid var(--a);border-radius:1.5cqw;opacity:.8}
.cc.st-luxe .big,.cc.st-luxe .sty-name{font-weight:500;letter-spacing:-.2px}
.cc.st-luxe .tag{background:none;color:var(--a);border:.35cqw solid var(--a)}
.cc.st-luxe .pill,.cc.st-luxe .foot .lmk,.cc.st-luxe .sty-in .lmk{background:var(--a);color:#131517}
.cc.st-luxe .num,.cc.flyer.st-luxe li svg{color:var(--a)}
.cc.reel.st-luxe{background:#131517}
.cc.reel.st-luxe::before{display:block}
.cc.st-bold .sty-in .lmk{background:var(--a);color:var(--d)}

/* ---- kit: the last row holds two tiles ---- */
.bento.c{grid-template-columns:1fr 1.25fr}

@media (max-width:1000px){
  .bento.c{grid-template-columns:1fr 1fr}
  .bento.c .bt-leads{grid-column:auto}
}
@media (max-width:900px){
  .brief{padding-top:26px}
}
@media (max-width:620px){
  .bento.c{grid-template-columns:1fr}
  .sty-grid{grid-template-columns:1fr 1fr;gap:12px}
  .sty-c{aspect-ratio:2/1}
  .sty-in{gap:2.4cqw;padding:4cqw 7cqw}
  .sty-in .lmk{font-size:7.5cqw}
  .sty-name{font-size:8.6cqw}
}