/* ------------------------------------------------------------------------
   Automation Readiness intake.

   Loaded only on /readiness and /blueprint, so the rest of the site does not
   carry it. Builds on .si-form in style.css rather than restating it; only
   the parts the contact form never needed (option lists, per-field errors,
   progress, the confirmation panel, the Forms embed) live here.

   Mobile first. Every rule below is the small-screen rule; the single
   media query at the bottom is the only place a wider layout is described.
   Token names match assets/si-theme.css, with the literal hex as a fallback
   so this file still renders correctly if it is ever previewed standalone.
   ------------------------------------------------------------------------ */

.si-intake-wrap {
  max-width: 660px;
}

/* ---- Progress ---------------------------------------------------------- */

/*
   A count rather than a step indicator, because all seven questions are on
   one screen. It exists to signal how short the form is, which is the single
   most useful thing to tell someone deciding whether to start.
*/
.si-intake-progress {
  margin-bottom: .5rem;
}
.si-intake-progress-bar {
  height: 4px;
  border-radius: 100px;
  background: rgba(24, 44, 67, 0.10);
  overflow: hidden;
}
.si-intake-progress-bar > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 100px;
  background: var(--si-emerald, #46B491);
  transition: width .25s ease;
}
.si-intake-progress-text {
  margin: .5rem 0 0;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--si-text-subtle-dark, #5a6d85);
}

/* ---- Questions --------------------------------------------------------- */

.si-q {
  display: grid;
  gap: .45rem;
}

.si-q-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem;
}

.si-q-label {
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--si-prussian, #182C43);
  padding: 0;
}
legend.si-q-label {
  /* A legend does not participate in grid layout in every engine, so it is
     given its own bottom spacing instead of relying on the gap. */
  margin-bottom: .35rem;
}

.si-q-optional {
  margin-left: .4rem;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--si-text-subtle-dark, #5a6d85);
}

.si-q-help {
  margin: 0;
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--si-text-subtle-dark, #5a6d85);
}

/* ---- Option lists ------------------------------------------------------ */

.si-q-options {
  display: grid;
  gap: .5rem;
  margin-top: .2rem;
}

.si-q-option {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  /* 44px minimum touch target. Most of these options wrap to two lines on a
     phone, and a mis-tap on a form this short costs a submission. */
  min-height: 44px;
  padding: .7rem .9rem;
  border: 1px solid rgba(24, 44, 67, 0.16);
  border-radius: 8px;
  background: #fff;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--si-text-body-dark, #4a5e78);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.si-q-option:hover {
  border-color: rgba(70, 180, 145, 0.55);
}
.si-q-option input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--si-emerald, #46B491);
  cursor: pointer;
}
/* :has() drives the selected style. Where it is unsupported the checkbox
   still shows state on its own, so this is presentation only and nothing
   functional depends on it. */
.si-q-option:has(input:checked) {
  border-color: var(--si-emerald, #46B491);
  background: rgba(70, 180, 145, 0.07);
}
.si-q-option:has(input:focus-visible) {
  outline: 2px solid var(--si-emerald, #46B491);
  outline-offset: 2px;
}

.si-q-other {
  display: grid;
  gap: .35rem;
  margin-top: .6rem;
}
.si-q-other > span {
  font-size: 13px;
  font-weight: 500;
  color: var(--si-text-subtle-dark, #5a6d85);
}

/* ---- Errors ------------------------------------------------------------ */

/*
   The error line is always in the DOM and always referenced by
   aria-describedby, and it is emptied rather than removed when a field
   becomes valid. Inserting the node only on failure is what makes screen
   readers miss the announcement.
*/
.si-q-error {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: #B4530C;
  min-height: 0;
}
.si-q-error:empty {
  display: none;
}

.si-q[data-invalid="1"] input[type="text"],
.si-q[data-invalid="1"] input[type="email"],
.si-q[data-invalid="1"] textarea {
  border-color: var(--si-orange, #DC740E);
  box-shadow: 0 0 0 3px rgba(220, 116, 14, 0.14);
}
.si-q[data-invalid="1"] .si-q-options {
  padding-left: .7rem;
  border-left: 3px solid var(--si-orange, #DC740E);
}

.si-intake-formerror[hidden] {
  display: none;
}

/* ---- Honeypot ---------------------------------------------------------- */

/*
   Positioned off-canvas rather than display:none. Some bots skip fields that
   are display:none specifically because it is the obvious tell.
*/
.si-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.si-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- Submit ------------------------------------------------------------ */

#si-intake-submit[aria-busy="true"] {
  opacity: .65;
  pointer-events: none;
}

.si-intake-fineprint {
  margin: -.4rem 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--si-text-subtle-dark, #5a6d85);
}

.si-intake-preview-flag code {
  font-family: var(--si-font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 12.5px;
  background: rgba(24, 44, 67, 0.07);
  padding: .1rem .35rem;
  border-radius: 4px;
}

/* ---- Confirmation ------------------------------------------------------ */

.si-intake-done {
  border-left: 3px solid var(--si-emerald, #46B491);
  background: rgba(70, 180, 145, 0.07);
  border-radius: 8px;
  padding: 1.6rem 1.5rem;
}
.si-intake-done[hidden] {
  display: none;
}
.si-intake-done:focus {
  outline: 2px solid var(--si-emerald, #46B491);
  outline-offset: 3px;
}
.si-intake-done-h {
  font-family: var(--si-font-serif, Georgia, serif);
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 .9rem;
  color: var(--si-prussian, #182C43);
}
.si-intake-done p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--si-text-body-dark, #4a5e78);
  margin: 0 0 1.1rem;
}
.si-intake-done p:last-child {
  margin-bottom: 0;
}
.si-intake-sample a {
  color: #2C7D63;
  font-weight: 600;
}
.si-intake-done-note:empty {
  display: none;
}
.si-intake-done-note {
  font-size: 13.5px !important;
  color: var(--si-text-subtle-dark, #5a6d85) !important;
}

/* ---- FAQ blocks (shared by both pages) --------------------------------- */

.si-intake-faq-section {
  border-top: 1px solid rgba(24, 44, 67, 0.08);
}
.si-intake-faq-h {
  font-family: var(--si-font-serif, Georgia, serif);
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 1.6rem;
  color: var(--si-prussian, #182C43);
}
.si-intake-faq h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 1.7rem 0 .45rem;
  color: var(--si-prussian, #182C43);
}
.si-intake-faq h3:first-child {
  margin-top: 0;
}
.si-intake-faq p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--si-text-body-dark, #4a5e78);
}

/* ---- Blueprint page ---------------------------------------------------- */

.si-blueprint-lede p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--si-text-body-dark, #4a5e78);
  margin: 0 0 .9rem;
}
.si-blueprint-lede a {
  color: #2C7D63;
  font-weight: 600;
}
.si-blueprint-sample {
  font-weight: 500;
}
.si-blueprint-short {
  font-size: 14px !important;
  color: var(--si-text-subtle-dark, #5a6d85) !important;
}

.si-blueprint-embed {
  margin: 2rem 0 1rem;
  border: 1px solid rgba(24, 44, 67, 0.12);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.si-blueprint-embed iframe {
  display: block;
  width: 100%;
  border: 0;
  /* Microsoft Forms cannot report its own height to a cross-origin parent, so
     the frame is tall enough for the long intake and scrolls internally on a
     phone rather than being clipped. */
  min-height: 720px;
}

.si-blueprint-fallback {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--si-text-subtle-dark, #5a6d85);
}
.si-blueprint-fallback a {
  color: #2C7D63;
  font-weight: 600;
}

.si-blueprint-what {
  border-top: 1px solid rgba(24, 44, 67, 0.08);
}

/* ---- Wider than a phone ------------------------------------------------ */

@media (min-width: 720px) {
  .si-q-options {
    gap: .55rem;
  }
  .si-intake-done {
    padding: 2rem 2.2rem;
  }
  .si-intake-done-h {
    font-size: 28px;
  }
  .si-blueprint-embed iframe {
    min-height: 1100px;
  }
}

/* ---- Reduced motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .si-intake-progress-bar > span,
  .si-q-option {
    transition: none;
  }
}