/* Join and fee: one-job pages. Copy on one side, a small wall of plates on the other. */
.util { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 96px); align-items: center; min-height: calc(100svh - 68px); padding-top: 32px; padding-bottom: 32px; }
.util-art { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.util-art .art:nth-child(3n+2) { transform: translateY(26px); }
.util-art .art:nth-child(4) { transform: rotate(-2deg); }
.util-copy { max-width: 620px; }
.codecard { margin-top: 26px; padding: 18px; }
.coderow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.code { font-weight: 800; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: .02em; }
.jsteps { display: grid; gap: 14px; margin-top: 26px; }
.jsteps li { list-style: none; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
.jsteps li > b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--ground); font-weight: 800; font-size: 13px; }
.jsteps strong { display: block; } .jsteps span { color: var(--ink2); }
.grp { margin-top: 22px; width: min(380px, 100%); }
.feecalc { margin-top: 26px; padding: 18px; display: grid; gap: 8px; max-width: 460px; }
.feecalc input { height: 46px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--well); font-weight: 800; font-size: 20px; }
.feecalc input:focus { outline: 2.5px solid var(--green); }
.feecalc .cc-step { min-height: 46px; }
.feeline { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; color: var(--ink2); }
.feeline.tot { padding-top: 10px; box-shadow: inset 0 1px 0 var(--rule2); color: var(--ink); font-weight: 700; } .feeline.tot b { font-size: 22px; letter-spacing: -.03em; }
@media (max-width: 900px) { .util { grid-template-columns: 1fr; min-height: 0; } .util-art { order: 2; } }
.util > * { min-width: 0; }
.feecalc input { width: 100%; min-width: 0; }
@media (max-width: 900px) { .util { grid-template-columns: minmax(0, 1fr); } }