/* stylelint-disable */
/*
 * Paid theme for the Ashby job board (jobs.ashbyhq.com/paid)
 * Copies paid.ai/blog: the job list opens with the dark PageHero (framed
 * grid, pink corner dots, green mono eyebrow, Space Grotesk title), and
 * everything below it is the light site: white page, stone text, square
 * mono filter chips, Space Grotesk headings, Inter body, green CTAs.
 * Tokens come from the paid.ai repo (app/globals.css, page-hero.tsx,
 * filter-tabs.tsx, heading.tsx).
 * Paste into Ashby → Admin → Job board → Theme → Custom CSS.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap");

/* Departure Mono (MIT), the site's mono face, from its official repo via jsDelivr.
   Ashby only allows fonts from https URLs, so it cannot be embedded. */
@font-face {
  font-family: "Departure Mono";
  src: url("https://cdn.jsdelivr.net/gh/rektdeckard/departure-mono@1.500/public/assets/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* paid.ai tokens (light) */
  --paid-white: #ffffff;
  --paid-alt: #fafaf9; /* stone-50 */
  --paid-muted: #f5f5f4; /* stone-100 */
  --paid-text: #44403c; /* stone-700, body copy */
  --paid-text-muted: #78716c; /* stone-500 */
  --paid-strong: #0c0a09; /* stone-950, headings */
  --paid-border: rgba(12, 10, 9, 0.1);
  --paid-border-dark: rgba(12, 10, 9, 0.2);
  --paid-green: #3da900; /* green-2, primary */
  --paid-pink: #dc93ff; /* pink-1, corner dots */
  --paid-danger: #ef4444;

  /* paid.ai tokens (dark hero) */
  --paid-dark-bg: #0c0a09; /* stone-950 */
  --paid-dark-alt: #1c1917; /* stone-900 */
  --paid-dark-text: #d6d3d1; /* stone-300 */
  --paid-dark-border: rgba(245, 245, 244, 0.15);

  --paid-sans: "Inter", system-ui, sans-serif;
  --paid-heading: "Space Grotesk", "Inter", sans-serif;
  --paid-mono: "Departure Mono", "Consolas", monospace;

  /* Hero geometry: the framed column is the site's 1240px wrapper */
  --hero-w: min(1240px, calc(100vw - 48px));
  --hero-band: 64px; /* empty band between the frame lines */
  --hero-bleed: 0px; /* panel overhang past the viewport edges */

  /* Ashby variables */
  /* Ashby paints its top bar with this, so it is the bar's colour; the
     white pages are drawn behind the content below (see the hero and the
     posting title) */
  --colorAppBackground: #0a0a0a;
  /* Also set these two in Ashby admin → Theme so they agree */
  --colorPrimary900: #3da900;
  --colorPrimary600: #3da900;
  --widthMaxContent: 960px;
  --widthMaxJobBoard: 960px;
  --widthMaxSubscriptionPreferences: 640px;
  --borderRadiusContainer: 0px;
  --borderRadiusControl: 0px;
  --borderRadiusButton: 4px;
  --fontFamily: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Job list: the dark PageHero ---------- */

.ashby-job-board-heading {
  position: relative;
  width: var(--hero-w);
  margin: 0 calc((100% - var(--hero-w)) / 2) calc(var(--hero-band) + 48px);
  padding: calc(var(--hero-band) + 72px) 24px 72px;
  text-align: center;
  font-family: var(--paid-heading);
  font-weight: 600;
  font-size: 68px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-feature-settings: "liga" 1, "calt" 1;
  color: var(--paid-white);
}

/* Eyebrow */
.ashby-job-board-heading::before {
  content: "Careers";
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 20px;
  white-space: nowrap;
  font-family: var(--paid-mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--paid-green);
}

/* Description */
.ashby-job-board-heading::after {
  content: "Help us build the monetization engine for the agent economy: meter, price, bill and prove the value AI agents deliver.";
  display: block;
  max-width: 36rem;
  margin: 24px auto 0;
  font-family: var(--paid-sans);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--paid-dark-text);
}

/* The count's text is hidden; its ::after paints the full-bleed hero panel
   behind the heading: gradient, frame lines and the four pink dots */
.ashby-job-board-heading-count {
  font-size: 0px;
}

.ashby-job-board-heading-count::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -400px; /* runs up under the sticky top bar */
  bottom: calc(var(--hero-band) * -1);
  left: calc((var(--hero-w) - 100vw) / 2 - var(--hero-bleed));
  width: calc(100vw + var(--hero-bleed) * 2);
  pointer-events: none;
  /* white page below the hero; a shadow adds no scroll height */
  box-shadow: 0 0 0 1000vmax var(--paid-white);
  /* top frame line: a band below the top bar (Ashby leaves 24px above the heading) */
  --hero-top: calc(400px + var(--hero-band) - 24px);
  --col: calc((100vw - var(--hero-w)) / 2 + var(--hero-bleed));
  background:
    /* dots: top-left, top-right, bottom-left, bottom-right */
    linear-gradient(var(--paid-pink), var(--paid-pink)) left calc(var(--col) - 3px) top calc(var(--hero-top) - 3px) / 6px 6px no-repeat,
    linear-gradient(var(--paid-pink), var(--paid-pink)) right calc(var(--col) - 3px) top calc(var(--hero-top) - 3px) / 6px 6px no-repeat,
    linear-gradient(var(--paid-pink), var(--paid-pink)) left calc(var(--col) - 3px) bottom calc(var(--hero-band) - 3px) / 6px 6px no-repeat,
    linear-gradient(var(--paid-pink), var(--paid-pink)) right calc(var(--col) - 3px) bottom calc(var(--hero-band) - 3px) / 6px 6px no-repeat,
    /* horizontal frame lines */
    linear-gradient(var(--paid-dark-border), var(--paid-dark-border)) left 0 top var(--hero-top) / 100% 1px no-repeat,
    linear-gradient(var(--paid-dark-border), var(--paid-dark-border)) left 0 bottom var(--hero-band) / 100% 1px no-repeat,
    /* vertical frame lines */
    linear-gradient(var(--paid-dark-border), var(--paid-dark-border)) left var(--col) top 0 / 1px 100% no-repeat,
    linear-gradient(var(--paid-dark-border), var(--paid-dark-border)) right var(--col) top 0 / 1px 100% no-repeat,
    /* the hero's dark gradient */
    linear-gradient(to bottom, var(--paid-dark-bg), var(--paid-dark-alt));
}

.ashby-job-board-filters-label,
.ashby-job-board-reset-filters-label {
  font-family: var(--paid-mono);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--paid-text-muted);
}

.ashby-job-board-reset-filters-label:not([disabled]) {
  color: var(--paid-strong);
}

.ashby-job-board-filter {
  height: 36px;
  background: var(--paid-white) !important;
  background-image: none !important;
  color: var(--paid-text) !important;
  border: 1px solid var(--paid-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--paid-mono);
  font-size: 12px;
  text-transform: uppercase;
  transition: border-color 200ms;
}

.ashby-job-board-filter:hover,
.ashby-job-board-filter:focus {
  border-color: var(--paid-border-dark) !important;
  color: var(--paid-strong) !important;
}

/* ---------- Job list: departments and roles ---------- */

.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  margin-top: 56px;
  margin-bottom: 16px;
  font-family: var(--paid-mono);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  color: var(--paid-green);
}

.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
  font-family: var(--paid-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--paid-strong);
}

.ashby-job-posting-brief-list a {
  text-decoration: none;
  color: inherit;
}

/* Each role: a row between hairlines, like the blog's grid of posts */
.ashby-job-posting-brief {
  position: relative;
  margin: 0;
  padding: 24px 48px 24px 0;
  background: transparent !important;
  border: 0;
  border-top: 1px solid var(--paid-border);
  border-radius: 0;
  box-shadow: none !important;
}

.ashby-job-posting-brief-list a:last-child .ashby-job-posting-brief {
  border-bottom: 1px solid var(--paid-border);
}

.ashby-job-posting-brief::after {
  content: "→";
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--paid-text-muted);
  transition: color 200ms, transform 200ms;
}

.ashby-job-posting-brief-list a:hover .ashby-job-posting-brief::after {
  color: var(--paid-green);
  transform: translate(4px, -50%);
}

.ashby-job-posting-brief-title {
  margin: 0 0 8px;
  font-family: var(--paid-heading);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-feature-settings: "liga" 1, "calt" 1;
  color: var(--paid-strong) !important;
  transition: color 200ms;
}

.ashby-job-posting-brief-list a:hover .ashby-job-posting-brief-title {
  color: var(--paid-green) !important;
}

.ashby-job-posting-brief-details,
.ashby-job-posting-brief-details * {
  font-family: var(--paid-sans);
  font-size: 16px;
  color: var(--paid-text) !important;
}

/* ---------- Job posting (light, like a blog article) ---------- */

.ashby-job-board-back-to-all-jobs-button {
  background: transparent !important;
  color: var(--paid-strong) !important;
  border: 1px solid var(--paid-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--paid-mono);
  font-size: 12px;
  text-transform: uppercase;
}

.ashby-job-board-back-to-all-jobs-button:hover {
  border-color: var(--paid-border-dark) !important;
}

.ashby-job-posting-header {
  /* on a posting page this is the top bar */
  background: #0a0a0a !important;
  border-bottom: 1px solid var(--paid-dark-border) !important;
}

.ashby-job-posting-heading {
  position: relative;
  margin-top: 96px !important;
  margin-bottom: 48px !important;
  font-family: var(--paid-heading);
  font-weight: 600;
  font-size: 68px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-feature-settings: "liga" 1, "calt" 1;
  color: var(--paid-strong);
}

.ashby-job-posting-left-pane {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ashby-job-posting-left-pane div {
  border-color: var(--paid-border) !important;
}

.ashby-job-posting-left-pane h2 {
  font-family: var(--paid-mono);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--paid-text-muted);
}

.ashby-job-posting-left-pane p,
.ashby-job-posting-left-pane span {
  color: var(--paid-strong);
}

/* The white page behind a posting, under the dark top bar */
.ashby-job-posting-heading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  box-shadow: 0 0 0 1000vmax var(--paid-white);
}

/* Overview / Application tabs */
.ashby-job-posting-right-pane [role="tablist"] {
  border-bottom: 1px solid var(--paid-border);
}

.ashby-job-posting-right-pane [role="tab"] {
  font-family: var(--paid-mono);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--paid-text-muted) !important;
}

.ashby-job-posting-right-pane [role="tab"][aria-selected="true"] {
  color: var(--paid-strong) !important;
}

.ashby-job-posting-right-pane-tab-slider {
  background: var(--paid-strong) !important;
}

/* Description: the article body */
.ashby-job-posting-description-container {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ashby-job-posting-description {
  font-family: var(--paid-sans);
  font-size: 18px;
  line-height: 1.5;
  color: var(--paid-text);
}

.ashby-job-posting-description h1,
.ashby-job-posting-description h2,
.ashby-job-posting-description h3,
.ashby-job-posting-description p > strong:only-child {
  display: block;
  font-family: var(--paid-heading);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-feature-settings: "liga" 1, "calt" 1;
  color: var(--paid-strong);
}

.ashby-job-posting-description h1,
.ashby-job-posting-description h2 {
  font-size: 36px;
}

.ashby-job-posting-description h3,
.ashby-job-posting-description p > strong:only-child {
  font-size: 25px;
}

.ashby-job-posting-description strong,
.ashby-job-posting-description b {
  color: var(--paid-strong);
  font-weight: 600;
}

.ashby-job-posting-description a {
  color: var(--paid-green) !important;
  text-decoration: none;
}

.ashby-job-posting-description a:hover {
  opacity: 0.8;
}

.ashby-job-posting-description ul li::marker {
  color: var(--paid-green);
}

/* Article rhythm. Ashby sets tight margins and adds empty lines as spacer
   divs and empty paragraphs; drop those and space blocks evenly instead */
.ashby-job-posting-description p,
.ashby-job-posting-description ul,
.ashby-job-posting-description ol {
  margin: 0 0 20px !important;
}

.ashby-job-posting-description li {
  margin-bottom: 8px !important;
}

.ashby-job-posting-description h1,
.ashby-job-posting-description h2,
.ashby-job-posting-description p > strong:only-child {
  margin: 56px 0 16px !important;
}

.ashby-job-posting-description h3 {
  margin: 40px 0 12px !important;
}

.ashby-job-posting-description > :first-child {
  margin-top: 0 !important;
}

.ashby-job-posting-description p:empty,
.ashby-job-posting-description div[style*="min-height"] {
  display: none !important;
}

.ashby-job-posting-description hr {
  border: 0;
  border-top: 1px solid var(--paid-border);
}

/* ---------- Buttons ---------- */

/* Primary CTA: the site's green "Get started" */
.ashby-application-form-submit-button,
.ashby-job-posting-description-container button {
  min-height: 44px;
  padding: 0 22px;
  background: var(--paid-green) !important;
  color: var(--paid-white) !important;
  border: 0 !important;
  border-radius: 4px !important;
  font-family: var(--paid-sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  transition: opacity 200ms;
}

.ashby-application-form-submit-button:hover:not([disabled]),
.ashby-job-posting-description-container button:hover {
  opacity: 0.9;
}

.ashby-application-form-submit-button:focus-visible {
  outline: 2px solid var(--paid-strong);
  outline-offset: 2px;
}

.ashby-application-form-submit-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Secondary: the site's outlined mono "Talk to an expert" */
.ashby-application-form-input-file-dropzone-upload,
.ashby-application-form-input-education-add,
.ashby-application-form-autofill-uploader button,
.ashby-application-form-autofill-input-base-layer button {
  background: transparent !important;
  color: var(--paid-strong) !important;
  border: 1px solid var(--paid-strong) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  font-family: var(--paid-mono);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}

.ashby-application-form-input-file-dropzone-upload:hover,
.ashby-application-form-input-education-add:hover,
.ashby-application-form-autofill-uploader button:hover,
.ashby-application-form-autofill-input-base-layer button:hover {
  background: var(--paid-strong) !important;
  color: var(--paid-white) !important;
}

/* ---------- Application form ---------- */

.ashby-application-form-container,
.ashby-survey-form-container {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ashby-application-form-section-container {
  padding: 32px;
  margin-bottom: 24px;
  background: var(--paid-white) !important;
  border: 1px solid var(--paid-border);
  border-radius: 0;
  box-shadow: none !important;
}

.ashby-application-form-section-header {
  margin-bottom: 24px;
  border-bottom-color: var(--paid-border) !important;
}

.ashby-application-form-section-header-title {
  font-family: var(--paid-heading);
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--paid-strong);
}

.ashby-application-form-section-header-description,
.ashby-application-form-question-description,
.ashby-application-form-texting-consent-description {
  font-size: 14px;
  color: var(--paid-text-muted);
}

.ashby-application-form-field-entry {
  margin-bottom: 24px;
}

.ashby-application-form-question-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--paid-strong);
}

/* Fields: square, hairline, like the blog's search box */
.ashby-application-form-input-text,
.ashby-application-form-input-textarea,
.ashby-application-form-input-date,
.ashby-application-form-input-autocomplete,
.ashby-application-form-input-dropdown {
  background: var(--paid-white) !important;
  background-image: none !important;
  color: var(--paid-strong) !important;
  border: 1px solid var(--paid-border-dark) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 14px;
  transition: border-color 200ms;
}

.ashby-application-form-input-date input,
.ashby-application-form-input-autocomplete input,
.ashby-application-form-input-dropdown-select {
  background: transparent !important;
  background-image: none !important;
  color: var(--paid-strong) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ashby-application-form-input-text::placeholder,
.ashby-application-form-input-textarea::placeholder,
.ashby-application-form-input-autocomplete input::placeholder {
  color: var(--paid-text-muted);
}

.ashby-application-form-input-text:hover,
.ashby-application-form-input-textarea:hover,
.ashby-application-form-input-date:hover,
.ashby-application-form-input-autocomplete:hover,
.ashby-application-form-input-dropdown:hover {
  border-color: var(--paid-text-muted) !important;
}

.ashby-application-form-input-text:focus,
.ashby-application-form-input-textarea:focus,
.ashby-application-form-input-date:focus-within,
.ashby-application-form-input-autocomplete:focus-within,
.ashby-application-form-input-autocomplete[aria-expanded="true"],
.ashby-application-form-input-dropdown:focus-within {
  border-color: var(--paid-strong) !important;
  outline: none;
}

.ashby-application-form-input-dropdown[data-disabled],
.ashby-application-form-input-yesno[data-disabled] {
  opacity: 0.5;
}

.ashby-application-form-input-dropdown-icon {
  color: var(--paid-text-muted);
}

/* Popups: autocomplete and date picker */
.ashby-application-form-input-autocomplete-popup,
.ashby-application-form-input-date-popup {
  background: var(--paid-white) !important;
  border: 1px solid var(--paid-border-dark);
  border-radius: 0;
  box-shadow: 0 12px 32px rgba(12, 10, 9, 0.08);
}

.ashby-application-form-input-autocomplete-popup-result {
  color: var(--paid-strong);
}

.ashby-application-form-input-autocomplete-popup-result[aria-selected="true"],
.ashby-application-form-input-autocomplete-popup-result:hover {
  background: var(--paid-muted) !important;
}

.ashby-application-form-input-autocomplete-popup-empty,
.ashby-application-form-input-autocomplete-popup-loading {
  color: var(--paid-text-muted);
}

.ashby-application-form-input-date-popup-title {
  font-family: var(--paid-heading);
  font-weight: 600;
  color: var(--paid-strong);
}

.ashby-application-form-input-date-popup-header-button {
  color: var(--paid-text);
  background: transparent;
}

.ashby-application-form-input-date-popup-header-button:hover {
  background: var(--paid-muted);
}

/* Checkboxes and radios */
.ashby-application-form-input-checkbox-group-option-label,
.ashby-application-form-input-radio-group-option-label {
  font-size: 14px;
  color: var(--paid-strong);
}

.ashby-application-form-input-checkbox-group-option-checkbox,
.ashby-application-form-input-radio-group-option-radio {
  accent-color: var(--paid-green);
}

.ashby-application-form-input-checkbox-group-option[data-disabled],
.ashby-application-form-input-radio-group-option[data-disabled] {
  opacity: 0.5;
}

/* Yes / No: chips, the chosen one filled like the blog's active filter */
.ashby-application-form-input-yesno-option {
  background: var(--paid-white) !important;
  background-image: none !important;
  color: var(--paid-text) !important;
  border: 1px solid var(--paid-border-dark) !important;
  border-radius: 0 !important;
  font-family: var(--paid-mono);
  font-size: 12px;
  text-transform: uppercase;
}

.ashby-application-form-input-yesno-option:hover {
  color: var(--paid-strong) !important;
  border-color: var(--paid-text-muted) !important;
}

.ashby-application-form-input-yesno-option[aria-pressed="true"] {
  background: var(--paid-strong) !important;
  color: var(--paid-white) !important;
  border-color: var(--paid-strong) !important;
}

/* File upload and resume autofill */
/* The file field: Ashby's outer dashed box is the drop zone, so the inner
   instructions row stays plain */
.ashby-application-form-input-file {
  padding: 24px !important;
}

.ashby-application-form-input-file-dropzone {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
}

/* Ashby nests the dashed drop box in a second box padded on top only;
   keep just the dashed one, lined up with the form card below */
.ashby-application-form-autofill-pane {
  background: transparent !important;
  border: 0 !important;
  padding: 24px 14px 0 !important;
}

.ashby-application-form-autofill-input-root {
  padding: 24px !important;
}

.ashby-application-form-input-file,
.ashby-application-form-autofill-input-root {
  background: var(--paid-alt) !important;
  background-image: none !important;
  border: 1px dashed var(--paid-border-dark) !important;
  border-radius: 0 !important;
  color: var(--paid-text);
}

.ashby-application-form-autofill-input-root[data-state="drag"],
.ashby-application-form-input-file:hover {
  border-color: var(--paid-green) !important;
}

.ashby-application-form-autofill-input-base-layer,
.ashby-application-form-autofill-input-drag-layer,
.ashby-application-form-autofill-input-pending-layer {
  background: transparent !important;
}

.ashby-application-form-autofill-input-title {
  font-family: var(--paid-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--paid-strong);
}

.ashby-application-form-autofill-input-description,
.ashby-application-form-input-file-dropzone-instructions {
  color: var(--paid-text);
}

.ashby-application-form-autofill-input-icon {
  color: var(--paid-green);
}

.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] {
  color: var(--paid-green);
}

.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
  color: var(--paid-danger);
}

.ashby-application-form-input-file-item {
  background: var(--paid-white);
  border: 1px solid var(--paid-border);
  border-radius: 0;
}

.ashby-application-form-input-file-item-name {
  font-family: var(--paid-mono);
  font-size: 12px;
  color: var(--paid-strong);
}

.ashby-application-form-input-file-item-delete,
.ashby-application-form-input-education-entry-delete {
  color: var(--paid-text-muted);
}

.ashby-application-form-input-file-item-delete:hover,
.ashby-application-form-input-education-entry-delete:hover {
  color: var(--paid-danger);
}

/* Education history */
.ashby-application-form-input-education-entry {
  background: var(--paid-alt);
  border: 1px solid var(--paid-border);
  border-radius: 0;
}

.ashby-application-form-input-education-entry-header {
  font-family: var(--paid-mono);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--paid-text-muted);
}

/* Result states */
.ashby-application-form-success-container,
.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container,
.ashby-application-blocking-disclosure {
  padding: 32px;
  background: var(--paid-alt);
  border: 1px solid var(--paid-border);
  border-radius: 0;
  color: var(--paid-text);
}

.ashby-application-form-success-container {
  border-color: var(--paid-green);
}

.ashby-application-form-failure-container {
  border-color: var(--paid-danger);
}

/* Narrow screens */
/* Narrow screens: the site's fluid type scale at its smallest steps */
@media (max-width: 840px) {
  .ashby-job-board-heading,
  .ashby-job-posting-heading {
    margin-top: 56px !important;
    margin-bottom: 32px !important;
    font-size: 40px;
  }

  .ashby-job-board-heading::after {
    font-size: 18px;
  }

  .ashby-job-posting-brief-title,
  .ashby-application-form-section-header-title,
  .ashby-job-posting-description h3,
  .ashby-job-posting-description p > strong:only-child {
    font-size: 22px;
  }

  .ashby-job-posting-description h1,
  .ashby-job-posting-description h2 {
    font-size: 28px;
  }

  .ashby-job-posting-brief-details,
  .ashby-job-posting-brief-details * {
    font-size: 14px;
  }

  .ashby-job-posting-description,
  .ashby-application-form-submit-button,
  .ashby-job-posting-description-container button {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .ashby-job-board-heading {
    --hero-w: calc(100vw - 32px);
    --hero-band: 32px;
    padding: calc(var(--hero-band) + 48px) 16px 48px;
  }

  .ashby-application-form-section-container {
    padding: 20px;
  }
}