/* Contact us (lessen.app/support), Oct 21, 2026: Origin's "Book a demo"
 * page (useorigin.com/employers/demo) in Lessen's dark system.
 *   1. The demo section: plain page colour, padding 200/32/80 (160/12/80 on
 *      phones), two 653px columns 70 apart. Left: the tracked eyebrow, the
 *      80px headline, one line, then (where Origin lists its customers) the
 *      ways to reach us. Right: the form in Origin's field style: no border,
 *      a dark vertical gradient, radius 8, 40px fields, 12px labels with a
 *      small raised asterisk, a white 40px submit centred under the form.
 *   2. Origin's 50px gap, then its testimonial band (100/32, a 38px title
 *      100 above three 439 x 434 colour-field cards, radius 30, 30 apart,
 *      45px round arrows), carrying the quick fixes.
 *   3. Origin's 50px gap, then the footer.
 * Measured against Origin on Oct 21, 2026 (pages2/contact-gift/). */

.ct-page [hidden] { display: none !important; }
.ct-wrap { max-width: 1376px; margin: 0 auto; }

/* ---------------------------------------------------------------- 1. the demo section */
.ct-hero { position: relative; padding: 200px 32px 80px; }
.ct-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 70px; align-items: start; }
.ct-eyebrow { margin: 0 0 20px; font: 500 16px/20px var(--os-sans); letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.ct-h1 { margin: 0; font-size: 80px; line-height: 80px; letter-spacing: -.02em; }
.ct-lead { margin: 24px 0 40px; max-width: 560px; font: 300 18px/27px var(--os-sans); color: var(--os-fg-2); }
.ct-trust { margin: 0 0 20px; font: 500 14px/12.6px var(--os-sans); letter-spacing: 2px; text-transform: uppercase; color: #FAFAFA; }
.ct-reach { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; max-width: 520px; }
.ct-reach li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 14px; align-items: start; font: 300 15px/22px var(--os-sans); color: var(--os-fg-2); }
.ct-reach svg { width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: rgba(255, 255, 255, .62); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ct-reach b { font-weight: 400; color: #fff; }
.ct-reach a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; transition: text-decoration-color .2s; white-space: nowrap; }
.ct-reach a:hover { text-decoration-color: #fff; }
.ct-note { margin: 22px 0 0; font: 500 10px/13.5px var(--os-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--os-fg-4); }

/* the form, Origin's field style */
.ct-formblock { position: relative; scroll-margin-top: 100px; }
.ct-form-title { margin: 0 0 20px; font: 500 24px/36px var(--os-sans); letter-spacing: -.01em; color: #fff; }
.ct-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 30px; row-gap: 5px; }
.ct-span { grid-column: 1 / -1; }
.ct-field { min-width: 0; margin-bottom: 21px; }
.ct-field label { display: block; margin: 0 0 5px; font: 500 12px/16.8px var(--os-sans); color: #fff; }
.ct-req { position: relative; top: -4.5px; margin-left: 1px; font-size: 9px; line-height: 0; color: var(--os-glow); }
.ct-field input, .ct-field select, .ct-field textarea {
  display: block; width: 100%; box-sizing: border-box; margin: 0; border: 0; border-radius: 8px; outline: none;
  font: 400 14px/20px var(--os-sans); color: #fff; -webkit-appearance: none; appearance: none;
  background: linear-gradient(0deg, #121413, #222524); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0);
  transition: box-shadow .2s var(--os-io); }
.ct-field input, .ct-field select { height: 40px; padding: 10px 16px; }
.ct-field textarea { min-height: 150px; padding: 10px 16px; resize: vertical; }
.ct-field input::placeholder, .ct-field textarea::placeholder { color: #8A8F8C; }
body.os .ct-field input:focus-visible, body.os .ct-field select:focus-visible, body.os .ct-field textarea:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgba(168, 237, 196, .8), 0 0 0 3px rgba(135, 204, 170, .2); }
.ct-field.bad input, .ct-field.bad select, .ct-field.bad textarea { box-shadow: inset 0 0 0 1px rgba(240, 180, 164, .85); }
.ct-select { position: relative; }
.ct-select select { padding-right: 44px; font-weight: 500; cursor: pointer; }
.ct-select option { color: #0C0E0D; background: #fff; font-weight: 400; }
.ct-select svg { position: absolute; right: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct-under { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 6px; }
.ct-count { margin: 0 0 0 auto; flex: none; font: 400 11px/16px var(--os-sans); color: var(--os-fg-3); font-variant-numeric: tabular-nums; }
.ct-count.near { color: #E8C48C; }
.ct-count.full { color: #F0B4A4; }
.ct-err { margin: 6px 0 0; font: 400 12px/16px var(--os-sans); color: #F0B4A4; }
.ct-under .ct-err { margin: 0; }
.ct-err:empty { display: none; }

/* the robot box: off the screen, out of the tab order, read by nobody */
.ct-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.ct-robot { display: flex; justify-content: center; margin-top: 16px; }
.ct-robot:empty { display: none; }

.ct-consent { margin: 0; font: 400 12px/16.8px var(--os-sans); color: var(--os-fg-2); }
.ct-consent a { color: #fff; text-underline-offset: 2px; }
.ct-submit { display: flex; justify-content: center; margin-top: 24px; }
.ct-send { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 12px 18px; border: 0; border-radius: 12px; cursor: pointer;
  font: 500 12px/16px var(--os-sans); letter-spacing: .05em; text-transform: uppercase; color: #000; background: #fff; transition: background-color .2s var(--os-io); }
.ct-send:hover { background: rgba(255, 255, 255, .86); }
.ct-send[aria-busy="true"] { cursor: progress; opacity: .75; }
.ct-form-err { margin: 16px 0 0; padding: 12px 16px; border-radius: 8px; font: 400 13px/19px var(--os-sans); text-align: center; color: #F0B4A4; background: rgba(240, 180, 164, .08); }
.ct-form-err:empty { display: none; }
.ct-form-err a { color: #fff; text-underline-offset: 2px; }

/* thanks */
.ct-done { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 520px; padding: 40px 24px; border-radius: 16px; text-align: center; background: var(--os-card); }
.ct-check { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--os-forest-grad); }
.ct-check svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ct-done-h { margin-top: 28px; max-width: 16ch; line-height: 1 !important; }
.ct-done-h:focus { outline: none; }
.ct-done-p { margin-top: 18px; font: 300 16px/24px var(--os-sans); color: var(--os-fg-2); }
.ct-done-p b { font-weight: 400; color: #fff; overflow-wrap: anywhere; }
.ct-done-sub { margin-top: 6px; max-width: 38ch; font: 300 14px/21px var(--os-sans); color: var(--os-fg-3); }
.ct-again { margin-top: 28px; height: 40px; padding: 12px 18px; border: 0; border-radius: 12px; cursor: pointer; font: 500 12px/16px var(--os-sans); letter-spacing: .05em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, .1); transition: background-color .2s var(--os-io); }
.ct-again:hover { background: rgba(255, 255, 255, .18); }
@media (prefers-reduced-motion: no-preference) { .ct-done:not([hidden]) { animation: ctIn .5s var(--os-out) both; } }
@keyframes ctIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- 2. the quick fixes (Origin's testimonial band) */
.ct-gap { height: 50px; }
.ct-fixes { padding: 100px 32px; }
.ct-fixes-title { margin: 0 auto 100px; max-width: 980px; text-align: center; }
.ct-car { --n: 3; position: relative; }
.ct-car-list { overflow: hidden; margin: 0 -15px; touch-action: pan-y; }
.ct-car-track { display: flex; }
.ct-slide { flex: 0 0 calc(100% / var(--n)); box-sizing: border-box; padding: 0 15px; }
.ct-fix { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; height: 434px; box-sizing: border-box; padding: 32px; border-radius: 30px; text-align: center; color: #fff; background: #164832; }
.ct-fix-art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ct-fix-ic { flex: none; width: 22px; height: 22px; margin-bottom: 18px; fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ct-fix-q { margin: 0 0 14px; font: 500 11px/16px var(--os-sans); letter-spacing: 2px; text-transform: uppercase; color: #fff; }
.ct-fix-a { margin: 0; font: 300 18px/27px var(--os-sans); color: #fff; }
.ct-fix-a a { color: #fff; text-underline-offset: 3px; }
.ct-fix-link { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 8px; font: 500 11px/16px var(--os-sans); letter-spacing: 2px; text-transform: uppercase; color: #fff; text-decoration: none; background: rgba(9, 40, 27, .42); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: background-color .2s var(--os-io); }
body.os a.ct-fix-link { color: #fff; }
.ct-fix-link:hover { background: rgba(9, 40, 27, .7); }
.ct-fix-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ct-car-ctrl { display: flex; justify-content: center; gap: 15px; margin-top: 35px; }
.ct-car-btn { display: grid; place-items: center; width: 45px; height: 45px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .2); transition: background-color .2s ease-in-out, color .2s ease-in-out; }
.ct-car-btn:hover { color: #0C0E0D; background: #fff; }
.ct-car-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ct-car-play .ic-play { display: none; }
.ct-car.is-paused .ct-car-play .ic-play { display: block; }
.ct-car.is-paused .ct-car-play .ic-pause { display: none; }
.ct-car.is-static .ct-car-play { display: none; }

/* ---------------------------------------------------------------- tablets: two cards */
@media (max-width: 991px) { .ct-car { --n: 2; } }
/* ---------------------------------------------------------------- phones: Origin stacks the columns and shows one card */
@media (max-width: 767px) {
  .ct-hero { padding: 160px 12px 80px; }
  .ct-grid { grid-template-columns: minmax(0, 1fr); row-gap: 70px; }
  .ct-h1 { font-size: 46px; line-height: 46px; }
  .ct-lead { margin: 20px 0 40px; font-size: 16px; line-height: 24px; }
  .ct-form-title { font-size: 20px; line-height: 30px; }
  .ct-fields { grid-template-columns: minmax(0, 1fr); }
  .ct-field input, .ct-field select, .ct-field textarea { font-size: 16px; }
  .ct-fixes { padding: 70px 16px; }
  .ct-fixes-title { margin-bottom: 70px; }
}
@media (max-width: 640px) {
  .ct-car { --n: 1; }
  .ct-fix { padding: 32px 26px; }
}