/* The contact page. The site stays dark; the form is the one light surface on it, because the only
   thing this page asks of a visitor is to fill it in. Card-interior colours are scoped to the card
   so the light surface never leaks into the shared dark system. */

.breadcrumb + .rd-page {
  padding-top: 40px;
}
.rd-page {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
  align-items: start;
  max-width: 1200px;
  padding-top: 96px;
  padding-bottom: 96px;
}

/* ---- left column ---- */
.rd-intro {
  position: sticky;
  top: 112px;
}
body main .rd-intro :is(h1, .rd-title) {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--color-ink);
}
body main .rd-intro :is(h1, .rd-title) em {
  font-style: normal;
  color: var(--lp-second);
}
body main .rd-lead {
  margin: 20px 0 0;
  max-width: 44ch;
  font-size: 18px;
  line-height: 1.5;
  color: var(--lp-sub);
}
.rd-next {
  margin-top: 44px;
  padding-top: 32px;
  border-top: 1px solid var(--color-rule);
}
.rd-next-label,
.rd-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-faint);
}
body main .rd-next ol {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.rd-next li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
}
.rd-next-step {
  font-family: var(--font-mono);
  font-size: 13px;
  padding-top: 2px;
  color: var(--color-accent);
}
.rd-next-copy strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-ink);
}
.rd-next-copy small {
  display: block;
  margin-top: 5px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-muted);
}
body main .rd-boundary {
  display: flex;
  gap: 11px;
  margin: 36px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--color-rule);
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-body);
}
.rd-boundary svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  color: var(--lp-faint);
}
body main .rd-contact {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--color-muted);
}
.rd-contact a {
  color: var(--color-accent);
}

/* ---- the card ---- */
.rd-card {
  /* Scoped light palette: these names exist only inside the card. */
  --rd-paper: #f7f8fa;
  --rd-ink: #0e1116;
  --rd-soft: #5b6470;
  --rd-field: #ffffff;
  --rd-line: #d9dde3;
  --rd-line-hover: #b8bec7;
  --rd-accent: #3563e9;
  --rd-accent-soft: #eef3fe;
  --rd-disabled: #c9ced6;
  --rd-error: #c93a3a;
  position: relative;
  padding: 40px;
  border-radius: 16px;
  background: var(--rd-paper);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06),
    0 26px 70px rgba(0, 0, 0, 0.45);
  color: var(--rd-ink);
}
.rd-card-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 28px;
}
.rd-step-count {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rd-soft);
}
.rd-progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.rd-progress > span {
  height: 3px;
  border-radius: 2px;
  background: var(--rd-line);
  transition: background var(--dur-feedback) var(--ease-out);
}
.rd-progress > span.is-on {
  background: var(--rd-accent);
}
/* The card holds its height between steps so the page does not jump under the pointer. */
.rd-step-area {
  min-height: 416px;
}
.rd-card .rd-step + .rd-step {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--rd-line);
}
/* Once the steps are live they stand alone, so the no-JS separators come off. */
.rd-card form[data-stepped] .rd-step + .rd-step {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
body main .rd-card .rd-step-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
}
body main .rd-card .rd-step-lead {
  margin: 8px 0 26px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--rd-soft);
}

/* ---- intent choices ---- */
.rd-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rd-choice {
  /* The hidden radio sits inside its own choice; without this it is sized and placed against the
     card and widens the page on phones when the step does not animate (reduced motion, no JS). */
  position: relative;
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 14px;
  align-items: start;
  padding: 13px 18px;
  border: 1px solid var(--rd-line);
  border-radius: 10px;
  background: var(--rd-field);
  cursor: pointer;
  transition:
    border-color var(--dur-feedback) var(--ease-out),
    background var(--dur-feedback) var(--ease-out);
}
.rd-choice:hover {
  border-color: var(--rd-line-hover);
}
.rd-choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.rd-choice-dot {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--rd-line-hover);
  border-radius: 50%;
  background: var(--rd-field);
  transition: border-color var(--dur-feedback) var(--ease-out);
}
.rd-choice:has(input:checked) {
  border-color: var(--rd-accent);
  background: var(--rd-accent-soft);
}
.rd-choice:has(input:checked) .rd-choice-dot {
  border-color: var(--rd-accent);
  border-width: 5px;
}
.rd-choice:has(input:focus-visible) {
  outline: 2px solid var(--rd-accent);
  outline-offset: 2px;
}
.rd-choice-copy strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--rd-ink);
}
.rd-choice-copy small {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rd-soft);
}

/* ---- fields ---- */
.rd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.rd-field + .rd-field {
  margin-top: 22px;
}
.rd-grid .rd-field + .rd-field {
  margin-top: 0;
}
body main .rd-card :is(.rd-field label, .rd-label) {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--rd-ink);
}
body main .rd-card .rd-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rd-soft);
}
.rd-card :is(.rd-field label, .rd-workload-label) span[aria-hidden] {
  color: var(--rd-accent);
}
.rd-card .rd-field label small {
  font-weight: 400;
  color: var(--rd-soft);
}
body.page-inner main .rd-card form :is(input:not([type='radio']), select, textarea) {
  width: 100%;
  box-sizing: border-box;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  background: var(--rd-field);
  /* 16px keeps iOS from zooming the page when a field takes focus. */
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--rd-ink);
  transition:
    border-color var(--dur-feedback) var(--ease-out),
    box-shadow var(--dur-feedback) var(--ease-out);
}
body.page-inner main .rd-card form textarea {
  height: auto;
  min-height: 112px;
  padding: 13px 14px;
  line-height: 1.55;
  resize: vertical;
}
body.page-inner main .rd-card form select {
  appearance: none;
  padding-right: 40px;
  background-image:
    linear-gradient(45deg, transparent 50%, #5b6470 50%),
    linear-gradient(135deg, #5b6470 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 21px,
    calc(100% - 15px) 21px;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
}
body.page-inner main .rd-card form :is(input, select, textarea)::placeholder {
  color: #99a1ad;
}
body.page-inner main .rd-card form :is(input, select, textarea):hover {
  border-color: var(--rd-line-hover);
}
body.page-inner main .rd-card form :is(input, select, textarea):focus {
  outline: none;
  border-color: var(--rd-accent);
  box-shadow: 0 0 0 3px rgba(53, 99, 233, 0.22);
}
/* A field is only wrong once this page has said so. The browser's own `:user-invalid` would mark
   an untouched required field the moment a step is submitted, so inside the card the error look
   follows `aria-invalid`, which the script sets alongside the message. */
body.page-inner main .rd-card form :is(input, select, textarea):user-invalid {
  border-color: var(--rd-line);
  background: var(--rd-field);
  box-shadow: none;
}
body.page-inner main .rd-card form :is(input, select, textarea)[aria-invalid='true'] {
  border-color: var(--rd-error);
  background: var(--rd-field);
  box-shadow: 0 0 0 3px rgba(201, 58, 58, 0.16);
}
body.page-inner main .rd-card form :is(input, select, textarea):disabled {
  border-color: var(--rd-line);
  background: #eef0f3;
  color: #6b7380;
  cursor: not-allowed;
}
body.page-inner main .rd-card .rd-error {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--rd-error);
}

/* ---- short choices ---- */
.rd-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rd-pill {
  position: relative;
}
.rd-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.rd-pill span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--rd-line);
  border-radius: 19px;
  background: var(--rd-field);
  font-size: 14px;
  color: var(--rd-ink);
  cursor: pointer;
  transition:
    border-color var(--dur-feedback) var(--ease-out),
    background var(--dur-feedback) var(--ease-out);
}
.rd-pill span:hover {
  border-color: var(--rd-line-hover);
}
.rd-pill input:checked + span {
  border-color: var(--rd-accent);
  background: var(--rd-accent-soft);
  color: var(--rd-accent);
  font-weight: 500;
}
.rd-pill input:focus-visible + span {
  outline: 2px solid var(--rd-accent);
  outline-offset: 2px;
}

body main .rd-card .rd-note {
  margin: 22px 0 0;
  font-size: 13.5px;
  color: var(--rd-soft);
}
body.page-inner main .rd-card .rd-hint {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--rd-soft);
}
body main .rd-card .rd-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--rd-soft);
  cursor: pointer;
}
/* A real checkbox, not a text field: undo the shared field box. */
body.page-inner main .rd-card .rd-consent input[type='checkbox'] {
  flex: none;
  width: 18px;
  min-width: 0;
  height: 18px;
  min-height: 0;
  margin: 1px 0 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  accent-color: var(--rd-accent);
  appearance: auto;
}
.rd-card .rd-consent a {
  color: var(--rd-accent);
  text-underline-offset: 2px;
}

/* ---- foot ---- */
/* Tight enough that the first step's action stays in a 1280 x 800 first screen. */
.rd-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rd-line);
}
.rd-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--rd-soft);
  cursor: pointer;
}
.rd-back:hover {
  color: var(--rd-ink);
}
.rd-back[hidden] {
  display: none;
}
.rd-submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin-left: auto;
  padding: 0 24px;
  border: 0;
  border-radius: 8px;
  background: var(--rd-ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  cursor: pointer;
  transition: background var(--dur-feedback) var(--ease-out);
}
.rd-submit:hover:not(:disabled) {
  background: #272c35;
}
.rd-submit:disabled {
  background: var(--rd-disabled);
  color: #ffffff;
  cursor: not-allowed;
}
.rd-submit svg {
  width: 17px;
  height: 17px;
}
.rd-card :is(.rd-back, .rd-submit):focus-visible {
  outline: 2px solid var(--rd-accent);
  outline-offset: 3px;
}
body main .rd-message {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rd-soft);
}
body main .rd-message[data-state='error'] {
  color: var(--rd-error);
}

/* ---- sent ---- */
.rd-success {
  padding: 8px 0;
}
.rd-success-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--rd-accent-soft);
  color: var(--rd-accent);
}
.rd-success-mark svg {
  width: 24px;
  height: 24px;
}
body main .rd-card .rd-success h2 {
  margin: 22px 0 0;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--rd-ink);
}
body main .rd-card .rd-success > p {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--rd-soft);
}
.rd-success-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--rd-line);
}
.rd-success-links a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 15px;
  color: var(--rd-accent);
}
.rd-success-links svg {
  width: 16px;
  height: 16px;
}
.rd-card .rd-contact {
  margin-top: 24px;
  color: var(--rd-soft);
}
.rd-card .rd-contact a {
  color: var(--rd-accent);
}

@media (prefers-reduced-motion: no-preference) {
  .rd-step.is-entering {
    animation: rd-step-in 200ms var(--ease-out) both;
  }
}
@keyframes rd-step-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1023px) {
  .breadcrumb + .rd-page {
    padding-top: 28px;
  }
  .rd-page {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-bottom: 72px;
  }
  /* On one column the heading leads, then the email fallback and the card; the rest reads after. */
  .rd-intro {
    position: static;
    display: contents;
  }
  .rd-intro > .lp-eyebrow {
    order: 1;
  }
  body main .rd-intro :is(h1, .rd-title) {
    order: 2;
    font-size: 34px;
  }
  body main .rd-lead,
  .rd-intro > .rd-contact {
    order: 3;
  }
  body main .rd-intro > .rd-contact {
    margin-top: -20px;
  }
  .rd-card {
    order: 4;
    padding: 24px;
  }
  .rd-next {
    order: 5;
    margin-top: 0;
  }
  .rd-boundary {
    order: 6;
  }
  .rd-grid {
    grid-template-columns: 1fr;
  }
  .rd-step-area {
    min-height: 0;
  }
  .rd-choice {
    padding: 14px 15px;
  }
}

/* The same form as the last section of the Company page: it lines up with the sections above. */
.rd-page.rd-embedded {
  max-width: none;
  padding-top: var(--space-section);
}