* { box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       color: #1a1a1a; background: #fafafa; margin: 0; line-height: 1.5; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 40px 20px 80px; }
.hidden { display: none !important; }
h1 { font-size: 2rem; line-height: 1.25; margin-bottom: 12px; }
h2 { font-size: 1.4rem; margin: 28px 0 8px; }
h3 { font-size: 1.05rem; margin: 0 0 4px; }
.sub { font-size: 1.1rem; color: #444; }
.fine { font-size: 0.85rem; color: #666; }
.foot { margin-top: 32px; border-top: 1px solid #e5e5e5; padding-top: 16px; }

form { display: flex; gap: 10px; margin: 20px 0 8px; flex-wrap: wrap; }
input[type=text], input[type=email], select {
  font-size: 1rem; padding: 12px 14px; border: 1px solid #ccc; border-radius: 8px;
  min-width: 260px; flex: 1; max-width: 420px; background: #fff; }
button[type=submit], .tab {
  font-size: 1rem; padding: 12px 22px; border: none; border-radius: 8px;
  background: #111; color: #fff; cursor: pointer; }
button[type=submit]:hover { background: #333; }
.linklike { background: none; border: none; color: #0b5fff; cursor: pointer;
            font-size: inherit; padding: 0; text-decoration: underline; }
.error { color: #b00020; background: #fdecea; border: 1px solid #f5c6cb;
         padding: 12px 16px; border-radius: 8px; margin-top: 12px; max-width: 640px; }
.success { color: #0a6b2d; background: #e6f4ea; border: 1px solid #b7e0c3;
           padding: 12px 16px; border-radius: 8px; margin-top: 12px; }

/* loading steps */
#steps { list-style: none; padding: 0; max-width: 480px; }
#steps li { padding: 10px 0; color: #999; display: flex; align-items: center; gap: 10px; }
#steps .dot { width: 12px; height: 12px; border-radius: 50%; background: #ddd; display: inline-block; }
#steps li.active { color: #111; font-weight: 600; }
#steps li.active .dot { background: #0b5fff; animation: pulse 1s infinite alternate; }
#steps li.done { color: #0a6b2d; }
#steps li.done .dot { background: #0a6b2d; }
@keyframes pulse { from { opacity: .4; } to { opacity: 1; } }

/* results */
.seed-label { display: block; margin: 12px 0; font-size: 0.95rem; }
.seed-label select { margin-left: 8px; max-width: 520px; }
.tabs { display: flex; gap: 8px; margin: 18px 0 4px; flex-wrap: wrap; }
.tab { background: #e8e8e8; color: #111; }
.tab.active { background: #111; color: #fff; }
.blurb { font-style: italic; color: #444; margin: 4px 0 16px; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
@media (max-width: 760px) { .cols { grid-template-columns: 1fr; } }
.col { background: #fff; border: 1px solid #e5e5e5; border-radius: 12px; padding: 18px; }
.col.highlight { border: 2px solid #111; }
.cards { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.card { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit;
        border: 1px solid #eee; border-radius: 10px; padding: 8px; background: #fff; }
.card:hover { border-color: #bbb; }
.card img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: #f2f2f2; }
.noimg { width: 64px; height: 64px; border-radius: 8px; background: #eee; flex-shrink: 0; }
.card-title { font-size: 0.92rem; font-weight: 600; }
.card-price { font-size: 0.88rem; color: #333; margin-top: 2px; }
.card-price s { color: #999; margin-left: 6px; }
.badge { background: #b00020; color: #fff; font-size: 0.7rem; padding: 2px 8px;
         border-radius: 20px; margin-left: 6px; vertical-align: middle; }

.cta { background: #111; color: #fff; border-radius: 14px; padding: 28px; margin-top: 36px; }
.cta h2 { margin-top: 0; color: #fff; }
.cta p { color: #ccc; }
.cta input { background: #fff; }
.cta .fine { color: #999; }
.why { display: inline-block; font-size: 0.7rem; font-weight: 600; color: #1a5d3a;
       background: #e3f4ea; padding: 1px 7px; border-radius: 999px; margin-bottom: 4px; }
.card.fresh { border-color: #1a5d3a; box-shadow: inset 3px 0 0 #1a5d3a; }