@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-sans-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-sans-600.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-400.woff2") format("woff2")}

body{margin:0;background:#f3f2ee}
a{color:#1e2b25}
a:hover{color:#2a3b33}
input::placeholder{color:#8a8982}
[hidden]{display:none !important}

.page{font-family:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",sans-serif;color:#17181a;background:#f3f2ee;min-height:100vh;display:flex;flex-direction:column;font-size:18px;line-height:1.55}

.site-header{width:100%;max-width:1240px;margin:0 auto;padding:32px clamp(16px,4vw,48px) 0;box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px}
.logo,.logo:hover{text-decoration:none;color:#17181a;font-size:24px;font-weight:600;letter-spacing:-0.03em}
.logo-tld{color:#7a5c0e}
.opens{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:14px;color:#5f5e58}

.main{flex:1;width:100%;max-width:1240px;margin:0 auto;padding:clamp(48px,7vw,96px) clamp(16px,4vw,48px) clamp(56px,8vw,112px);box-sizing:border-box;display:flex;flex-direction:column;gap:clamp(40px,5vw,64px)}

.hero{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px}
.headline{margin:0;font-weight:500;font-size:clamp(54px,9vw,132px);line-height:0.92;letter-spacing:-0.055em;display:flex;flex-direction:column}
.headline-accent{color:#1e2b25;display:inline-flex;align-items:baseline;gap:0.12em}
.headline-dot{display:inline-block;width:0.16em;height:0.16em;border-radius:2px;background:#f0cf7a}
.toggle{min-height:44px;padding:0 18px;border:0;border-radius:6px;background:#ffffff;box-shadow:inset 0 0 0 1px #d6d4cc;color:#17181a;font:inherit;font-size:16px;font-weight:500;cursor:pointer}

.stage-scroll{overflow-x:auto;margin:0 -8px;padding:8px}
.stage{position:relative;min-width:760px;height:400px}

.head{position:absolute;top:0;width:31%;height:40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d6d4cc;font-size:14px;font-weight:600;opacity:0;transition:opacity .6s ease .5s}
.head.is-shown{opacity:1}
.head-count{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;font-weight:400;color:#5f5e58}

.card{position:absolute;width:31%;box-sizing:border-box;min-height:76px;padding:12px 14px;border-radius:8px;background:#ffffff;box-shadow:0 0 0 1px rgb(30 28 20 / 0.06),0 10px 24px rgb(30 28 20 / 0.12);transition:left .9s cubic-bezier(.2,.8,.2,1),top .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),background-color .6s ease,box-shadow .6s ease;display:flex;flex-direction:column;gap:4px}
.card.is-hl{background:#fcf3dc}
.stage.is-sorted .card{background:#ffffff;box-shadow:0 0 0 1px rgb(30 28 20 / 0.06),0 1px 2px rgb(30 28 20 / 0.06)}
.card-title{font-size:14px;font-weight:500;line-height:20px}
.card-meta{font-size:13px;line-height:18px;color:#5f5e58}
.chip{align-self:flex-start;margin-top:4px;height:20px;padding:0 6px;border-radius:4px;background:#fcf3dc;color:#7a5c0e;font-size:12px;font-weight:500;display:inline-flex;align-items:center}

/* Without script the cards simply stack; app.js adds .is-live to position them. */
.stage:not(.is-live){min-width:0;height:auto;display:flex;flex-direction:column;gap:12px}
.stage:not(.is-live) .head{display:none}
.stage:not(.is-live) .card{position:static;width:auto}

.lower{display:flex;flex-wrap:wrap;gap:32px 80px;align-items:start;padding-top:8px;border-top:1px solid #e4e2dc}
.lead{flex:1 1 420px;min-width:0;margin:24px 0 0;font-size:clamp(19px,1.6vw,22px);color:#3a3a36;text-wrap:pretty}
.signup{flex:1 1 420px;min-width:0;margin-top:24px}
.form{display:flex;flex-direction:column;gap:10px}
.form-label{font-size:15px;font-weight:500}
.form-row{display:flex;flex-wrap:wrap;gap:10px}
.email{flex:1 1 240px;min-width:0;height:52px;padding:0 16px;border-radius:6px;border:1px solid #858479;background:#ffffff;color:#17181a;font:inherit;font-size:17px;box-sizing:border-box}
.submit{flex:none;height:52px;padding:0 24px;border:0;border-radius:6px;background:#f0cf7a;color:#2e2405;font:inherit;font-size:17px;font-weight:600;cursor:pointer}
.form-note{font-size:14px;color:#5f5e58}
.status{margin:0;padding:18px 20px;border-radius:8px;background:#ffffff;box-shadow:0 0 0 1px rgb(30 28 20 / 0.06),0 1px 2px rgb(30 28 20 / 0.06)}
.status:empty{padding:0;background:none;box-shadow:none}

.site-footer{width:100%;max-width:1240px;margin:0 auto;padding:24px clamp(16px,4vw,48px) 32px;box-sizing:border-box;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;font-size:14px;color:#5f5e58;border-top:1px solid #e4e2dc}

@media (prefers-reduced-motion: reduce){
.head,.card{transition:none !important}
}