/* ════════════════════════════════════════════════════════════════════════════
   Farmbox — sign-in and subscribe
   ════════════════════════════════════════════════════════════════════════════ */

.duo { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100svh; }
@media (max-width: 940px) { .duo { grid-template-columns: 1fr; min-height: 0; } }

.duo__art { position: relative; overflow: hidden; background: var(--forest); }
@media (max-width: 940px) { .duo__art { min-height: 300px; } }
.duo__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.duo__art .scrimx { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(10,18,13,.62), rgba(10,18,13,.86)); }
.duo__quote {
  position: absolute; inset: auto 0 0 0; padding: clamp(28px, 4vw, 64px); color: var(--bone);
}
.duo__quote h2 { font-size: clamp(1.7rem, 2.7vw, 2.7rem); color: var(--bone); margin-bottom: 16px; }
.duo__quote h2 em { color: var(--leaf-pale); }
.duo__quote p { color: rgba(246,242,233,.84); max-width: 42ch; font-size: 1rem; }

.duo__form { display: flex; align-items: center; justify-content: center; padding: clamp(30px, 5vw, 76px) var(--gutter); }
.formcard { width: 100%; max-width: 480px; }
.formcard .brand { margin-bottom: clamp(28px, 4vw, 48px); }
.formcard h1 { font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: 14px; }
.formcard > p.lead { margin-bottom: 32px; }
.formcard .lead, .duo__quote p { font-family: var(--sans); font-weight: 400; font-size: 1rem; line-height: 1.7; }
.formcard .lead { margin-bottom: 26px; }

.steps-dots { display: flex; gap: 7px; margin-bottom: 26px; }
.steps-dots i { width: 22px; height: 2px; background: var(--rule); display: block; transition: background var(--t-mid); }
.steps-dots i.is-on { background: var(--leaf-deep); }

.otp-input {
  font-family: var(--serif); font-size: 2rem; letter-spacing: .5em;
  text-align: center; padding: 18px 10px 18px 20px;
  font-variant-numeric: tabular-nums;
}
.formrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 520px) { .formrow { grid-template-columns: 1fr; } }
.formactions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.textlink { background: none; border: 0; cursor: pointer; font-family: var(--sans); font-size: var(--fs-small); color: var(--stone); text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.textlink:hover { color: var(--forest); }
.notice { border-left: 2px solid var(--leaf); padding: 12px 0 12px 16px; margin-bottom: 24px; font-size: .96rem; color: var(--stone); }
.notice--bad { border-color: var(--terracotta); color: var(--terracotta); }

/* ── Tier picker ────────────────────────────────────────────────────────── */
.pick { display: grid; gap: 10px; margin-bottom: var(--s6); }
.pick label {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  background: var(--paper); padding: 18px; border: 1px solid var(--rule); cursor: pointer;
  transition: background var(--t-fast) var(--ease-out);
}
.pick label:hover { background: #fff; }
.pick input { accent-color: var(--leaf-deep); width: 16px; height: 16px; }
.pick input:checked + .pick__body { }
.pick label:has(input:checked) { background: var(--forest); color: var(--bone); }
.pick label:has(input:checked) .pick__meta { color: rgba(246,242,233,.6); }
.pick label:has(input:checked) .pick__price { color: var(--leaf); }
.pick__body b { display: block; font-family: var(--serif); font-size: 1.12rem; font-weight: 400; }
.pick__meta { display: block; font-family: var(--sans); font-size: var(--fs-micro); letter-spacing: .05em; color: var(--stone-2); margin-top: 4px; }
.pick__price { font-family: var(--serif); font-size: 1.1rem; white-space: nowrap; }
.pick__price small { display: block; font-family: var(--sans); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-top: 3px; }

.done { text-align: center; }
.done__mark { width: 56px; height: 56px; margin: 0 auto 24px; }

/* Which fields we actually need. */
.req { text-decoration: none; color: var(--terracotta); margin-left: 2px; }
.opt { font-style: normal; letter-spacing: .08em; color: var(--stone-2); text-transform: none; font-size: 10px; margin-left: 4px; }
.pick__role { display: block; font-family: var(--sans); font-size: var(--fs-micro); letter-spacing: .05em; color: var(--stone-2); margin-top: 3px; }
label:has(input:checked) .pick__role { color: rgba(246,242,233,.7); }

@media (max-width: 940px) {
  .duo__art { min-height: 240px; }
  .duo__quote { padding: 28px var(--gutter); }
}
@media (max-width: 520px) {
  .pick label { grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; padding: 16px; }
  .pick__price { grid-column: 2; display: flex; align-items: baseline; gap: 8px; }
  .pick__price small { font-size: .75rem; letter-spacing: 0; text-transform: none; }
}