/* Site accent for highlighted words (orange, sampled from the design reference) */
:root { --accent: #e27521; --r-block: 20px; }

/* Site forms (contact + footer subscribe). :where() keeps specificity at 0 so the page-specific
   classes (.success-message, .footer-form, .form-block ...) still win, as the old Webflow base rules did. */
:where(.site-form) { margin: 0 0 15px; }
:where(.site-form-done) { text-align: center; background-color: #ddd; padding: 20px; display: none; }
:where(.site-form-fail) { background-color: #ffdede; margin-top: 10px; padding: 10px; display: none; }
/* honeypot field: invisible to people, still present for bots */
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }

/* Employers section: tighter gap under the intro text (40px less at every width) */
.solve { margin-top: -40px; }

/* Job Seekers section: same gap above its sticker as the Employers section (offsets differ per breakpoint) */
@media screen and (min-width: 992px) { section.job-seekers { margin-top: 40px; } }
@media screen and (min-width: 768px) and (max-width: 991px) { section.job-seekers { margin-top: 20px; } }
@media screen and (max-width: 767px) { section.job-seekers { margin-top: -16px; } }

/* Employers section: follow-up line under each paragraph */
.solve .text-block-cta { margin-top: 1em; }
.solve .text-block a.inline-link, .solve .text-block-cta a, .job-seekers .text-block a.inline-link, .how-card .text-block a.inline-link { text-decoration: underline; color: #2949ff; }
.solve .text-block a.inline-link:hover, .solve .text-block-cta a:hover, .job-seekers .text-block a.inline-link:hover, .how-card .text-block a.inline-link:hover { text-decoration: none; }

/* How we work page: reuses the home page section/container/text-block styles; only the card grid is custom */
.how { padding-top: 160px; padding-bottom: 80px; }
.how .head_centered { align-items: flex-start; }
.how .head_centered .heading { text-align: left; }
/* Metrics row: 4 equal cards above the grid */
.how-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5em; margin-bottom: 0.5em; }
.how-stat-value { font-family: "Lexend Deca", sans-serif; font-size: 220%; font-weight: 700; line-height: 1; color: #111; margin-bottom: 0.4em; }
.how-stat:nth-child(1) .how-stat-value { color: #f4a3b5; }
.how-stat:nth-child(2) .how-stat-value { color: #b79cf0; }
.how-stat:nth-child(3) .how-stat-value { color: #7fb2f5; }
.how-stat:nth-child(4) .how-stat-value { color: #7fd6a0; }
/* Card grid: odd rows 1/3 + 2/3, even rows 2/3 + 1/3 */
.how-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; }
.how-card { background: #fff; border: 1px solid #e3e3e3; border-radius: var(--r-block); padding: 1.5em; }
.how-pic { margin-top: 1.25em; aspect-ratio: 21 / 9; border-radius: var(--r-block); background: #eceef2 url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2748%27 height=%2748%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%23b8bcc6%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%273%27 y=%275%27 width=%2718%27 height=%2714%27 rx=%272%27/%3E%3Ccircle cx=%278.5%27 cy=%2710%27 r=%271.5%27/%3E%3Cpath d=%27M21 16l-5-5-8 8%27/%3E%3C/svg%3E") center / 48px no-repeat; }
img.how-pic-svg { border-radius: 0; }
img.how-pic { display: block; width: 100%; height: auto; aspect-ratio: auto; background: none; }
.how-callout { font-size: 75%; margin-top: 1.67em; padding: 1.1em 1.25em; border-radius: var(--r-block); background: #7fd6a0; color: #fff; font-family: "Lexend Deca", sans-serif; }
.how-callout-blue { background: #7fb2f5; }
.how-callout-purple { background: #b79cf0; }
.how-callout-rose { background: #f4a3b5; }
.how-callout-lead { font-size: 1.3em; font-weight: 300; line-height: 1.2; }
.how-callout-value { white-space: nowrap; font-size: 2.6em; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0.05em 0 0.15em; }
.how-callout-unit { font-size: 0.5em; font-weight: 400; letter-spacing: 0; }
.how-callout-note { font-size: 0.7em; font-weight: 300; line-height: 1.3; }
img.how-pic-green, img.how-pic-rose { border: 1px solid; border-radius: var(--r-block); }
img.how-pic-green, img.how-pic-rose { border-color: #e3e3e3; }
/* Dummy ATS funnel widget */
.how-widget { margin-top: 1.25em; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; font-family: "Lexend Deca", sans-serif; font-size: clamp(9px, 0.85vw, 11.5px); color: #1a1a1a; }
.how-fcol { background: #fff; border: 1px solid #e3e3e3; border-radius: 12px; padding: 0.7em; display: flex; flex-direction: column; gap: 0.6em; min-width: 0; }
.how-ftitle { font-size: 1.3em; font-weight: 400; color: #8a8a8a; line-height: 1.2; padding: 0.15em 0.2em 0; }
.how-fbox { background: #f6f6f6; border: 1px solid #e3e3e3; border-radius: 8px; padding: 0.6em 0.7em; }
.how-flabel { font-size: 0.8em; text-transform: uppercase; color: #8a8a8a; letter-spacing: 0.02em; }
.how-fvalue { font-size: 1.35em; font-weight: 600; line-height: 1.2; margin-top: 0.15em; }
.how-fsub { font-size: 0.8em; color: #555; margin-top: 0.15em; line-height: 1.3; }
.how-funnel { display: block; width: 100%; height: auto; margin-top: auto; }
.how-card strong { display: block; font-size: 125%; line-height: 1.15; margin-bottom: 0.6em; }
/* Highlighted words in card titles: italic serif in an accent color */
.how-hl { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; font-size: 1.2em; letter-spacing: 0; color: var(--accent); }
.how-card > picture { display: contents; }
.how-card br { display: none; }
.how-cards .how-card:nth-child(4n+2), .how-cards .how-card:nth-child(4n+3) { grid-column: span 2; }
@media screen and (min-width: 992px) {
  .how .head_centered { padding-left: 1.5em; } /* line up with the (unboxed) card text */
  .how-cards .how-card { background: transparent; border-color: transparent; display: flex; flex-direction: column; }
  /* align the visual (callout / image / diagram / widget) to the bottom of every card in the row */
  .how-cards .how-card > .text-block { margin-bottom: 1.6em; }
  .how-cards .how-card > :not(.text-block), .how-cards .how-card > picture > img { margin-top: auto; }
}
@media screen and (max-width: 767px) {
  .how-widget { grid-template-columns: 1fr; }
}
@media screen and (max-width: 991px) {
  .how-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25em; margin-bottom: 0.25em; }
  .how-cards { grid-template-columns: minmax(0, 1fr); gap: 0.25em; }
  .how-cards .how-card:nth-child(n) { grid-column: auto; }
  .how-widget { font-size: 11px; }
}

/* CTA block at the end of the page: one big card, two columns */
.how-cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2em; background: #fff; border: 1px solid #e3e3e3; border-radius: var(--r-block); padding: 2em 0; }
.how-cta-col { display: flex; flex-direction: column; align-items: flex-start; padding: 0 2em; }
.how-cta-col + .how-cta-col { border-left: 1px solid #e3e3e3; }
.how-cta-title { font-family: "Lexend Deca", sans-serif; font-size: 125%; line-height: 1.15; font-weight: 700; color: #1a1a1a; margin-bottom: 0.6em; }
.how-cta-col .text-block { margin-bottom: 1.2em; }
.how-cta-link { margin-top: auto; font-family: "Lexend Deca", sans-serif; font-size: 75%; font-weight: 500; color: #2949ff; text-decoration: none; }
.how-cta-arrow { display: inline-block; transition: transform 0.2s ease; }
.how-cta-link:hover .how-cta-arrow { transform: translateX(4px); }
@media screen and (max-width: 767px) {
  .how-cta { grid-template-columns: minmax(0, 1fr); padding: 1.1rem 0; margin-top: 10px; }
  .how-cta-col { padding: 0 1.1rem; }
  .how-cta-col + .how-cta-col { border-left: 0; border-top: 1px solid #e3e3e3; margin-top: 1.1rem; padding-top: 1.1rem; }
}

/* Portal button: sign-in icon after the label */
.nav-menu-two .btn-menu { display: inline-flex; align-items: center; gap: 0.5em; }
.btn-menu .btn-icon { flex: none; width: 1.1em; height: 1.1em; }

/* Subscribe button: spinner while the request is in flight (replaces the arrow icon) */
.footer-form-submit.is-loading { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3'%3E%3Ccircle cx='12' cy='12' r='9' stroke-opacity='.25'/%3E%3Cpath d='M21 12a9 9 0 0 0-9-9' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.8s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E"); background-size: 24px 24px; cursor: progress; }

/* The Webflow stylesheet names a legacy font (Mulish) that is never loaded; devices without it (iOS Safari)
   rendered Times New Roman. Body text is Lexend Deca across the site (the Webflow rule already does this at >=1280px). */
.text-block, .tab_sub, .text-block-policy { font-family: "Lexend Deca", sans-serif; }
/* Body text: same light look as desktop (Webflow only applies this at >=1280px) */
.text-block { font-weight: 300; letter-spacing: -.04em; }

/* Keep main menu labels on one line */
.nav-menu-two .nav-link, .nav-menu-two .nav-link-accent { white-space: nowrap; }
/* Main menu emphasis: page links medium, Contact regular */
.nav-menu-two .nav-link { font-weight: 500; }
.nav-menu-two .nav-link-accent { font-weight: 400; }

/* Instrument Serif (loaded via the WebFont loader in each page head). Add class "serif" to use it. */
.serif { font-family: "Instrument Serif", serif; font-weight: 400; }

/* Phone portrait (how-we-work) */
@media screen and (max-width: 575px) {
  .how { padding-left: 16px; padding-right: 16px; padding-top: 110px; padding-bottom: 48px; }
  .how .head_centered { margin-bottom: 0.6em; }
  .how .head_centered .heading { font-size: 190%; line-height: 1.05; }
  .how-stats { gap: 10px; margin-bottom: 10px; }
  .how-cards { gap: 10px; }
  :root { --r-block: 16px; }
  .how-card { padding: 1.1rem; }
  .how-stat-value { font-size: 1.6em; margin-bottom: 0.25em; }
  .how-callout { margin-top: 1.2em; }
  img.how-pic { margin-top: 1em; }
  /* funnel widget: swipeable row instead of three stacked columns */
  .how-widget { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 6px; }
  .how-fcol { scroll-snap-align: start; }
}