/* The conversion page's closing inquiry — one form, two lead types.
 *
 * Only what the shared sheets do not already carry. .form, .fields, .field,
 * .field--full, .field__req, .field__hint, .form__submit, .form__note,
 * .feedback, .btn, .eyebrow, .note-line, .section and .container come from
 * style.css, sections.css and pages.css, and .sol-project__grid,
 * .sol-project__intro and .sol-project__form come from solution-page.css.
 * Restating one of those here would be a second copy of a rule that already has
 * one, so anything below that looks like a missing reset is the shared rule
 * doing its job.
 *
 * This sheet owns four things:
 *
 *   .acn-inquiry           the section, the page's single id="contact".
 *   .acn-lead              the lead-type choice: a fieldset of two radio cards.
 *   .acn-lead__group       one set of questions, hidden and disabled by
 *                          assets/js/conversion-form.js when it is not the
 *                          answer being given.
 *   .acn-lead__tail        the one box both readings share.
 *
 * Every colour, radius and space is a token from assets/css/tokens.css. Nothing
 * is positioned absolutely and nothing moves beyond a border and a ground
 * changing colour, so the block holds at 320px as well as at 1440px. */

/* The anchor every button on the page jumps to. The header is fixed, so the
   section keeps the same offset under it that the site's other anchored blocks
   keep. */
.acn-inquiry{scroll-margin-top:calc(var(--header-height) + var(--space-3))}

/* ------------------------------------------------------- The lead type -- */
/* Two answers side by side on a desk, stacked on a phone. The answer is the
   label, so the whole card is pressable. The input is clipped rather than
   hidden — display or visibility would take the keyboard's way of reaching the
   choice away — and it is left in the flow at 1px instead of being positioned
   absolutely, which the brief for this component excludes. */
.acn-lead{
  min-width:0;
  margin:0 0 var(--space-4);
  padding:var(--space-2) var(--space-3) var(--space-3);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
}

.acn-lead__legend{
  padding:0 6px;
  font-size:13px;
  font-weight:600;
  color:var(--color-navy);
}

.acn-lead__choices{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-2);
}

.acn-lead__option{
  display:flex;
  align-items:stretch;
  min-width:0;
  margin:0;
  cursor:pointer;
}

.acn-lead__input{
  flex:none;
  width:1px;
  height:1px;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  background:none;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.acn-lead__choice{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-width:0;
  gap:2px;
  padding:var(--space-2);
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-pale);
  transition:border-color var(--transition-fast), background-color var(--transition-fast);
}

.acn-lead__option:hover .acn-lead__choice{border-color:var(--color-accent)}
.acn-lead__option:focus-within{outline:2px solid var(--color-focus);outline-offset:2px}

.acn-lead__name{
  font-size:15px;
  font-weight:600;
  color:var(--color-navy);
}

.acn-lead__note{
  font-size:13px;
  line-height:1.5;
  color:var(--color-muted);
}

/* The chosen answer says so twice: the card takes the action colour and the
   name with it, so a choice is never read by colour alone. The sibling rule is
   the direct read of :checked and needs no :has() to hold it up. */
.acn-lead__input:checked + .acn-lead__choice{
  border-color:var(--color-accent);
  background:var(--color-accent-pale);
}

.acn-lead__input:checked + .acn-lead__choice .acn-lead__name{color:var(--color-accent-dark)}

/* -------------------------------------------------- The question sets -- */
/* The script hides the set that is not being answered and disables its
   controls, so nothing of the other reading travels with the POST. The [hidden]
   rule is repeated here on purpose: a display this sheet set on the group would
   out-specify the attribute, and the group would stay on screen. */
.acn-lead__group{margin-top:var(--space-4)}
.acn-lead__group[hidden]{display:none}
/* The first set inside the "more details" panel starts at the panel's own
   padding: the gap belongs between the sets, not above the first one. */
.form__more .acn-lead__group:first-child{margin-top:0}

.acn-lead__group-title{
  margin:0 0 var(--space-2);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--color-muted);
}

.acn-lead__tail{margin-top:var(--space-4)}

@media (max-width:760px){
  .acn-lead__choices{grid-template-columns:minmax(0,1fr)}
}

@media (prefers-reduced-motion:reduce){
  .acn-lead__choice{transition:none}
}