/* Marketing surfaces: home and For creators. Shared chrome lives in site.css. */
.mk{max-width:1160px;margin:0 auto;padding:0 28px}
@media(max-width:700px){.mk{padding:0 18px}}

.tagline{padding:34px 0 8px;font-family:var(--display);font-size:clamp(20px,2.3vw,27px);font-weight:500;letter-spacing:-.015em;line-height:1.3;max-width:34ch;color:var(--ink)}
.tagline em{font-style:normal;color:var(--muted)}

/* Featured project: the thing being built is the hero. */
.lead{display:grid;grid-template-columns:7fr 5fr;gap:34px;align-items:center;padding:26px 0 8px}
.lead-media{position:relative;background:#000;aspect-ratio:16/9;overflow:hidden;border-radius:4px}
.lead-media video,.lead-media img{width:100%;height:100%;object-fit:cover;display:block}
.lead-media .strap{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:12px;padding:12px 14px;color:#fff;font-size:13px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.lead-media .strap b{font-weight:600}
.lead-text{display:grid;gap:14px;align-content:center}
.lead-text .now{font-size:14px;color:var(--amber-deep);font-weight:600}
.lead-text h1{font-family:var(--display);font-size:clamp(40px,4.6vw,64px);font-weight:800;letter-spacing:-.035em;line-height:.98;margin:0;font-variation-settings:"opsz" 96}
.lead-text p{margin:0;font-size:16px;color:#2b2a27;max-width:46ch}
.meter{height:10px;background:#ececea;border-radius:99px;overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;width:0;background:var(--amber);transition:width .7s cubic-bezier(.2,.7,.2,1)}
.stat{font-size:15px;color:#333}
.stat .money{font-family:var(--mono);font-weight:500;font-size:22px;color:var(--ink);letter-spacing:-.02em;margin-right:4px}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.btn-fill,.btn-line{display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;padding:13px 20px;border-radius:4px;border:1.5px solid var(--ink);line-height:1}
.btn-fill{background:var(--amber);border-color:var(--amber);color:var(--amber-ink)}
.btn-fill:hover{background:#d8922a;border-color:#d8922a}
.btn-line{background:#fff;color:var(--ink)}
.btn-line:hover{background:#f4f4f2}
.btn-fill:focus-visible,.btn-line:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.fine{font-size:13px;color:var(--muted);max-width:44ch}

@media(max-width:900px){.lead{grid-template-columns:1fr;gap:18px;padding-top:16px}.lead-text h1{font-size:40px}.tagline{padding-top:22px}}

/* Section headings */
.sec{padding:56px 0 0}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 18px;flex-wrap:wrap}
.sec-h h2{font-family:var(--display);font-size:clamp(26px,3vw,36px);font-weight:700;letter-spacing:-.03em;margin:0;line-height:1.05}
.sec-h span,.sec-h a{font-size:14px;color:var(--muted)}
.sec-h a{text-decoration:underline;text-underline-offset:3px}

/* Project grid */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px}
@media(max-width:900px){.grid3{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid3{grid-template-columns:1fr}}
.proj-card{display:block}
.proj-card .ph{aspect-ratio:16/10;background:#000;overflow:hidden;border-radius:4px}
.proj-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.proj-card:hover img{transform:scale(1.02)}
.proj-card h3{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.025em;margin:12px 0 4px;line-height:1.1}
.proj-card p{margin:0;font-size:14px;color:#3a3936;line-height:1.5}
.proj-card .meter{height:6px;margin-top:10px}
.proj-card .row{display:flex;justify-content:space-between;gap:10px;font-size:13px;color:var(--muted);margin-top:8px}
.proj-card .row b{color:var(--ink);font-family:var(--mono);font-weight:500}
.empty{padding:40px 0;color:var(--muted);font-size:15px}
.empty a{text-decoration:underline;text-underline-offset:3px}

/* Where the money goes: the honest bar is the memorable device. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;border-top:1px solid var(--line);padding-top:26px}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:26px}}
.split .lede{font-size:18px;line-height:1.5;margin:0 0 14px;color:#1d1c1a;max-width:40ch}
.split p{margin:0 0 12px;font-size:15px;color:#3a3936;max-width:52ch}
.bar100{display:grid;grid-template-columns:85fr 15fr;gap:3px;height:64px;border-radius:4px;overflow:hidden}
.bar100 div{display:flex;align-items:flex-end;padding:8px 10px;font-family:var(--mono);font-weight:500;font-size:14px;color:#fff}
.bar100 .c{background:var(--amber);color:var(--amber-ink)}
.bar100 .f{background:#3a3936}
.legend{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin-top:14px;font-size:15px;align-items:baseline}
.legend .m{font-family:var(--mono);font-weight:500;font-size:20px;letter-spacing:-.02em}
.legend .m.zero{color:var(--green)}
.legend span{color:#3a3936}

/* How it gets built: a real sequence, so it is numbered. */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;border-top:1px solid var(--line);padding-top:26px}
@media(max-width:800px){.steps3{grid-template-columns:1fr;gap:22px}}
.steps3 article{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.steps3 .n{font-family:var(--display);font-weight:800;font-size:40px;line-height:.9;letter-spacing:-.04em;color:var(--amber)}
.steps3 h3{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.02em;margin:4px 0 6px;line-height:1.15}
.steps3 p{margin:0;font-size:15px;color:#3a3936;line-height:1.5}

/* Creator band */
.band{margin:64px 0 0;background:var(--ink);color:#fff;border-radius:6px;padding:40px 36px;display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:center}
@media(max-width:800px){.band{grid-template-columns:1fr;padding:28px 22px}}
.band h2{font-family:var(--display);font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.035em;line-height:1;margin:0 0 12px}
.band p{margin:0;color:#c9c7c1;font-size:16px;max-width:46ch}
.band .ctas{justify-self:start}
@media(min-width:801px){.band .ctas{justify-self:end}}
.band .btn-line{background:transparent;color:#fff;border-color:#fff}
.band .btn-line:hover{background:rgba(255,255,255,.08)}

/* For creators page */
.cr-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;padding:44px 0 30px;border-bottom:1px solid var(--line)}
@media(max-width:900px){.cr-hero{grid-template-columns:1fr;gap:22px;padding-top:28px}}
.cr-hero h1{font-family:var(--display);font-size:clamp(40px,5.2vw,72px);font-weight:800;letter-spacing:-.04em;line-height:.95;margin:0 0 18px;font-variation-settings:"opsz" 96}
.cr-hero .lede{font-size:18px;line-height:1.5;color:#1d1c1a;margin:0 0 22px;max-width:44ch}
.give-get{display:grid;gap:10px;font-size:15px}
.give-get div{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.give-get div:last-child{border-bottom:1px solid var(--line)}
.give-get b{font-weight:600}
.give-get span{color:#3a3936}
.timeline{display:grid;gap:0;border-top:1px solid var(--line);margin-top:26px}
.timeline article{display:grid;grid-template-columns:72px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.timeline .n{font-family:var(--display);font-weight:800;font-size:44px;line-height:.9;letter-spacing:-.04em;color:var(--amber)}
.timeline h3{font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:-.025em;margin:2px 0 6px;line-height:1.1}
.timeline p{margin:0;font-size:15px;color:#3a3936;max-width:64ch;line-height:1.55}
.timeline .you{margin-top:8px;font-size:13px;color:var(--muted)}
.faq{border-top:1px solid var(--line);margin-top:8px}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";font-family:var(--display);font-weight:600;color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 0;color:#3a3936;font-size:15px;max-width:64ch;line-height:1.55}

@media(prefers-reduced-motion:reduce){.meter i,.proj-card img{transition:none}}