/* 07 inherits the quiet composer from 06, with an idea-to-product illustration. */
body[data-direction=earn]{--paper:#f8f9f3;--ink:#27372c;--lime:#e2eabe}
body[data-direction=earn] .hero{padding:64px 26px 42px}
.earn-heading{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:center;text-align:left}
body[data-direction=earn] .hero h1{font-size:clamp(40px,4.65vw,65px);line-height:1.05;letter-spacing:-2.7px;margin:0 0 20px;font-weight:400}
body[data-direction=earn] .hero h1 em{font-family:inherit;font-weight:400;font-style:normal;color:#849069}
.earn-intro p{font-size:14px;line-height:1.8;color:#717967;margin:0}
.earn-illustration{margin:0;position:relative}.earn-artwork{transform:rotate(-7deg);transition:transform .65s ease}
.earn-illustration img{display:block;width:100%;height:auto}
.earn-illustration figcaption{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#879074;margin:6px 18px 0;transform:rotate(7deg)}
.earn-illustration figcaption span:nth-child(2){font-size:27px;line-height:1;color:#a8b18f}
.earn-composer{max-width:730px;margin:34px auto 0;position:relative}
body[data-direction=earn] .prompt-box{padding:24px 24px 17px;border-color:#d6ddc9}
body[data-direction=earn] .prompt-box textarea{height:74px;font-size:16px}
body[data-direction=earn] #generate-button{font-size:12px;width:auto;min-height:44px;height:auto;padding:12px 17px;border-radius:10px;gap:20px;background:#34482f;white-space:nowrap}
body[data-direction=earn] #generate-button span{font-size:19px}
body[data-direction=earn] #generate-button:hover{background:#526c3d}
body[data-direction=earn] .hero:has(.prompt-box:focus-within) .earn-artwork,body[data-direction=earn] .hero.has-idea .earn-artwork{transform:rotate(-3deg) translateY(-5px)}
body[data-direction=earn] .profit-section{margin-top:25px;margin-bottom:20px;background:#eaf0dd}
body[data-direction=earn] .how-section{margin-top:55px}
body[data-direction=earn] .profit-copy h2{font-size:42px}
.direction-tabs{overflow-x:auto;flex-shrink:1}
.direction-label,.direction-about{flex-shrink:0}
@media(max-width:1100px){.earn-heading{max-width:850px;grid-template-columns:1.45fr 1fr;gap:20px}body[data-direction=earn] .hero h1{font-size:48px}.earn-illustration figcaption{font-size:9px}.earn-composer{max-width:690px}}
@media(max-width:800px){body[data-direction=earn] .hero{padding:48px 25px 35px}.earn-heading{grid-template-columns:1.5fr 1fr;gap:10px}body[data-direction=earn] .hero h1{font-size:40px;letter-spacing:-1.7px;line-height:1.09}.earn-intro p{font-size:12px}.earn-illustration figcaption{font-size:8px;margin-left:4px;margin-right:4px}.earn-composer{margin-top:29px}body[data-direction=earn] .profit-copy h2{font-size:35px}}
@media(max-width:560px){body[data-direction=earn] .hero{padding:39px 22px 30px}.earn-heading{display:block;text-align:center}body[data-direction=earn] .hero h1{font-size:39px;letter-spacing:-1.8px;line-height:1.08;max-width:350px;margin:0 auto 17px}.earn-intro p{font-size:12px;line-height:1.7}.earn-illustration{width:210px;margin:21px auto 0}.earn-illustration figcaption{font-size:8px;margin:0 10px;transform:rotate(7deg)}.earn-illustration figcaption span:nth-child(2){font-size:23px}.earn-composer{margin-top:22px}body[data-direction=earn] .prompt-box{padding:19px 16px 14px}body[data-direction=earn] .prompt-box textarea{font-size:15px;height:82px}body[data-direction=earn] #generate-button{font-size:10px;padding:12px;gap:10px}body[data-direction=earn] .prompt-hint{font-size:9px}body[data-direction=earn] .profit-copy h2{font-size:37px}body[data-direction=earn] .how-section{margin-top:30px}}
@media(prefers-reduced-motion:reduce){.earn-artwork{transition:none}}
.earn-illustration .earn-art-controls{transform:none;display:flex;align-items:center;justify-content:center;gap:12px;margin:9px 0 0}
.earn-art-controls button{display:grid;place-items:center;width:40px;height:40px;flex:none;border:1px solid #dce1d2;border-radius:50%;font-size:18px;color:#657252;transition:background .2s}
.earn-art-controls button:hover{background:#e9eedf}
.earn-art-controls #earn-art-label{font:10px var(--sans);color:#79826d;line-height:1.4;min-width:111px;text-align:center}
@media(max-width:560px){.earn-illustration{width:250px}.earn-illustration .earn-art-controls{margin-top:8px;gap:8px}.earn-art-controls button{width:40px;height:40px}.earn-art-controls #earn-art-label{font-size:9px;min-width:105px}}