/* TEEEJ fit — gym onboarding microsite (teeejfit.ai/onboardingform).
   Built from TEEEJ_Fit_Onboarding-Microsite_02.psd, a 1920px comp. calc(N * var(--px)) is
   N PSD pixels: 1:1 at 1920 and wider, scaling down below it. Every size has a floor
   so smaller screens stay readable. */

:root {
  --px: min(calc(100vw / 1920), 1px);
  --ink: #000000;
  --charcoal: #454545;
  --field: #f7f7f7;
  --blush: #fdf3ee;
  --placeholder: #9a9a9a;
  --error: #b93a0e;
  /* acumin-pro is the PSD face; it only applies if an Adobe Fonts kit is ever added. */
  --font: "acumin-pro", "Archivo", "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  line-height: 1.2;
}

h1,
h2,
p {
  margin: 0;
}

img {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.ob-header,
.ob-main {
  width: min(1548px, 100% - 2 * max(1.25rem, calc(186 * var(--px))));
  margin-inline: auto;
}

/* The PSD's proportional margins get too wide on a phone. */
@media (max-width: 767px) {
  .ob-header,
  .ob-main {
    width: calc(100% - 2.5rem);
  }
}

/* Header ---------------------------------------------------------------- */

.ob-header {
  padding-top: max(2.5rem, calc(145 * var(--px)));
  text-align: center;
}

.ob-logo {
  display: inline-block;
  vertical-align: top;
}

.ob-logo img {
  display: block;
  width: max(12rem, calc(415 * var(--px)));
  height: auto;
}

.ob-header h1 {
  margin-top: max(1.25rem, calc(53 * var(--px)));
  font-size: max(1.625rem, calc(44 * var(--px)));
  font-weight: 300;
  line-height: 1.2;
}

.ob-lede {
  margin-top: max(0.5rem, calc(17 * var(--px)));
  font-size: max(1rem, calc(20 * var(--px)));
}

.ob-callout {
  margin-top: max(2rem, calc(96 * var(--px)));
  padding: max(1.25rem, calc(37.5 * var(--px))) max(1.25rem, calc(40 * var(--px)));
  background: var(--blush);
  text-align: center;
}

.ob-callout p {
  max-width: 40em;
  margin-inline: auto;
  font-size: max(0.9375rem, calc(20 * var(--px)));
}

/* Sections -------------------------------------------------------------- */

.ob-section,
.ob-success {
  margin-top: max(2.5rem, calc(138 * var(--px)));
}

.ob-section + .ob-section {
  margin-top: max(3rem, calc(139 * var(--px)));
}

.ob-steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: max(4px, calc(11 * var(--px)));
}

.ob-steps span {
  height: max(6px, calc(14 * var(--px)));
  border-radius: 999px;
  background: var(--field);
}

.ob-steps .is-on {
  background: var(--charcoal);
}

.ob-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 2rem;
  margin-top: max(1.5rem, calc(70 * var(--px)));
}

.ob-section-head h2,
.ob-success h2 {
  font-size: max(1.3125rem, calc(30 * var(--px)));
  font-weight: 400;
}

.ob-eyebrow {
  color: var(--charcoal);
  font-size: max(0.75rem, calc(16 * var(--px)));
  text-transform: uppercase;
}

.ob-sub,
.ob-note {
  max-width: 60em;
  font-size: max(0.875rem, calc(16 * var(--px)));
}

.ob-sub {
  margin-top: max(0.375rem, calc(10 * var(--px)));
}

.ob-note {
  margin-top: max(0.75rem, calc(27 * var(--px)));
}

.ob-rule {
  width: max(3.5rem, calc(88 * var(--px)));
  height: 2px;
  margin-top: max(1.25rem, calc(55 * var(--px)));
  background: var(--ink);
}

/* Fields ---------------------------------------------------------------- */

.ob-field {
  margin-top: max(1.5rem, calc(69 * var(--px)));
}

.ob-field + .ob-field {
  margin-top: max(1.5rem, calc(60 * var(--px)));
}

.ob-field > label,
.ob-label {
  display: block;
  margin-bottom: max(0.5rem, calc(24 * var(--px)));
  font-size: max(1rem, calc(20 * var(--px)));
}

.ob-input {
  --field-font: max(16px, calc(20 * var(--px)));
  --field-height: max(3.25rem, calc(129 * var(--px)));
  display: block;
  width: 100%;
  min-height: var(--field-height);
  margin: 0;
  /* Vertical padding centres one line of text in the PSD's 129px box. */
  padding: calc((var(--field-height) - var(--field-font) * 1.4) / 2) max(0.875rem, calc(30 * var(--px)));
  border: 0;
  border-radius: max(10px, calc(15 * var(--px)));
  background: var(--field);
  color: var(--ink);
  font: 300 var(--field-font) / 1.4 var(--font);
  appearance: none;
  resize: none;
  transition: box-shadow 0.15s ease;
}

.ob-input--tall {
  min-height: max(12rem, calc(548 * var(--px)));
}

.ob-input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

.ob-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 1.5px var(--charcoal);
}

.ob-input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1.5px var(--error);
}

.ob-error,
.ob-upload-note {
  margin-top: 0.5rem;
  color: var(--error);
  font-size: max(0.8125rem, calc(16 * var(--px)));
}

.ob-upload-note:empty {
  display: none;
}

/* Uploads --------------------------------------------------------------- */

.ob-upload {
  position: relative;
  /* The PSD sits the upload button further from its label than a text box. */
  padding: calc(20 * var(--px)) 0 calc(18 * var(--px));
}

.ob-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.ob-upload-button {
  display: inline-flex;
  align-items: center;
  gap: max(0.5rem, calc(16 * var(--px)));
  min-height: max(2.75rem, calc(56 * var(--px)));
  padding: 0 max(1rem, calc(31 * var(--px)));
  border: 1px dashed var(--ink);
  border-radius: 999px;
  font-size: max(0.9375rem, calc(26 * var(--px)));
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease;
}

.ob-upload-button svg {
  flex: none;
  width: max(1rem, calc(22 * var(--px)));
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ob-upload-input:focus-visible + .ob-upload-button {
  outline: 2px solid var(--charcoal);
  outline-offset: 3px;
}

.ob-upload.is-dragging .ob-upload-button {
  border-style: solid;
  background: var(--blush);
}

@media (hover: hover) {
  .ob-upload-button:hover {
    background: var(--field);
  }
}

.ob-files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: max(0.75rem, calc(18 * var(--px))) 0 0;
  padding: 0;
  list-style: none;
}

.ob-file {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  max-width: 100%;
  padding: 0.25rem 0.25rem 0.25rem 1rem;
  border-radius: 999px;
  background: var(--field);
  font-size: max(0.8125rem, calc(16 * var(--px)));
}

.ob-file-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ob-file-size {
  color: var(--charcoal);
  white-space: nowrap;
}

.ob-file-remove {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--charcoal);
  font: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.ob-file-remove:hover,
.ob-file-remove:focus-visible {
  background: #e4e4e4;
  outline: none;
}

/* Close-out ------------------------------------------------------------- */

.ob-callout--closing {
  margin-top: max(2rem, calc(72 * var(--px)));
  padding-block: max(1.25rem, calc(44 * var(--px)));
}

.ob-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: max(0.75rem, calc(21 * var(--px)));
  margin-top: max(2rem, calc(76 * var(--px)));
}

.ob-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: max(8.5rem, calc(218 * var(--px)));
  min-height: max(2.75rem, calc(56 * var(--px)));
  padding: 0 1.5rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font: 500 max(0.9375rem, calc(20 * var(--px))) / 1 var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.ob-button:focus-visible {
  outline: 2px solid var(--charcoal);
  outline-offset: 3px;
}

.ob-button--outline {
  background: #ffffff;
  color: var(--ink);
}

.ob-button--solid {
  border-color: var(--charcoal);
  background: var(--charcoal);
  color: #ffffff;
}

.ob-button--solid:disabled {
  opacity: 0.75;
  cursor: progress;
}

@media (hover: hover) {
  .ob-button--outline:hover {
    background: var(--field);
  }

  .ob-button--solid:not(:disabled):hover {
    border-color: #2b2b2b;
    background: #2b2b2b;
  }
}

/* The notice under the Complete button. The footer carries the same two links,
   but this is the point where personal data actually leaves the visitor's
   machine, so the policies are named here too — quietly, so it reads as a
   footnote to the button rather than competing with it. */
.ob-consent {
  max-width: 34em;
  margin: max(1rem, calc(24 * var(--px))) auto 0;
  font-size: max(0.8rem, calc(16 * var(--px)));
  line-height: 1.5;
  color: var(--placeholder);
  text-align: center;
}

.ob-consent a {
  /* Light background here, unlike the footer — these need the body ink, not white. */
  color: var(--charcoal);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: color 160ms ease;
}

.ob-consent a:hover,
.ob-consent a:focus-visible {
  color: var(--ink);
}

.ob-status {
  max-width: 40em;
  margin: 1.25rem auto 0;
  font-size: max(0.875rem, calc(18 * var(--px)));
  text-align: center;
}

.ob-status:empty {
  display: none;
}

.ob-status.is-error {
  color: var(--error);
}

.ob-success {
  padding: max(2.5rem, calc(80 * var(--px))) max(1.25rem, calc(40 * var(--px)));
  background: var(--blush);
  text-align: center;
}

.ob-success:focus {
  outline: none;
}

.ob-success p {
  max-width: 32em;
  margin: max(0.75rem, calc(16 * var(--px))) auto 0;
  font-size: max(1rem, calc(20 * var(--px)));
}

/* Keeps the form submittable by people, not bots. */
.ob-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Footer ---------------------------------------------------------------- */

.ob-footer {
  display: grid;
  place-items: center;
  min-height: max(8rem, calc(240 * var(--px)));
  margin-top: max(3rem, calc(86 * var(--px)));
  background: var(--charcoal);
}

.ob-footer a {
  display: block;
}

.ob-footer img {
  display: block;
  width: max(9rem, calc(232 * var(--px)));
  height: auto;
}

/* Terms of Use / Privacy Policy. This page carries them because it is the one
   place on the site that actually collects personal data, so the policy
   covering that collection has to be reachable from it. Same quiet treatment
   as the footers on the marketing pages — this stylesheet is standalone, so
   the rules are repeated here rather than shared. */
.ob-footer {
  gap: max(1rem, calc(22 * var(--px)));
  padding: max(2rem, calc(48 * var(--px))) 1.25rem;
}

.ob-legal {
  margin: 0;
  font-size: max(0.78rem, calc(15 * var(--px)));
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}

.ob-legal a {
  /* `.ob-footer a` is `display: block` for the logo link above; these two sit
     on one line with a separator between them. */
  display: inline;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 160ms ease;
}

.ob-legal a:hover,
.ob-legal a:focus-visible {
  color: #ffffff;
}

.ob-legal span {
  margin: 0 0.5rem;
  opacity: 0.55;
}

/* No widows (standing rule for the Teeej sites). */
h1,
h2,
.ob-lede,
.ob-callout p,
.ob-sub,
.ob-note,
.ob-field > label,
.ob-label,
.ob-consent,
.ob-status,
.ob-success p {
  text-wrap: balance;
}