/* ============================================================
   submit.css — submit.html only.
   Hero, four-step list, rule cards, bundle code blocks, and the
   submission form.
   ============================================================ */

/* The hero sits inside a .lp-inner (padded 5rem 2rem by style.css's shared
   band layout), so it must not re-pad itself — that was doubling the hero's
   vertical whitespace once the bands became shared. Only the centring stays. */
.sub-hero { text-align: center; }
.sub-title {
  font: 700 clamp(2rem, 4vw, 2.8rem)/1.15 'Google Sans', system-ui, sans-serif;
  letter-spacing: -.03em; margin: .4rem 0 1.1rem;
}
.sub-lead { font-size: 1.03rem; line-height: 1.7; color: var(--text-muted); max-width: 720px; margin: 0 auto; }
.sub-cta { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; margin-top: 1.8rem; }

/* ── Steps ────────────────────────────────────────────────── */
.sub-steps {
  list-style: none; margin: 2.2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem;
  counter-reset: sub-step;
}
.sub-step {
  position: relative; background: var(--on-bg); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.6rem 1.4rem 1.4rem;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.sub-step:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.sub-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary-bg); color: var(--primary);
  font: 700 .95rem/1 'Google Sans', sans-serif; margin-bottom: .9rem;
}
.sub-step h3 { font: 700 1.02rem/1.3 'Google Sans', sans-serif; margin: 0 0 .5rem; }
.sub-step p { font-size: .87rem; line-height: 1.6; color: var(--text-muted); margin: 0 0 .9rem; }
.sub-step code {
  display: block; padding: .55rem .7rem; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border);
  font: 500 .74rem/1.5 ui-monospace, 'SFMono-Regular', Menlo, monospace;
  color: var(--text); overflow-x: auto; white-space: pre;
}

/* ── Rule cards ───────────────────────────────────────────── */
.sub-rules {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.1rem; margin-top: 2rem;
}
.sub-rule {
  background: var(--on-bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem;
}
.sub-rule i { font-size: 1.1rem; color: var(--primary); margin-bottom: .8rem; display: block; }
.sub-rule h4 { font: 700 .95rem/1.3 'Google Sans', sans-serif; margin: 0 0 .4rem; }
.sub-rule p { font-size: .85rem; line-height: 1.6; color: var(--text-muted); margin: 0; }

/* ── Bundle code blocks ───────────────────────────────────── */
.sub-code-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem; margin-top: 1.8rem;
}
.sub-code {
  background: var(--on-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
.sub-code-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: .7rem 1rem; background: var(--surface); border-bottom: 1px solid var(--border);
  font: 700 .78rem/1 'Google Sans', sans-serif; color: var(--text-muted);
}
.sub-code pre { margin: 0; padding: 1rem; overflow-x: auto; }
.sub-code code {
  font: 500 .78rem/1.65 ui-monospace, 'SFMono-Regular', Menlo, monospace; color: var(--text); white-space: pre;
}
.sub-copy {
  padding: .3rem .7rem; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--on-bg); color: var(--text-muted); font: 600 .72rem/1 'Google Sans', sans-serif;
  cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
}
.sub-copy:hover { border-color: var(--primary); color: var(--primary); }

/* ── Form ─────────────────────────────────────────────────── */
.sub-form { display: flex; flex-direction: column; gap: 1.1rem; }
.sub-field { display: flex; flex-direction: column; gap: .4rem; }
.sub-field label { font: 600 .82rem/1 'Google Sans', sans-serif; color: var(--text); }
.sub-field input, .sub-field select, .sub-field textarea {
  padding: .68rem .85rem; border-radius: var(--radius); border: 1px solid var(--border);
  background: var(--on-bg); color: var(--text); font: 500 .88rem/1.5 'Noto Sans', sans-serif;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.sub-field input:focus, .sub-field select:focus, .sub-field textarea:focus { outline: none; border-color: var(--primary); }
.sub-field textarea { resize: vertical; min-height: 90px; }
.sub-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.1rem; }
.sub-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .4rem; }
.sub-hint { font-size: .82rem; color: var(--text-muted); min-height: 1.4em; margin: 0; }

/* Single-column fallback below the mobile breakpoint: the three-select row
   collapses so nothing overflows the padded band on narrow screens. */
@media (max-width: 640px) {
  .sub-row { grid-template-columns: 1fr; }
}