/* collective.html: the AI Creators Collective sales page. Stage hero with the offer printed beside it,
   three printed steps, the application as a four-step printout, the free community as the alternative. */
.co-hero{display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,400px); gap:52px clamp(52px,6vw,104px); align-items:end}
.co-hero h1{max-width:14ch}
.co-hero .lede{margin-top:28px}
.co-offer .price{display:flex; align-items:baseline; gap:10px; margin:6px 0 18px}
.co-offer .price b{font-weight:200; font-size:clamp(72px,7vw,104px); line-height:.85; letter-spacing:-.06em; font-variant-numeric:tabular-nums}
.co-offer .price span{margin-left:14px; font-size:17px; color:var(--paper-ink-muted)}
.co-offer .rows li{display:grid; grid-template-columns:96px 1fr; gap:12px; font-size:16px}
.co-offer .rows li span{color:var(--paper-ink-muted)}
.co-offer .rows b{font-weight:500}
.co-next{display:grid; grid-template-columns:96px 1fr; gap:2px 12px; margin-top:18px; padding-top:16px; border-top:1.5px dashed var(--paper-rule); text-decoration:none; color:var(--paper-ink); font-size:16px}
.co-next > span{grid-row:span 2; color:var(--paper-ink-muted)}
.co-next b{font-weight:500}
.co-next em{font-style:normal; font-size:14px; color:var(--paper-ink-muted); text-decoration:underline; text-underline-offset:3px}
.co-next:hover em{color:var(--paper-ink)}
@media (max-width:960px){ .co-hero{grid-template-columns:minmax(0,1fr)} .co-offer{max-width:460px} }

/* three steps, printed */
.co-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:39px 26px}
.co-steps li{padding:28px 26px 34px}
.co-steps .thin-num{display:block; font-size:clamp(56px,5vw,80px); margin-bottom:18px}
.co-steps h3{margin-bottom:8px}
.co-steps p{font-size:16px; color:var(--paper-ink-muted)}
.co-steps a{color:var(--paper-ink)}
.ph,.fd-ph{font-weight:500; color:var(--paper-ink)}
@media (max-width:860px){ .co-steps{grid-template-columns:minmax(0,1fr)} }

/* the application */
.co-form{max-width:760px; padding:clamp(26px,3.4vw,44px) clamp(22px,3.4vw,44px) clamp(36px,4vw,52px); scroll-margin-top:96px}
.preview-tag{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; margin-bottom:26px; border:1.5px dashed var(--paper-rule); border-radius:4px; font-size:14px; color:var(--paper-ink-muted)}
.preview-tag b{color:var(--paper-ink); font-weight:500; white-space:nowrap}
.co-progress{list-style:none; margin:0 0 30px; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; counter-reset:s}
.co-progress li{display:flex; flex-direction:column; gap:6px; padding-top:10px; border-top:2px solid var(--paper-rule); font-size:14px; color:var(--paper-ink-muted)}
.co-progress .thin-num{font-size:34px; color:var(--paper-ink-muted)}
.co-progress li.done{border-top-color:var(--paper-ink); color:var(--paper-ink)}
.co-progress li.on{border-top-color:var(--paper-ink); color:var(--paper-ink); font-weight:500}
.co-progress li.on .thin-num,.co-progress li.done .thin-num{color:var(--paper-ink)}
@media (max-width:520px){ .co-progress li{font-size:12px} .co-progress .thin-num{font-size:28px} }
.co-step{border:0; margin:0; padding:0; min-width:0}
.co-step[hidden]{display:none}
.co-step.on{animation:co-in .4s cubic-bezier(.2,.9,.2,1) both}
@keyframes co-in{from{opacity:0; transform:translateY(10px)}}
.f-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 26px}
.f-grid .full{grid-column:1/-1}
@media (max-width:640px){ .f-grid{grid-template-columns:minmax(0,1fr)} }
.fl{display:flex; flex-direction:column; gap:8px; min-width:0}
.fl label{font-size:15px; font-weight:500; color:var(--paper-ink)}
.fl label small{font-weight:400; color:var(--paper-ink-muted); font-size:14px}
.fl input,.fl textarea{width:100%; font:inherit; font-size:17px; line-height:1.45; padding:13px 15px; border-radius:10px; border:1.5px solid rgba(10,15,20,.22); background:#fff; color:#0A0F14}
.fl textarea{min-height:110px; resize:vertical}
.fl input:focus,.fl textarea:focus{outline:2px solid #0A0F14; outline-offset:1px; border-color:#0A0F14}
.fl .bad{border-color:var(--due)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.co-review{margin:0; display:grid; grid-template-columns:minmax(110px,170px) minmax(0,1fr); gap:0}
.co-review dt,.co-review dd{margin:0; padding:12px 0; border-top:1px solid var(--paper-rule); font-size:16px}
.co-review dt{color:var(--paper-ink-muted); padding-right:14px}
.co-review dd{color:var(--paper-ink); white-space:pre-wrap; overflow-wrap:anywhere}
.co-review dt:first-of-type,.co-review dt:first-of-type + dd{border-top:0; padding-top:0}
@media (max-width:520px){ .co-review{grid-template-columns:minmax(0,1fr)} .co-review dd{border-top:0; padding-top:2px} }
.co-ok{display:flex; gap:12px; align-items:flex-start; margin-top:22px; padding-top:18px; border-top:1.5px dashed var(--paper-rule); font-size:16px; color:var(--paper-ink); cursor:pointer}
.co-ok input{width:20px; height:20px; margin:2px 0 0; accent-color:#0A0F14; flex:none}
.f-foot{display:flex; flex-wrap:wrap; align-items:center; gap:16px 18px; margin-top:30px}
.f-foot button{font:inherit; font-weight:500; font-size:18px; padding:14px 22px; border-radius:12px; border:2px solid #0A0F14; background:#fff; color:#0A0F14; box-shadow:5px 5px 0 #0A0F14; cursor:pointer; transition:transform .16s steps(2,end), box-shadow .16s steps(2,end)}
.f-foot button:hover{transform:translate(-2px,-3px); box-shadow:8px 9px 0 #0A0F14}
.f-foot button:active{transform:translate(3px,3px); box-shadow:2px 2px 0 #0A0F14}
.f-foot button[hidden]{display:none}
.f-foot .back{box-shadow:none; border-color:var(--paper-rule); font-weight:400}
.f-foot .back:hover{box-shadow:none; transform:none; border-color:#0A0F14}
.f-foot button[disabled]{opacity:.55; cursor:progress}
.co-err{flex-basis:100%; font-size:15px; color:var(--due); min-height:1.4em}
.co-err:empty{display:none}

.thanks{display:none; padding:clamp(8px,2vw,20px) 0 8px}
.co-form.done form{display:none}
.co-form.done .thanks{display:block}
.thanks .eb-marker{font-size:clamp(40px,5vw,60px); margin:0}
.thanks .eb-pen{margin-top:16px; font-size:30px}
.thanks p.plain{margin-top:22px; font-size:16px; color:var(--paper-ink-muted); max-width:46ch}
.thanks p.plain b{color:var(--paper-ink); font-weight:500}
.co-form .preview-plain{display:none}
.co-form.preview .preview-plain{display:block}
.co-form.preview .sent-plain{display:none}
.thanks .again{margin-top:22px; font:inherit; font-size:15px; background:none; border:0; padding:0; color:var(--paper-ink); text-decoration:underline; cursor:pointer}

/* the free alternative */
.co-free{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:26px 52px; align-items:center; padding:clamp(26px,4vw,52px)}
.co-free .muted{margin-top:12px; max-width:52ch}
@media (max-width:860px){ .co-free{grid-template-columns:minmax(0,1fr)} .co-free .action{justify-self:start} }