.clm-fhero {
  padding-block: clamp(2.25rem, 1.8rem + 2.4vw, 3.75rem);
}

.clm-fhero h1 {
  margin: 0;
  max-width: 24ch;
  font-size: var(--hero-h1);
}

.clm-fhero .lede {
  margin: 1rem 0 0;
  max-width: 62ch;
}

.cf-wrap { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }

.cf-card {
  padding: clamp(1.25rem, 0.9rem + 1.8vw, 2.75rem);
  border: 1px solid var(--line);
  background: var(--paper);
}

.cf__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: clamp(0.85rem, 0.7rem + 0.6vw, 1.25rem);
}

.cf__field--gap { margin-top: clamp(1rem, 0.8rem + 0.8vw, 1.5rem); }

.cf__q {
  display: block;
  margin-bottom: 0.5rem;
  font-size: var(--step-14);
  font-weight: 600;
  color: var(--navy);
}

.cf__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.cf__opts .qchk input { border-radius: 50%; }

.cf__opts .qchk input:checked::after {
  width: 0.46rem;
  height: 0.46rem;
  border-radius: 50%;
  background: #fff;
  -webkit-mask: none;
  mask: none;
}

.cf__have {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 0.5rem;
}

.cf__note {
  margin: 0.85rem 0 0;
  max-width: 62ch;
  font-size: var(--step-14);
  line-height: 1.6;
  color: var(--ink-soft);
}

.cf__note--open { margin-top: 1rem; }
.cf__note a { color: var(--green-text); font-weight: 600; }
.cf__note[hidden] { display: none; }

.cf__drop {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: clamp(0.9rem, 0.7rem + 0.8vw, 1.4rem);
  border: 1px dashed #c6d2dc;
  background: var(--paper-alt);
  cursor: pointer;
}

.cf__drop:hover,
.cf__drop:focus-within {
  border-color: var(--green-text);
  border-style: solid;
}

.cf__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }

.cf__drop__icon {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--green-text);
}

.cf__drop__icon svg { width: 100%; height: 100%; }

.cf__drop__text {
  font-size: var(--step-14);
  line-height: 1.5;
  color: var(--ink-soft);
}

.cf__drop__text b { color: var(--navy); }

.cf__shots {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
}

.cf__shot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}

.cf__shot img {
  flex: none;
  width: 3rem;
  height: 3rem;
  object-fit: cover;
  background: var(--paper-alt);
}

.cf__shot__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--step-14);
  color: var(--navy);
}

.cf__shot__size {
  flex: none;
  font-size: var(--step-14);
  color: var(--muted);
}

.cf__shot__kill {
  flex: none;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--step-14);
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}

.cf__shot__kill:hover { color: var(--navy); }

.cf__go {
  margin-top: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  padding-top: clamp(1.5rem, 1.2rem + 1.4vw, 2.5rem);
  border-top: 1px solid var(--line);
}

.cf__go .btn { min-width: min(19.5rem, 100%); }

.cf__keep {
  margin: 1.1rem 0 0;
  max-width: 62ch;
  font-size: var(--step-14);
  line-height: 1.65;
  color: var(--ink-soft);
}

.cf__keep strong { color: var(--navy); }

.cf__err--form {
  margin-top: 1rem;
  max-width: 62ch;
}

.cf-done[hidden] { display: none; }

.cf-done h2 { margin: 0 0 0.75rem; }

.cf-done p {
  max-width: 62ch;
  color: var(--ink-soft);
}

.cf-done__keep {
  margin-top: 1.25rem;
  padding: clamp(1rem, 0.85rem + 0.8vw, 1.5rem);
  border-left: 4px solid var(--navy);
  background: var(--paper-alt);
}

.cf-done__keep strong { color: var(--navy); }